JavaScriptのnew Array(n)をmapしたいとき fillをはさむ理由

経緯 配列をオブジェクトで初期化したい場合、 new Array(3).fill({foo: "ふう", bar:"ばあ"}) というコードだと、全てのインデックスが同じオブジェクトを指してしまうので、 調べたら new Array(3).fill().map(() => ({foo: "ふう", bar:"ばあ"})) という…

「5と8を使った和で表すことができない最大の整数を求めよ」を解いてみる

小2が「5と8を使った和で表すことができない最大の整数を求めよ」という大学入試レベルの算数を教えてと聞いてきた togetter.com この問題が面白いなと思って自分なりに解いて見たので書いてみます。数学は専門ではないので厳密さに欠けることは先に記してお…

RSpecでsubjectを使用して配列を検査時、配列の長さを取得する

RSpecでsubjectを使用して、配列を subject { user.errors[:name] } # user.errors[:name] は配列 このように検査時、配列の長さを取得する方法が分からなかったので調べました。 結論 rspec-itsのitsを使用する。 its(:size) { is_expected.to eq 3 } のよ…

正規表現間違い探しクイズ その3

正規表現間違い探しクイズシリーズです。 正規表現は単体テストを書いている場合でもバグを発見しづらいものです。そのため、自身での検証が欠かせません。 今回は仕事中に見つけたものでなく、個人開発中にネットで見つけた間違いのうち印象的だったものを…

正規表現間違い探しクイズ その2

正規表現間違い探しクイズシリーズです。 正規表現は単体テストを書いている場合でもバグを発見しづらいものです。 そのためレビューの時には注意深く見るようにしています。そんな中見つけた間違いのうち印象的だったものを紹介します。 問題編 仕様 Linkモ…

正規表現間違い探しクイズ その1

正規表現間違い探しクイズシリーズです。 正規表現のバグは単体テストを書いている場合でも発見しづらいものです。 そのためレビューの時には注意深く見るようにしています。そんな中見つけた間違いのうち印象的だったものを紹介します。 問題編 仕様 ユーザ…

ソフトウェアのテストを書くのが嫌になる瞬間 第5位

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

ソフトウェアのテストを書くのが嫌になる瞬間 第4位

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

ソフトウェアのテストを書くのが嫌になる瞬間 第3位

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

ソフトウェアのテストを書くのが嫌になる瞬間 第2位

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

ソフトウェアのテストを書くのが嫌になる瞬間 第1位

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

Firebaseアプリの公開(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

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

ロゴの作成と表示(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

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

Material-UIのテーマカラーを変更する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

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

タスクの送信状態の表示(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com タスクの送信状態を表示するように変更します。タスクの各行に送信状態を表すアイコンを表示します。 チャットアプリのような相手がいて即時性が求められるアプリの場合は、サーバへの送信状況を表示した方がよいと思い…

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

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

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>…