パスで指定されたユーザIDでタスクを読み込む (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

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

react-routerを使用したナビゲーションリンクの作成 (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Navbarを実装して、ナビゲーションリンクを作成します。 ルートパス(Home)へのリンクと、ログインしている場合は、自身のタスク一覧へのリンクを表示します。 リンクは、通常はLinkコンポーネントを使用しますが、ナビゲ…

JavaScriptで「○分前」「○時間前」「○日前」など現在時刻からのざっくりした時間経過を表示したい場合は、Moment.jsのfromNowを使う

やりたいこと Twitterのように、投稿日付を表示したい。「○分前」「○時間前」「○日前」など、現在時刻からの経過時間をざっくり表示したい。 moment.jsのfromNowでできる moment.jsのfromNowを使えば実現できます。 Time from now デフォルトの設定では以下…

react-router-domのインストールと設定 (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com ルーティングとreact-router-domとredux統合 アプリににルーティング機能を追加します。 reactにおけるルーティングと、なぜルーティングが必要なのかはこちらがわかりやすいです。 React Router v4 の基本的な考え方と…

データベースルールファイル(database.rules.json)の変更と反映 (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com データベースルールファイルを変更します。 todosのルール STEP 3では他のユーザのタスクは見れるので、そのように変更します。 database.rules.json { "rules": { "todos" : { "$uid": { ".read": true, // 変更 // 後…

STEP 3での成果物 (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

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

Firebaseアプリの公開 (STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com アプリが完成したので、Firebaseにアプリを公開します。 ビルドします。 $ yarn run build 一旦ローカルで正常に動くか確認しましょう。 $ firebase serve http://localhost:5000にアクセスして、動作確認しましょう。 …

データベースルールファイル(database.rules.json)の変更と反映 (STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com データベースルールファイル(database.rules.json)を変更します。 todosのルール STEP 2で作成したアプリでは、ユーザは自分のタスクのみ見れて、自分のタスクにのみ書き込めるので、ルールをそのように変更します。 dat…

タスクの書き込みパスの変更 (STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

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

タスクの読み込みパスの変更 (STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

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

Firebaseを利用した認証機能の作成(2) view (STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

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

Firebaseを利用した認証機能の作成(1) actionとreducer (STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

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

事前準備 : コンポーネント階層の変更 (STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 認証機能作成の前に、認証用のコンポーネントの作成とタスク関連のコンポーネントに分けます。 現在のコンポーネントツリー 新しいコンポーネントツリー(緑色が新規コンポーネント) コードを変更します。 src/components…

Firebaseのログイン機能の有効化 (STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Firebaseを使用したログイン機能 FirebaseではGoogle、Facebook、twitterなどと連携したログイン機能を提供しています。各機能を有効化するために、コンソールで操作します。 ログイン機能の有効化 1. Firebase Console…

STEP 2での成果物 (STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com STEP 2では、ユーザごとのタスクを管理できるアプリを作成します。 ログインボタンを設置し、ログイン後にタスクの閲覧、更新を可能にします。 ログイン時↓ 未ログイン時↓ 簡単のため、今回はGoogleアカウントでの認証の…

Firebaseアプリの公開 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com アプリが完成したので、Firebaseにアプリを公開します。 ビルドします。 $ yarn run build 一旦ローカルで正常に動くか確認しましょう。 $ firebase serve http://localhost:5000にアクセスして、動作確認しましょう。 …

リファクタリング : actionsの分割 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com actionsの変更 actions/index.jsのサイズが大きくなってきたので、分割します。また、下記の点もリファクタリングします。 action typeを定数で定義する 個々のactionを定義する index.jsにaction typeをまとめます。 sr…

タスク完了フラグの切り替え処理の修正 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

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

Firebaseへのデータ送信前後でメッセージを表示する (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

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

redux-thunkの導入とタスク追加処理の修正 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

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

getVisibleTodosの更新 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com getVisibleTodosを更新します。 todosが配列からオブジェクトになったため、filterを直接todosに対して使うことができません。代わりにキーの配列を作成した後、completedの状態でfilterし、reduceを使って空のオブジェ…

Firebaseからタスクを読み込む部分の作成 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

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

firebase, react-redux-firebaseモジュールのインストールと設定 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com モジュールのインストール 開発を始めるにあたり、firebaseのモジュールをインストールします。 $ yarn add firebase 次に、React + Redux + Firebaseでの開発を簡単に行うために、react-redux-firebase モジュールをイ…

Firebaseを使ったwebアプリで、apiKeyなどの接続に必要な設定をWeb Consoleで確認する手順

FirebaseをReactと共に使う時に、firebaseの設定をファイルに書く必要があるのですが、どこに書かれているかすぐにわからなくなるので、スクリーンショット付きで手順を示します。 1. Firebase console (https://console.firebase.google.com/)のProject Ov…

Realtime Databaseへのデータの事前登録 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 今回のチュートリアルでは読み込み部分を先に作るため、先にデータベースにデータを登録します。 データファイルの準備 テキストエディタを開いて、以下の内容を記載します。ファイル名は、initial_todo.jsonにします。 …

firebase-toolsのインストールとfirebase init (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

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

Firebaseプロジェクトの作成 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Firebaseでアプリを開発するのには、まずプロジェクトをFirebase consoleで作成する必要があります。プロジェクトの作成の手順を示します。 1. Firebase Console (https://console.firebase.google.com/)を開きます。 …

React + Reduxプロジェクトの準備 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 今回のチュートリアルでは、Reduxの公式ページのサンプルコードを使用するので、準備をします。 React + Reduxプロジェクトの作成 React + Reduxのプロジェクトの作成をします。 create-react-appを使用してReactアプリ…

STEP 1での成果物 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

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

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

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