ゼロからAngularでSPAを作ってみた(1) はじめてのアプリ編 - DACエンジニアブログ：アドテクゑびす界

はじめに

Single Page Application （SPA）って知っていますか？ Webサイトでコンテンツのリンクをクリックした時に妙に表示が早いな〜というとき、実はページを移動するのではなくてページの一部のみを書き換えていたりします。こういったサイトの作り方を Single Page Application （SPA）といって、最近ではメディアでも採用する例が出てきました。 SPAは古のHTMLとは違って、JavaScriptを使ってページを大胆に書き換えていくので、一般にフレームワークを使います。フレームワークとしては React や Vue.js などがありますが、今回は Angular を使ってみます。

必要なものをインストールする

誰でも（プログラミング初級者でも？）できるように＆自分用の覚書を兼ねて、まっさらな macOS High Sierra 上に開発環境を作っていきます。（Windows の人はごめんなさい。適宜読み替えてください）

Homebrew のインストール

ここを参考にして、Homebrew をインストールします。（途中でキー入力やパスワード入力が必要になることがあるので、表示されるメッセージに注意してください）

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

nodebrew と node.js のインストール

ここやここを参考に nodebrew と node.js をインストールして設定します。

$ brew install nodebrew
$ /usr/local/opt/nodebrew/bin/nodebrew setup_dirs
$ echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> .bash_profile
$ source ~/.bash_profile
$ nodebrew install-binary stable
$ nodebrew use stable

Angular CLI のインストール

ここを参考に Angular CLI をインストールします。

$ npm install -g @angular/cli

これで準備ができました。

はじめてのアプリを作って動かす

次のコマンドを打ってアプリの雛形を作ります。（dac-angular は名前なので適当なものを使ってください）

$ ng new dac-angular

作成したアプリのディレクトリに移動して ng serve を実行すると、サーバでアプリが動くので localhost:4200 を開くと雛形のアプリが表示できます。

$ cd dac-angular
$ ng serve

[caption id="attachment_4116" align="aligncenter" width="286"] Angularの雛形アプリをブラウザで表示[/caption]

チャットアプリを作る

ここから、雛形のソースコードを編集してチャットアプリを作っていきます。ソースコードの編集にはVisual Studio Codeを使うといいでしょう。

[caption id="attachment_4125" align="aligncenter" width="300"] Visual Studio Code の画面[/caption]

TypeScriptの変更

Angular では、JavaScript に型とクラス定義ができるようした TypeScript を使ってプログラムを書きます。わからない人はだいたい JavaScript だと思っておけばいいです。以下のコードでは、チャットメッセージが流れる timeline を string の配列で定義して、最初のメッセージとして 'Hello!' を入れています。また、メッセージが送信された時のメソッドとして add を定義して、そのなかで受け取った timeline に追加するようにしています。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  timeline:string[] = ['Hello!'];

  add(value: string) {
    this.timeline.push(value);
  }
}

また、HTMLテンプレートに app.component.html、スタイルに app.component.css を使うように定義してあるので、これらのファイルも編集していきます。

HTMLテンプレートの変更

input に入力した内容（input.value）を button をクリックした時に add メソッドの引数で渡すようにしています。また timeline 配列の中身を Forループ（*ngFor）で表示するようにしています。

<div>
  <input type="text" #input>
  <button (click)="add(input.value)">Send</button>
</div>
<ul>
  <li *ngFor="let item of timeline">
    {{ item }}
  </li>
</ul>

スタイル（CSS）の追加

とりあえずulの行頭の●を消すスタイルを追加しています。

ul {
  list-style-type: none;
}

まとめ

これで、入力して「Send」ボタンを押すと、入力したものが一覧に追加されていく画面が作れました。

[caption id="attachment_4128" align="aligncenter" width="300"] チャットアプリ画面（1）[/caption]

ここまでのサンプルはここからダウンロードできます。次回は、Firebase を使ってデプロイ・公開する予定です。