REACT事始め

はじめに

• REACT初学者である自身が、これからコードを書くにあたり、留意事項を書き留める。

Terms

用語	内容
コンポーネント	画面要素の1単位。REACTは各コンポーネントを利用し、組み合わせて、WEBページを作成する。粒度は様々であるが、再レンダリングの範囲を制限するための設計が必要になる。 Atomic Designの考え方を踏襲するのであれば、最小単位はAtoms(ボタン、テキストボックス等)になる。最終的にページ出力する場合は、親コンポーネントで、作成した各コンポーネントをImportして表示する。コンポーネント化された各要素の集合が画面を構成する。
Props	コンポーネント間で渡す引数のようなもの。親コンポーネントの関数の引数としてPropsを指定し、子コンポーネントへオブジェクトとして渡す。
State	各コンポーネントが持つ状態。以下のようにコンポーネント内で宣言する。 ・Stateの利用 const [ state対象の変数, stateを更新する関数] = useState(変数の初期値);

留意事項1：再レンダリング対応

• REACTは関数コンポーネントで動的なデータを関数経由で状態管理して画面表示を行う。
• 動的なデータは以下の条件下で、再レンダリングされる。
  • 再レンダリングとは、WEB画面への描写を行うこと。DOM変更部分を読み込み、再表示を行う。
  • 再レンダリングが多く発生することで、WEBレスポンスのパフォーマンスに影響する為、適切な大きさのコンポーネント粒度、および再レンダリング対応が必要となる。
• レンダリング発生条件

発生条件	対策
stateが更新されたコンポーネントは再レンダリングされる	useEffect機能を利用し、関心の分離を実施する。 useEffectに変数を指定することで、対象の変数のstateが更新された場合のみ、再レンダリングされるようにする。 また、第2引数を空配列にすると、最初の読み込み時に一度だけ処理される。
propsが変更されたコンポーネントは再レンダリングされる	useCallback機能を利用し、一度生成した関数は使い回す。 useMemo機能を利用し、一度生成した変数は使い回す。 再レンダリング時、コンポーネント内の関数は毎回新規で生成となる。propsで関数を子コンポーネントに渡している場合、props更新と判断されて、子コンポーネントの再レンダリング処理が実施されてしまうため。
再レンダリングされたコンポーネント配下の子要素は再レンダリングされる	子コンポーネント側で、memo機能を利用し、親コンポーネントが再レンダリングされても、子コンポーネントは再レンダリングされないようにする。故に、子コンポーネントは基本memo化するのが良い。

• コンポーネント内で動的に変わる部分はuseStateで定義。useStateは関数型コンポーネントで状態(state)を扱うためのフック。状態(State)は元々クラスコンポーネントでのみしか利用できなかったが、REACT HOOKSが登場し関数コンポーネントでも利用できるようになった背景がある。
• ページ遷移を伴わない場合、props経由でstateを子コンポーネントへ渡す。ページ遷移を伴うstate渡しは、Linkタグにstateを引数として指定し、移行先でuseLocation(react-router-dom)で受け取る。

留意事項2：コンポーネント粒度

• 1つのコンポーネントにコードを書き過ぎるのは可読性などを加味し良くない部分がある反面、コンポーネント分割しすぎると、ファイルが多くなる。また、各コンポーネントでのImport(読み込み)が多くなる。例えば、Atomic Designを踏襲した場合、コンポーネント最小単位はボタン、テキストボックス等になる。各コンポーネントから、これらを呼び出す為、親子コンポーネントとなり再レンダリング条件が発生してしまい、WEBパフォーマンスに影響がでるリスクがある。
• 再利用性・保守性の高いコンポーネント粒度が何であるか、プロジェクト開始時に決める必要がある。
• Atomic Design　https://bradfrost.com/blog/post/atomic-web-design/
  • コンポーネント化された各要素の集合が画面を構成しており、モダンなJavaScript環境でこの考えが採用されることが多い。
  • 使い回しがありそうなものは、Atoms, Molecules単位で作成しておく。テキストボックス検索等。それより上位はあまり使い回しがない。
• Atomic Designを採用したとして、例えば、AtomsコンポーネントにPropsを渡すシーンを考えた場合、その上位コンポーネント経由でPropsを渡す必要があり、バケツリレー的な渡し方になってしまう。グローバルStateとして管理するのも良いが、管理するStateが増えすぎるのも良くない。
• 子コンポーネントは基本的にMemo化する。(面倒っぽいけど)

留意事項3：利用ライブラリ

• プロジェクトを開始するにあたり、利用ライブラリを決める。
  • UIコンポーネントライブラリ　(Material UI, Chakra UI)
  • グローバルState管理 (REACT default, Recoil)

感想

• 数年ぶりに少しコードを書いてみて感じたこと。
  • codesandbox を利用して、ブラウザ経由で簡単にテストコード書けるようになっていて驚いた。
  • コンポーネント化で細分化する単位でCSSの記載が必要になり、REACTのコード書くというよりも、CSSばかり書いていた気がする。様々なCSSフレームワークがあるが、結局どれもCSSを結構な量記載する必要がある。
  • Adobe XD, Figmaでデザインされたプロトタイプがあって、その画面に近づけるためにCSSを書いては、画面チェックしての繰り返しを世の開発者は実施しているのであろうか。
  • REACTのコード書くよりも、プロトタイプと比較しながら、CSS書いてプロトタイプ画面近づけていくことに時間がかかりそう。
• コードを書き始めるまでにプロジェクトとして、どういうルールでコーディングしていくのか決めるプロセスが必要となる。