はじめに
今、最も注目されているJavaScriptフレームワークの1つであるAngular(9.xx)と、同様に注目度の高いBaaS(Backend as a service)であるFirebaseを使って、チャット用WEBアプリをハンズオン形式で書いていきます。
「Angular+Firebase」のリアルタイム更新に興味がある方はご一読ください。
(追記:2017/6)本記事は元々「Angular2+Rails5でチャットアプリを作る」と題していましたが、ここ半年ほどひたすら「Angular+Firebase」を触ってきたので、「Angular+Firebaseでチャットアプリを作る」として、現時点(2017年6月)での最新の内容に書き換えています。
(追記:2018/1)現時点(2018年1月)での最新の内容に書き換えています。
(追記:2018/9)現時点(2018年9月)での最新の内容に書き換えています。
(追記:2020/6)現時点(2020年6月)での最新の内容に書き換えています。
(追記:2020/8)最後の記事を投稿しました。本連載は以上で終了です。
対象読者
- nodeについてある程度知識がある
- Angularに興味がある
- Firebaseに興味がある
- サクサク動くチャットアプリを作りたい
開発環境
Mac OSX: v10.15.5
Node: v12.18.0
np@m: v6.14.5
@angular/cli: v9.1.8
firebase-tools: v8.4.3
プロジェクトで使用するライブラリ
Angiular: v9.1.11
firebase: v7.15.3
Bootstrap: v4.4.0
Moment.js: v2.26.0
ngrx: v9.2.0
レポジトリ
(2018/9時点)https://github.com/Yamamoto0525/NgChat_bk2
(2017/6時点)https://github.com/Yamamoto0525/NgChat_bk
作成するアプリの仕様
- マルチデバイス対応
- 自分と第三者とでチャットを行う
- 入力には認証が必要
- チャット内容をリアルタイム(更新などを行わず)に、他の端末に反映
- ユーザーはコメントの作成、読み込み、更新、削除(CRUD)ができる
トピック
チャットの入力画面を作成
- Angularの環境構築(Angular CLIで構築)
- Angularでビュー(チャット画面)を作る
- AngularのngForでチャットコメントを実装する
- AngularのngIfとsubmitイベントでチャットコメントを実装する
- AngularのPipeを使って、日付を変換する
Firebaseの導入
- Firebaseの環境構築
- AngularのプロジェクトにFirebaseを導入する
- Angular+Cloud FirestoreでCRUD(CREATE, READ, UPDATE, DELETE)を実装する
Angularの階層構造構築
Angular+Firebaseの認証設定
Angularのngrxを使って状態管理を行う
- Angularのngrxを使って状態管理を行う(理論編)
- Angularのngrxを使って状態管理を行う(実装編:初期設定~エフェクト設定)
- Angularのngrxを使って状態管理を行う(実装編:エンティティ設定)