Material-UIのボタンで英小文字を小文字のまま出力する

Materil-UIの<Button>はデフォルトではアルファベットが全て大文字になります。 例: import Button from '@material-ui/core/Button' // 略 <Button color="secondary" variant="contained"> Webで続きを読む </Button> これを小文字を小文字のまま出力するには、textTransform: 'none'を指定します。 import Button from '@m</button>…

Material-UIのアイコンの色の変え方

Material-UI公式ページにSVGアイコンの色の変え方が載っています。 material-ui.com color属性 テーマカラーの色を使用する場合には、color属性を使用します。 ’inherit' 'primary' 'secondary' 'action' 'error' 'disabled’ のうち1つを指定することで色を…

Material-UIでprimaryとsecondaryの色を変更する

Material-UIのprimaryとsecondaryの色の変え方がわからなかったのでメモ。 デフォルトの色 デフォルトでは、primaryはindigo, secondaryはpinkです。 primaryとsecondaryの色を変更する primaryとsecondaryの色を自分の好きな色に変えていきます。 1. 色を…

ReactでinputRef使用時、参照を保持する変数がundefinedになった原因と対処法

ReactでinputRef使用時、参照を保持する変数がundefinedになり、エラーが発生しました。その原因と対処法を紹介します。 先に結論 参照を保持する変数は、ローカル変数でなく、インスタンス変数にします。インスタンス変数はReact.Componentを拡張したクラス…

Material-UIのTextFieldでrefを使う

TextFieldでrefを使う Material-UI導入時、inputをTextFieldに置き換える時に、多くの属性は<input>を<TextField>に置き換えた際そのままでよいのですが、refはそのままにすると動きません。refをinputRefに変更する必要があります。 変更前 const AddTodo = ({dispatch}) => {</textfield>…

react-redux-firebaseで、pushの自動生成key(ID)を事前に取得

firebaseでpushのkeyを事前取得 firebaseの公式サイトには、key(ID)の取得は以下のように書いてあります。 // Get a key for a new Post. var newPostKey = firebase.database().ref().child('posts').push().key; react-redux-firebaseでも同様に、 const f…

Material-UIのwithStyleとreacrt-reduxのconnectを同時に使う

Material-UIのwithStyleとreacrt-reduxのconnect react-reduxを利用しているアプリにMaterial-UIのstylesを組み込む、もしくはその逆を行うときに、どのようにすれば分からなかったので書いておきます。 connectを使用したコンポーネント↓ import React from…

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

★前回の記事 yucatio.hatenablog.com アプリが完成したので、Firebaseにアプリを公開します。 ビルドします。 $ yarn run build 一旦ローカルで正常に動くか確認しましょう。--only hostingオプションで、hostingのみ動作するようにします。(functionはserve…

リファクタリング: 作成日時と更新日付の追加 (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

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

リファクタリング : componentsとcontainersの階層化 (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com componentのファイルが多くなり、管理しづらくなってきたので、画面パーツごとにディレクトリを分けます。 現在のディレクトリ構成と変更後のディレクトリ構成です。 階層の移動と構成 以下に、src/components以下のファ…

"最近の更新"を表示する (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

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

Cloud Functions for Firebaseを使用して、"最近の更新"の件数を制限する (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 前回までで、/recentUpdatedTodosへのデータの追加を行うことはできましたが、これではどんどんデータが溜まって行ってしまうので、個数を制限します。制限を超えたら古いデータを削除します。 firebaseのサンプル(limit…

Cloud Functions for Firebaseを使用して、タスク更新時に"最近の更新"へデータを追加する (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 引き続き、addRecentUpdateOnUpdateCompletedを実装します。タスクが更新された時に、/recentUpdatedTodosにデータを追加します。 タスク更新時に"最近の更新"へデータを追加する addRecentUpdateOnUpdateCompletedの処…

Cloud Functions for Firebaseを使用して、タスク作成時に"最近の更新"へデータを追加する (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com addRecentUpdateOnCreateを実装します。タスクが作成された時に、/recentUpdatedTodosにデータを追加します。 表示したいデータ “最近の更新”は、以下のようになります。ユーザ名をクリックすると、ユーザのタスク一覧へ…

Cloud Functions for Firebase用の最初のコードの記述とデプロイ (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Cloud Functions for Firebaseで最初に小さいコードを書いて動作確認をします。 手始めに、DBの/todos/{uid}の下にタスクが追加された時と、タスクが更新された時にコンソールへメッセージを表示します。 トリガの動作確…

Cloud Functions for Firebaseの導入とfirebase init functionsの実行 (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com アプリにCloud Functions for Firebaseを導入します。 Cloud Functions for Firebaseでできること Cloud Functions for Firebaseでは、ユーザがログインしたり、データベースに書き込まれた際に関数を実行できます。関数…

react-redux-firebase使用時、ログアウト時にデータが消えないようにする (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

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

react-router v4使用時、ページ遷移時にactionをdispatchする (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 前回までで他のユーザのタスクは閲覧できて、自身のタスクは閲覧・編集できるようになりました。しかし、まだバグが2つ残っているので、そのうち1つを修正します。 バグ再現手順 ログインします ログインユーザ以外のタ…

ログインしたユーザ自身のタスク以外は変更できないように修正する (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

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

パスで指定されたユーザ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…