React + Redux + Firebase チュートリアル : タスク管理アプリを作る【目次】

React + Redux + Firebase + Material-UI で、タスク管理アプリを作ります。Reduxの公式ページに載っているサンプルを元に、react-reduxで作られたアプリにfirebaseとMaterial-UIを導入します。

f:id:yucatio:20181201144558p:plain

目次

準備

  1. React + Redux + Firebase でアプリを作るための前提知識と勉強の仕方

STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る

FirebaseをReact+ReduxのExampleアプリに統合します。まずはタスクデータをFirebase Realtime databaseに保存し、誰でも書き込めて読み込めるようにします。

  1. STEP 1での成果物
  2. React + Reduxプロジェクトの準備
  3. Firebaseプロジェクトの作成
  4. firebase-toolsのインストールとfirebase init
  5. Realtime Databaseへのデータの事前登録
  6. firebaseとreact-redux-firebaseモジュールのインストールと設定
  7. Firebaseからタスクを読み込む部分の作成
  8. getVisibleTodosの更新
  9. redux-thunkの導入とタスク追加処理の修正
  10. Firebaseへのデータ送信前後でメッセージを表示する
  11. タスク完了フラグの切り替え処理の修正
  12. リファクタリング : actionsの分割
  13. Firebaseアプリの公開

STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する

Firabaseのauthenticationを導入して、ユーザごとにタスクを出し分けます。ユーザは自分のタスクだけが見れて、自分のタスクだけに書き込むことができます。

  1. STEP 2での成果物
  2. Firebaseのログイン機能の有効化
  3. 事前準備 : コンポーネント階層の変更
  4. Firebaseを利用した認証機能の作成(1) actionとreducer
  5. Firebaseを利用した認証機能の作成(2) view
  6. タスクの読み込みパスの変更
  7. タスクの書き込みパスの変更
  8. データベースルールファイル(database.rules.json)の変更と反映
  9. Firebaseアプリの公開

STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する

Cloud Functions for Firebaseを使用して、新着/更新があったタスクを表示します。タスクを選択すると、タスクを作成/更新したのユーザのタスク一覧が開きます。 タスク一覧の画面は、react-routerを使ってユーザごとに一意のパスにします。

  1. STEP 3での成果物
  2. データベースルールファイル(database.rules.json)の変更と反映
  3. react-router-domのインストールと設定
  4. ナビゲーションリンクの作成
  5. パスで指定されたユーザIDでタスクを読み込む
  6. ログインしたユーザ自身のタスク以外は変更できないように修正する
  7. react-router v4使用時、ページ遷移時にactionをdispatchする
  8. react-redux-firebase使用時、ログアウト時にデータが消えないようにする
  9. Cloud Functions for Firebaseの導入とfirebase init functionsの実行
  10. Cloud Functions用の最初のコードの記述とデプロイ
  11. Cloud Functionsを使用して、タスク作成時に"最近の更新"へデータを追加する
  12. Cloud Functionsを使用して、タスク更新時に"最近の更新"へデータを追加する
  13. Cloud Functionsを使用して、"最近の更新"の件数を制限する
  14. "最近の更新"を表示する
  15. リファクタリング : componentsとcontainersの階層化
  16. リファクタリング: 作成日時と更新日付の追加
  17. Firebaseアプリの公開

STEP 4 : Material-UIの導入

Material-UIを導入して、見た目を整えます。

  1. STEP 4での成果物
  2. Material-UIのパッケージのインストールと設定
  3. Material-UIのButtonを使用する
  4. Material-UIのTextFieldを使用する
  5. Material-UIのListを使用する(最近の更新編)
  6. Material-UIのListを使用する(タスク一覧編)
  7. Material-UIのCircularProgressを使用する
  8. Material-UIのTypographyを使用する
  9. Material-UIのPaperを使用する
  10. withStylesによるスタイルの適用(最近の更新編)
  11. withStylesによるスタイルの適用(タスク一覧編)
  12. Material-UIのAppBarを使用する
  13. Material-UIのMenuを使用する
  14. Material-UIのAvatarを使用する(最近の更新編)
  15. Material-UIのAvatarを使用する(ログイン・タスク一覧編)
  16. Material-UIのDrawerを使用する
  17. Material-UIのSnackbarを使用する
  18. タスクの送信状態の表示
  19. Material-UIのテーマカラーを変更する
  20. ロゴの作成と表示
  21. Firebaseアプリの公開

ソースコード

ソースはgithubで公開しています(急いで作ったのでブランチが汚いです。。)。各STEPでの成果物のリンクを貼っておきます。

STEP URL
STEP 1 https://github.com/yucatio/todo-sample/tree/3a1be7218d7b74184a046a436535f42b44d253ba
STEP 2 https://github.com/yucatio/todo-sample/tree/cfdc1e01fe0c29b72e55eda210b1c81083b1fb07
STEP 3 https://github.com/yucatio/todo-sample/tree/b99cb21972a9972b6d02e5c7110f846fb8e4c54e
STEP 4 作成中

環境

  • OS : Mac Sierra 10.12.6
  • npm: 6.2.0
  • yarn: 1.9.4
  • create-react-app: 2.0.4
  • firebase-tools: 4.2.1

依存ライブラリ

package.jsonより抜粋

"@material-ui/core": "^3.4.0",
"@material-ui/icons": "^3.0.1",
"firebase": "^5.5.0",
"moment": "^2.22.2",
"react": "^16.5.0",
"react-dom": "^16.5.0",
"react-redux": "^5.0.7",
"react-redux-firebase": "^2.1.8",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.5",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"

参考

多くのサイトを参考にさせていただいていますが、今回のチュートリアルはこの講義に多大な影響を受けています。