ゼロからAngularでSPAを作ってみた(1) はじめてのアプリ編


はじめに

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

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

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

Homebrew のインストール

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

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

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

Angular CLI のインストール

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

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

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

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

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

Angularの雛形アプリをブラウザで表示

Angularの雛形アプリをブラウザで表示

チャットアプリを作る

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

Visual Studio Code の画面

Visual Studio Code の画面

TypeScriptの変更

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

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

HTMLテンプレートの変更

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

スタイル(CSS)の追加

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