Material-UIのDrawerを使用する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Material-UIのDrawerを使用して、タスクのフィルタを行うボタンを右側に配置します。 ファイル名とコンポーネント名の変更 タスクのフィルタ用のボタンがフッターではなくなるので、Footer.jsのファイル名を変更します。…

Material-UIのAvatarを使用する(ログイン・タスク一覧編)(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 前回に引き続き、ログイン名の横とタスク一覧に表示されるユーザ名の横にAvatarを追加します。 ログイン名の横にAvatarを表示する ログイン時、AppbarにAvatarを表示します。今後の実装のために、ユーザ名とavatarUrlをs…

Material-UIのAvatarを使用する(最近の更新編)(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Material-UIを使用して最近の更新にユーザアイコンを表示します。 "最近の更新”にAvatarを表示する Cloud Functionsの変更 "最近の更新”にユーザアイコン(Avatar)を表示します。 先に、Cloud Functionsを変更して、/rece…

Material-UIのMenuを使用する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com ログアウトのボタンの常時表示をやめ、ユーザ名がクリックされた時にログアウトメニューが出るように変更します。Material-UIのMenuを使用します。 Loginコンポーネントの内部stateにanchor(アンカー:ここではメニューの…

Material-UIのAppBarを使用する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Appbarはいわゆるwebページのヘッダーで、ロゴやメニューなどを表示するのに使用します。 今回はログイン機能とナビゲーション機能をAppbarに載せます。ディレクトリ階層の変更とファイル名の変更も行います。 変更前と…

withStylesによるスタイルの適用(タスク一覧編)(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com タスク一覧にスタイルを適用する 前回と同様にタスク一覧にもスタイルを適用します。Paperの周りにマージンを設定し、Paperの中に余白を設定します。 src/components/todos/index.js import { compose } from 'redux' //…

withStylesによるスタイルの適用(最近の更新編)(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Material-UIにおいて個別にスタイルを適用するには、stylesオブジェクト(またはstyles関数)とwithStyleを使用します。 前回適用したPaperの周りにマージンと中に余白(padding)を設定します。 ダッシュボードにスタイルを…

Material-UIのPaperを使用する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Material-UIのPaperを使用し、コンテンツが紙の上に載っているようなUIにします。 最新の更新一覧とタスク一覧をPaperの上に載せます。 最新の更新一覧でPaperを使う 最新の更新をPaperで囲みます。<div>を<Paper>に変更します。 src</paper></div>…

Material-UIのTypographyを使用する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Material-UIのコンポーネントで囲まれていない文字列をTypographyで囲っていきます。 なお、一部はこの後のページでMaterial-UIのコンポーネントに変換するので、変換しない文字列もあります。 NoMatchページ 始めにNoMa…

Material-UIのCircularProgressを使用する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com データの読み込み中、"読み込み中"という文言での表示から、CircularProgressへ変更します。CircularProgressは読み込み中を示すぐるぐるです。 "最近の更新"の読み込み表示の変更 src/components/dashboard/recentUpdat…

Material-UIのListを使用する(タスク一覧編)(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 前回に引き続き、<ul>を<List>に、<li>を<ListItem>に変更します。 今回はタスク一覧です。 タスク一覧でMaterial-UIのListを使用する <ul>を<List>に変更します。また、後で必要になるので、isOwnTodosをpropsとしてTodoコンポーネントに渡します。 src/co</list></ul></listitem></li></list></ul>…

Material-UIのListを使用する(最近の更新編)(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Material-UIのListを導入します。 <ul>を<List>に、<li>を<ListItem>に変更します。 最近の更新リストでMaterial-UIのListを使用する <ul>を<List>に変更します。 src/components/dashboard/recentUpdatedTodos/index.js import List from '@material-ui/co</list></ul></listitem></li></list></ul>…

Material-UIのTextFieldを使用する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 続いて、<input>を<TextField>に変更します。 inputのref <input>でref属性を使用している場合は、<TextField>に変更する際にいくつか注意点があります。 ref属性をinputRef属性に変更する <input>への参照を保存する変数はクラス変数にする 上記の変更も同時に行う</textfield></textfield>…

Material-UIのButtonを使用する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 既存のコンポーネントをReactのコンポーネントに置き換えていきます。 まずは<button>を<Button>に置き換えます。 なお、一部ボタンはこの後のページでMaterial-UIのコンポーネントに変換するので、変換しないものもあります。 Material-</button></button>…

Material-UIのパッケージのインストールと設定(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Material-UIを使用するのに必要なパッケージのインストールと設定を行います。 パッケージのインストール Installation - Material-UI を参考に進めていきます。 @material-ui/coreのインストール Material-UIの中心とな…

STEP 4での成果物(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com STEP 4ではMaterial-UIを導入し、アプリの見た目を整えます。 material-ui.com Material-UIとは Material-UIとは、Googleが提唱するマテリアルデザインを実装しているReactコンポーネント群です。ボタンやフォームの見た…

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にデータを追加します。 表示したいデータ “最近の更新”は、以下のようになります。ユーザ名をクリックすると、ユーザのタスク一覧へ…