エンジニアが終末に備えて技術を磨く日記の8～11日目。
1日目はこちら。
「エンジニアが終末に備えて技術を磨く日記」カテゴリはこちら。
8日目（8/9）
引き続き『TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発』を読み進めた。
7日目でTSとReactの基本は分かったので、今日はReact Hooksを触ってみた。
今日触ったのはuseStateとuseReducer。
これらのHooksを使うと変数と更新関数が返され、更新関数経由で変数を更新すると、変数が含まれるコンポーネントが再描画されるらしい。
コード中で変数が書き換わるたびに画面が最新状態に更新されるという便利な機能だった。
一番基本的で、一番多様するHooksだろうなという認識。
9日目（8/10）
今日はReactのmemo関数を触ってみた。
memo関数は、書籍中でuseCallbackとuseMemoという2つのHooksと一緒に紹介されていた。
コンポーネントは「propsやContextが更新された場合」と「親コンポーネントが再描画された場合」に再描画されるが、memo関数を使って生成したコンポーネントは、親コンポーネントが再描画されても再描画されないらしい。
propsにコールバック関数が含まれる場合にはmemo関数だけでは対応できなくて、useCallbackやuseMemoを使う必要があるらしいけど、いまのところ使う未来が見えないので読み飛ばした。
memo関数だけで多くの場合には対応できそうだし、useCallbackとuseMemoは必要を感じたときにまた勉強しよう。
10日目（8/11）
引き続きHooksを触ってみる。
今日はuseEffect、useLayoutEffect、useContext、useRefを触ってみた。
コンポーネント内に書いた処理はコンポーネントが再描画されるときに毎回実行されるけど、毎回は実行したくない処理を定義するのにuseEffectを使うらしい。
useEffectでラップした処理は、「コンポーネントの初期描画時」または「指定した変数の値が変更された時」のいずれかに実行タイミングを指定できる。
useEffectの処理はコンポーネントの描画後に実行されるけど、これをコンポーネントの描画前に行いたい場合にはuseLayoutEffectを使う。
useContextは名前の通り、コンポーネントの処理内部でコンテキストを使うHooks。
useRefは「コンポーネントの再描画時に初期化し直されない変数」を作ったり、コンポーネントの処理内からDOMを参照するのに使う。
「コンポーネントの再描画時に初期化し直されない変数」の作成はuseStateでも同じことをできるけど、useRefで作成した変数を更新しても、コンポーネントは再描画されないという違いがあるらしい。
書籍には、他にもuseImprerativeHandle、useDebugValue、カスタムフックが紹介されていたが、使う未来が見えないので読み飛ばした。また必要になったら勉強する。
11日目（8/12）
React Hooksを一通り理解できたので、次はNext。Next is Nextです。
Nextについて、本に書かれている事は一通り読んで理解した。
ページ数でいうとkindle版272ページまで理解完了。
NextはReactを便利に使うためのフレームワークという認識だったけど、本を読んでみると、NextはReactを便利に使うためのフレームワークであることが分かった。
Next 13からApp Routerという新しいルーティング方法が導入されたらしく、そこの紹介が本では欠けていたので、別途自分で調べた。
上の記事が簡潔で分かりやすかったのでオススメです。
なんとなく敷居が高そうな雰囲気を感じていたReactも、いざ勉強し始めてみると10日強で基礎は理解できるもんですね。
特に技術関連では、いざ触ってみると思ったより簡単だったという事がよくある。
このままモリモリ力をつけて最強エンジニアになるど！！！