★前回の記事 yucatio.hatenablog.com Firebase Realtime Databaseでは、データの作成日時・更新日時は自動で付与されないので、クライアント側(javascript)で付与します。これに伴い、Cloud FunctionsもDatabaseの更新日時を使用するように変更します。デー…

★前回の記事 yucatio.hatenablog.com /recentUpdatedTodosをDashboardに表示します。Dashboardの下にRecentUpdatedTodosコンポーネントを新規作成します。 moment.jsモジュールのインストール 各タスクの更新時間を表示は、「○分前」「○時間前」など、現在か…

★前回の記事 yucatio.hatenablog.com 他のユーザのタスクは閲覧できて、自身のタスクは閲覧・編集できるようになったアプリに発生した2つのバグのうち、もう1つのバグを修正します。 バグ再現手順 ログインします 自身のタスク一覧が表示されることを確認し…

★前回の記事 yucatio.hatenablog.com ログインしたユーザ自身のタスク以外は変更できないように修正します。 ログインしたユーザのタスク一覧以外を表示している時は、以下のようにします。 タスク追加フォーム(AddTodoコンポーネント)を非表示にする タスク…

★前回の記事 yucatio.hatenablog.com 読み込むuidの変更 現在の実装では、ログインしたユーザのタスク一覧が表示されています。これを、パスで指定されたユーザのタスクを読み込むように変更します。 src/App.jsで、タスク一覧のURLは、/users/:uid/todosと…

★前回の記事 yucatio.hatenablog.com STEP 3では、Cloud Functions for Firebaseを使用して、タスクの作成/更新があった時に、"最近の更新”に登録します。 ユーザは"最近の更新"から各ユーザのタスク一覧へジャンプすることができます。 タスク一覧のURLは、…

★前回の記事 yucatio.hatenablog.com タスクの書き込みパスを変更します。 todo actionの変更 書き込みパスを、todos/からtodos/${uid}に変更します。念のため、uidが定義されていない時はエラーを出すようにします。 src/actions/index.js export const NOT…

★前回の記事 yucatio.hatenablog.com データのパスの変更 ユーザごとにデータを保存するように変更します。 今までのパスは、/todoの下に各タスクを保存していましたが、STEP 2 では /todos/${uid}のように、各ユーザIDの下にタスクを保存するように変更しま…

★前回の記事 yucatio.hatenablog.com Viewの実装 ログイン機能のviewを作成します。未ログイン時にはGoogleアカウントでログインボタンを表示し、ログイン時には名前とログアウトボタンを表示します。 src/components/Login.js import React from 'react' im…

★前回の記事 yucatio.hatenablog.com 認証機能を実装します。react-redux-firebaseのAPIを利用します。 ユーザ情報の保存先の設定 始めにindex.jsのcreateStoreWithFirebaseを変更します。 src/index.js const createStoreWithFirebase = compose( applyMidd…

★前回の記事 yucatio.hatenablog.com タスクの完了フラグの切り替え(toggleTodo)をFirebaseと連携します。 toggleTodoの変更 actionsのtoggleTodoを変更します。 src/actions/index.js export const toggleTodo = id => { return (dispatch, getState, {getF…

★前回の記事 yucatio.hatenablog.com 前回の記事で、Firebaseへの通信を行う前にADD_TODO_REQUEST、通信完了時にADD_TODO_SUCCESS、エラー発生時にADD_TODO_ERROR actionをそれぞれdispatchしました。今回はそれぞれに対するreducerと画面表示を実装します。…

★前回の記事 yucatio.hatenablog.com state更新のタイミング Firebaseへの更新の際に、以下の3つのタイミングでstateを更新したいと思います。 Firebaseへの投稿直前 Firebaseへの通信が成功した時 Firebaseへの通信が失敗した時 Reduxでは、通常1回のdispat…

★前回の記事 yucatio.hatenablog.com データの読み込み部分を、ローカルからFirebase Realtime Database(以下、Firebase)に変更します。 読み込み部分の作成 データ読み込みのコードはcontainerに記載します。タスク一覧(todos)をFirebaseから取得します。 s…

★前回の記事 yucatio.hatenablog.com firebase-toolsのインストールとfirebase initを実行して、プロジェクトにFirebaseの設定ファイルを追加します。 firebase-toolsのインストールとログイン まず、firebase-tools (firebaseのコマンドラインツール)をイン…

★前回の記事 yucatio.hatenablog.com STEP 1ではFirebaseをReact+Reduxのアプリに統合していきます。Reduxの公式ページに記載されているタスク管理アプリを使用します。 Firebaseからタスク一覧を読み込んだり、Firabaseへタスクを追加したり、タスクの完了…

React + Redux + Firebaseで開発を始めました。まだまだ勉強中のところもありますが、自身の力でアプリを作成できるようになってきたので、ここまでどのように学んできたか書いておきます。主に他言語の経験者でwebの経験があると参考になると思います。 習…

React + Redux + Firebase + Material-UI で、タスク管理アプリを作ります。Reduxの公式ページに載っているサンプルを元に、react-reduxで作られたアプリにfirebaseとMaterial-UIを導入します。 目次 準備 STEP 1 : 誰でも読み込み・書き込みできるタスク管…