Angular5+Firebaseでチャットアプリを作る① モックデータ反映編

参考:【最新v5対応】はじめてのAngular入門 実践シングルページアプリケーション(SPA)構築 | Udemy

参考のリンク先はキャンペーン中だと1000円代でAngularの基本的なことが学べるおすすめ教材です。

私は1200円で買えました^^/.

今回はこの教材で紹介されているチャットアプリを作っていこうと思います。

もちろん、有料教材なのですべて書いてしまうわけにはいかないので、ざっくりとになります。

チャットアプリ完成イメージ

AngularChat

プロジェクトの作成

チャットアプリのAngularプロジェクトをまずは作成します。

カレントディレクトリをプロジェクト作成先に移動し、次のコマンドを入力します。

Visual Studio Codeの「表示」→「統合ターミナル」→「ターミナル」で入力画面を表示し、入力します。

Visual Studio Codeを入れてない方には開発が捗るのでインストールをおすすめします。

コマンド ng new angular-chat
完了したらプロジェクトのフォルダに移動します。
コマンド cd angular-chat

サーバーを起動し、コンパイルします。

コマンド ng serve -o

入力すると自動的にブラウザが表示されます。

Bootstrapをインストールする

今回、デザインテンプレートとしてBootstrapを使うので、Bootstrapをインストールします。

サーバーをCtrl+Cで一旦停止してから入力します。

停止しないとBootstrapが使えないことがあります。
コマンド npm install bootstrap@next –save

bootstrap@nextで最新版のBootstrapをインストールします。

BootstrapをAngularに読み込ませましょう。

その前にVSCでAngularプロジェクトを作成したフォルダを開き、ファイルリストを表示します。

VSC左上のエクスプローラーを開き、angular-chatフォルダを開きます。

ファイル一覧が表示されたら、.angular-cli.jsonを開き、Bootstrapを組込みます。

“styles”配列の”styles.css”の上に組込みます。

.angular-cli.json

教材内で配布されているコードを各ファイルにコピペし、Bootstrapが適応されているか確認します。

app.component.html

app.component.css

実行して適応されているか確認します。

コマンド ng serve -o
 次のように表示されていれば成功です。

Bootstrapとは?

今回、Bootstrapとデザインテンプレートを使用します。

簡単にBootstrapとは何なのかおさえておきましょう。

スタイルを決める時にプロパティをあれこれ変更したり、追加してデザインを決めていくことになります。その作業は簡単ではない上に、時間をかけたわりにはいまいちいいデザインにならないことも多くあります。

そこで、デザインテンプレートを使用します。

デザインテンプレートを使用すると、テンプレートとしてあらかじめ用意された複雑なデザインを端的なクラス名で呼び出すことができるため、誰でもセンスの有るデザインにすることができます。

その中でも人気なのがBootstrapということになります。

Bootstrapを使ってできること

今回、どのようにBootstrapを使っているか、そしてどんなことがBootstrapを使えばできるのか見てみましょう。

簡単に下のスライドにまとめました。このままでは見づらいので右下の拡大を利用してください。

さて、Bootstrapを使ったhtmlの構成がわかったところで、アプリ開発を始めましょう。

入力を反映させる

チュートリアルのおさらいです。

モックデータを作り、アプリに反映させましょう。

ゆくゆくはデータベースからデータを読み込んでそのデータを反映させることになりますが、いきなりその機能を持たせるのは開発手順としてはよくありません。

エラーなく動作すればいいですが、もしエラーになればどこがエラーになっているのかわかりにくくなります。

なので、できるだけ機能は少しずつ実装していきます。

面倒ですが、モックデータをアプリに反映させるようにしてから、データベースのデータを反映させるようにします。

急がば回れ!!!

モックデータを作る

モックデータのクラスをまずは定義しましょう。

CLIで作りたいのですが、サーバー動かしているあいだは、他の入力を受け付けてくれません。VSCでは、便利な機能があり、もう一つターミナルを作ることができます。

Visual Studio Code(移行:VSC)の右下に、次のようなアイコンが有ります。

この中の+で新しいターミナルを作ります。

ターミナルの切り替えはその左のリストボックスです。

新しいターミナルで次のコマンドを入力します。

コマンド ng g class class/comment

クラスを定義

作成したファイルにチャットのコメントクラスを定義します。

 comment.ts

ここではチャットの送信者とメッセージ文を文字列として定義します。

モックデータを定義

app.component.tsでモックデータを定義します。

チュートリアルではモック用のファイルを作りましたが、app.component.tsのimportの下で定義することもできます。

constを使って定義します。

constは定数を定義するときに使います。

const COMMENTS: Comment[] = []

TypeScriptでは定数配列を定義する時に、定数をconst 大文字複数形で定義して、

配列名を頭だけ大文字単数形[]にしているようです。

そしてAppComponentで呼び出すコードは、次のように小文字複数形を当てはめています。

comments = COMMENTS;

決まってはいないと思いますが、そのほうが見やすくなります。

app.component.ts

モックデータを表示させる

TSファイルを編集したら、次はhtmlファイルを編集して、変更を表示させるようにします。

htmlファイルを編集しなければブラウザに表示されないので気をつけましょう。

app.component.htmlの<div class=”list-group-item ・・・>タグを次のタグで括りましょう。

<ng-container *ngFor=”let comment of comments”>

ng-containerタグはhtmlとして生成されず、子要素だけを生成します。*ngForにもってこいのタグです。

そして、モックデータをパイプさせます。

{{ comment.name }}と{{ comment.message }}をヘッダーと本文に組込みます。

app.component.html(一部)

これでモックファイルを読み込み、表示させることができました。

ユーザー名を読み込ませる

さて、モックファイルを読み込み、表示できたので、少しずつ入力した値を反映させるようにしましょう。

まずはユーザー名を入力、読み込み、表示できるようにします。

ユーザークラスを作成

まずは、ユーザーのクラスを作成します。

コマンド ng g class class/user
user.ts

Userクラスにidと名前を定義します。

呼び出す度に再定義するためコンストラクターを使います。

コメントクラスを再定義

次に先ほど、作成したコメントクラスにユーザークラスを組込みます。

comment.ts

イニシャルの定義も行いました。slice(0, 1)で最初の文字を取り出します。

わざわざコメントとユーザーのクラスを分けるのは、クラス内の定義が複雑になるからです。ユーザーにはidを付与して管理しやすくしています。

ユーザー名を変数として受け渡す

開発は少しずつが肝心です。

いま作成した、クラスを使ってユーザー名を表示させます。

モックデータを変更します。

app.component.ts

このコードのようにまずは、少しずつ変数に置き換えていきます。

new が新しく組み込まれたことに気づきましたか?

これはクラスの宣言でコンストラクターに初期化の定義をしたため必要になります。

const CURRENT_USER: User = new User(1, ‘五十川 洋平’);

このようにクラスを使って変数に定義する度に「new」が必要になります。

そして、忘れてはいけないのがhtmlファイルの編集です。

忘れてはせっかく、クラスとコンポーネントを編集してもうまく表示されません。

app.component.html

イニシャルと名前のパイプを変更しました。

自分と他人で条件分岐

ユーザー名を変数として表示させることができました。

次は自分と相手でイニシャルアイコンの位置を左右別々に生成するようにしましょう。

他人のイニシャルを表示させるclass=”media-left”のタグ内に次のコードを組込みます。

*ngIf=”comment.user.uid !== currentUser.uid”

自分の名前と一致しなければfalseを返し、タグ内を生成しません。

反対に次のコードは自分の名前と一致したら、Tureを返し、タグ内を生成します。

*ngIf=”comment.user.uid === currentUser.uid”

これをclass=”media-body”タグの後ろに組込みます。

app.component.html

また、</ng-container>下のダミーlist-group-itemは不要になったので消去します

これでチャットライン表示部分のhtmlが全て変数でデータを受け渡しできるようになりました。

さて、次は送信エリアになります。

送信を反映させる

チャットアプリとして入力データの送信は必要不可欠です。

その機能を実装していきます。

入力データを取得

入力データを取得するため次のコードをhtmlのテキストエリアタグに組込みます。

[(ngModel)]=”content” name=”content”

name属性でテキストエリアの名前を設定します。ngModelと同じ名前を設定することで入力データの受け渡しができるようになります。

参考:AngularJS: モデルをテキストボックスなどのフォーム要素にバインドするには?(ng-model) – Build Insider

次に、contentを受け取るためコンポーネントに定義します。

content = ”;

ngModelはFormsModuleが必要になるのでimportsを忘れずに。

入力データを受け渡す

取得した入力データをチャットライン内に受け渡しましょう。

コンポーネントに次のコードを追加します。

これは、もしコメントが入力されたら、

Comment配列に新しいコメントクラスとして、

ユーザー:自分、本文:comment(入力データ)を追加します。

ということになります。

入力データをチャットラインに表示する

次に、このコードを実行するために送信ボタンにクリックイベントを組込みます。

(click)=”addComment(content)”

送信ボタンをクリックすれば先程のaddCommentを実行し、

ngModelで取得していたテキストエリア内にある入力データが、addComment(content)によって、Comment配列に追加され、*ngForが新しい配列の要素をチャットラインに表示するようになります。

少しややこしいかもしれませんが、少しずつ実装させている各機能を見返せばそこまで難しくないはずです。

日付の表示を変える

さて、これまで特にいじってこなかった日付表示部分を変えていきましょう。

コマンド npm install date-fns --save

コメントクラスの定義を変更します。

コンストラクターに次のコードを追加します。

this.date = format(new Date());

これでコメントクラスに新しい配列が追加されたとき、自動的に今の時間が格納されるようになりました。

AngularのDateパイプには色々有りますが今回はカスタムパイプを作って日本語で表示させましょう。

カスタムパイプを作る

カスタムパイプを作るために次のコマンドを入力しましょう。

コマンド ng g pipe pipe/comment-date

作成したファイルを開き、次のコードをインポートします。

import * as ja from 'date-fns/locale/ja';

これはインポートしたdate-fnsライブラリから日本語変換機能をダウンロードするために必要になります。

そしてパイプの機能のtransformを日本語として表示するように書き換えます。

transform(date: string): string {
return format(date, ‘YYYY年MMMDo H:m’, { locale: ja });
}

日付データとして受け取った2018-02-02T15:42:15.954+09:00のようなデータを2018年2月2日 15:54と表示させます。

だいぶ見やすい表示になりました。

日付のhtmlを次のパイプに変えることを忘れずに。

{{ comment.date | commentDate }}

| commentDateで表示形式にカスタムパイプを指定することでカスタムパイプ通りに表示するようなります。

次回はFirebaseを連携

今回は、モックデータを反映したところまでになります。

さて、今回はチャットアプリとして表面上は機能するところまで作成しました。

言うまでもありませんが、入力したデータはF5の更新を押してしまうと入力したデータは消えてしまいます。

それに自分一人しか使えません・・・

次回はデータベースを使い、入力データをデータベースに書き込み、読み込み、更新しても消えないようにしていきます。

やっと次回からチャットアプリとしてある程度まともに動くようになります。

一旦一休みしてから、次の作業に進むことをおすすめします。

いっぺんにできる量ではありませんから^^/