ソフトウェアのテストを書くのが嫌になる瞬間、今回は第5位です。 以下、単に”テスト”と書いた場合は、テストコードのことを指し、CIツールなどで自動実行されるものを指します。また、単に"コード"と書いた場合には、プロダクションコードを指します。 また…

ソフトウェアのテストを書くのが嫌になる瞬間、今回は第4位です。 テストを書くのが嫌になる瞬間 第4位 : テストの文脈を見ないで落ちたテストのみ修正しているのをみたとき 今回は10コマ漫画でお送りします。 なお、以下単に”テスト”と書いた場合は、テスト…

ソフトウェアのテストを書くのが嫌になる瞬間、今回は第3位です。 テストを書くのが嫌になる瞬間 第3位 : コードもテストも間違っているのをみたとき 今回は7コマ漫画2本でお送りします。 なお、以下単に”テスト”と書いた場合は、テストコードのことを指し、…

前回に引き続き今回は第2位です。前回の記事はこちら↓ yucatio.hatenablog.com テストを書くのが嫌になる瞬間 第2位 : 開発中に仕様が変わったとき 今回も11コマ漫画でお送りします。 なお、以下単に”テスト”と書いた場合は、テストコードのことを指し、CIツ…

昔々、上級エンジニアのNさんは私に言いました。yucatioさん、テストはちゃんと書きましょう、と。 時は流れ、チームにテストを書く習慣ができました。めでたしめでたし。テストを書けば変更の影響がすぐに分かるので安全にリファクタリングができます。 で…

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

★前回の記事 yucatio.hatenablog.com 仕上げにロゴを作成して表示してみましょう。ロゴを、自動でかつ無料で作成してくれる便利なサイトがたくさんあります！ peraichi.com 今回はLOGASTERというサービスを使用します。 www.777logos.com ロゴ作成の前にサー…

★前回の記事 yucatio.hatenablog.com 現在はデフォルトのテーマカラーを使用していますが、これを自分の好きな色に変えます。 今回はマテリアルデザインのカラーツールを使用します。 primaryとsecondaryの色を選択します。選択すると左側の画面にすぐに反映…

★前回の記事 yucatio.hatenablog.com タスクの送信状態を表示するように変更します。タスクの各行に送信状態を表すアイコンを表示します。 今回のタスク管理アプリの場合、送信状態を表示することは必須ではありませんが、 チャットアプリのような相手がいて…

★前回の記事 yucatio.hatenablog.com Material-UIのSnackbarを使用して、メッセージを表示します。Snackbarは、画面の端から出てきて1行程度のお知らせを表示するエリアのことです。 未ログイン時の更新エラー(NOT_AUTHENTICATED_ON_TODO_ACTION)と通信エラ…

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

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

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

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

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

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

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

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

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

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

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

★前回の記事 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>…

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

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

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

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