フロントエンド関連（主にReact）
aaaToDoリストを作る
参考：モダンJavaScriptの基本から始める React実践の教科書
aaa追加と削除と上下移動の機能は追加した。以下は次にやりたいこと。
- 完了済みの場合には取り消し線を入れる
- 期日を記入できるようにする。空欄の場合はそのまま（undefined）
- （上記実装後）追加後に期日を変更できるようにする。
- 作成した記録を保存する仕組みを考える（キャッシュ？）
- input入力後でEnterでToDo追加
- 長いToDoを入れた時にはみ出さないようにする（Table使う？）
aaaToDo ステート管理について整理する。reduxで書かれたコードの理解をする。
aaaこれをやる。
aaa調べれば出てくる内容が書かれていたという印象。まだ実際に手を動かすということはしていない。
Actionをdispatchしないとstateの変更ができないというのは定番のはなしであった（直接書き換えは不可）。View, Action, Stateで一方通行で情報をやり取りして更新するということがわかっていれば当たり前である。そもそもStateの管理を一元管理するという発想があってのReduxだと思っているので、どこでも好き勝手に書き換えるよりはActionをdispatchで書き換えができるとするのが自然な考えなのかもしれない。これももう少し手を動かさないと深い理解につながらない。
また、何かを学ぶ時に図にしてあると理解が捗る。思い返せば数学や物理などのいわゆる理数系の科目において理解するのに文字だけよりも図などを用いるのは有用であった。
aaa基本的なことではあるけど、「コンポーネントで保持するStateとReduxで保持するStateは別物」ということを認識しないと、Reduxは理解できないのではないか。最初は自分自身がその点を理解できていなかったし、そのような人は一定数いそう。
一つのコンポーネントの中でのみ管理するStateをローカルなState、Reduxで管理するStateをグローバルなStateであり、コンポーネントのPropsはグローバルなStateから渡される値か、親のコンポーネントから渡される値である。
aaaDOMと仮想DOMについて
仮想DOMの方が比較が早いというのの仕組みが不明瞭。勝手な想像なので、違うかもしれないが、仕組みとしてはDOMをハッシュ化してそれを比較しているのではと思っている。DOMのハッシュ値が同じ場所はそのままで違う箇所はさらに先を探索をしていくというイメージ。後で調べる。
aaaこれあたりに書いてありそう。時間がある時に見てみたいと思う。
aaaReactハンズオンラーニングの記録。
aaa1章と2章を読んだ。JavaScriptの基本的な内容の復習であった。3章は途中まで読んだが、集中して読めていないかつ理解が浅い感覚があるので、再度頭から読み直すことにする。
感覚としては以下の本とにている構成な気がする。両方やる意味があるかと問われると疑問であるが、ある程度Reactを使っている人であれば『Reactハンズオンラーニング』をやるのが良さそうであり、Reactについてほぼわからないという人は『モダンJavaScriptの基本から始める React実践の教科書』を最初にやった方が良さそう（ただしとっつきやすさという観点であり、『Reactハンズオンラーニング』は詳細まで読めていないので明言は現時点ではできないが）。
aaa5章まで読んだ。実際に手を動かしている訳ではないので、真に理解したかと問われると自信を持って答えることはできないが、かなり基本的で重要な考え方がまとまっている良書という感覚である。ただし、ある程度普段の業務でコードを書いているからこそ読みつつ何をしたいのか理解ができるのであって、これをコードを書いたことがない人が読むと理解が浅い表面的なものとなりそう。その意味でもある程度の復習としてやり始めることが大切な気がする。
aaa最後まで読んだ。サーバーサイドレンダリングの話は今の環境において関係が薄いため、あまり理解が深まらなかった。再度必要な時に読むことにする。
この本を通じてある程度JSやReactを知っている人が最新のモダンな書き方を知るというのには適している気がする。一方でやはり初学者に対しては難しいかもしれないとも思った。