はじめに
- 学習方針
私は本業とは別の時間でプログラミングの勉強をしています。そのため、時間効率を優先する必要があり、トップダウン型の学習方法で効果的に勉強できないかを模索しています。
現在は、概念や大まかな知識のニュアンスを頭に入れておき、後々何を調べればよいかがわかる程度の理解度で学習を進めています。その分、実際にコードを書いて試行回数を増やしていきたいと考えています。(この方法が適切かは状況により異なると考えています)
今回は、主に学習した内容について述べています。
作成したもの
学習記録アプリを作成しました。このアプリは、日々の学習内容を記録し、振り返ることができるシンプルなものです。
 |
| 操作画面 |
アプリ制作を通して学んだこと
1. && 演算子(アンパサンド演算子)がReactでよく使われる
Reactを学ぶ上で必要なJavaScriptの基本概念として、
技術記事や書籍などでよく記載されているは主に以下でした。
- テンプレート文字列 ``
- アロー関数
- 三項演算子
- 分割代入
- スプレッド構文
- 配列操作
- map,filter
&& 演算子(アンパサンド演算子)について、以下の記事が参考になりました。
コード模写まで行わずとも、真/偽(true/false)の判定が行われる順番 を理解することで、実際のコーディング場面で利用することができます。
2.Propsとは?
以下の図が、概念理解に役に立ちました。
3. フックの使い分け
Reactでは、今の関数内のデータがどんな状態であるか、どんな値を持っているかを把握し、そのデータをフックを使って操作することで画面描写ができます。
画面にデータが表示されるまでに、いくつかのステップ(段階)があります。
このステップを間違えてしまうとデータが表示されなくなります。
ライフサイクルというデータが表示されるまでのサイクルを理解することで、画面に正常にデータを表示することができます。
ライフサイクル
フックの使い分け
フックを適切に使い分けることで、Reactの関数コンポーネントで効率的かつ効果的に状態管理やライフサイクルイベントのハンドリングが可能になります。
以下は、chatGPTに出力してもらった表になります。チートシートのように使い、後々実装の中で理解を深めていけたら良いと考えいています。
| フック名 | UI機能例 | 使用場面 | ライフサイクル上の特徴 |
|---|---|---|---|
useState |
数値入力、トグルスイッチ | コンポーネント内での状態保持が必要な時 | メリット: 状態更新が直感的で使いやすい。デメリット: 大規模な状態管理には向かない場合がある。 |
useEffect |
データフェッチ、イベント購読 | サイドエフェクト（外部データの取得など）が必要な時 | メリット: ライフサイクルの多くの段階をカバーできる。デメリット: クリーンアップを忘れるとメモリリークの原因に。 |
useContext |
テーマ設定、言語設定 | コンポーネント間でのグローバルな状態の共有が必要な時 | メリット: プロップスドリリングを避けられる。デメリット: 大規模なアプリで過度に使うと管理が複雑に。 |
useReducer |
状態が多いフォームの管理 | 複雑な状態ロジックが必要な時、または状態更新ロジックを外部に分離したい時 | メリット: 複雑な状態管理が容易に。デメリット: useStateに比べて学習コストが高い。 |
useCallback |
頻繁に呼ばれる関数、イベントハンドラ | 関数を再生成せずにメモ化したい時、特にリストレンダリングの最適化が必要な時 | メリット: 不要な関数生成を防ぎ、パフォーマンス向上に貢献。デメリット: 過度な最適化が可読性を下げることがある。 |
useMemo |
計算結果のレンダリング | 高コストな計算を避けたい時 | メリット: 計算コストを節約し、パフォーマンスを向上させる。デメリット: 依存関係の管理が難しい場合がある。 |
useRef |
フォーカス管理、DOM操作 | 可変な値を保持し続けたい時、DOMへの直接アクセスが必要な時 | メリット: レンダリングに影響されずにデータ保持が可能。デメリット: 濫用するとReactのパラダイムから外れることがある。 |
useLayoutEffect |
レイアウトの読み取りと変更 | 描画後にDOMを同期的に変更したい時 | メリット: 描画前にDOMの更新を行うことができるので、UIのチラつきを防ぐ。デメリット: 重い処理を含む場合はページの読み込み速度に影響を及ぼすことがある。 |
クリーンアップ: 不要になったリソースやメモリを整理すること。プログラムが終了する前や、Reactでコンポーネントが削除される前に、使われなくなったリソースを解放する処理。
プロップスドリリング: Reactで、データを親コンポーネントから子、孫と深く渡していくこと。中間のコンポーネントはそのデータを使わないのに、ただ渡すためだけに受け取る。これを避けるにはuseContextや状態管理ライブラリを使う。
メモリリーク: プログラムが使い終わったメモリを解放しないことで、利用可能なメモリが少なくなる現象。Reactでは、コンポーネントのアンマウント後も残るイベントリスナーやタイマーが原因で起こることがある。useEffectでこれらをクリーンアップする。
今回大変だったこと
コーディングにおいて、1つ1つの処理は書けるのですが、複数の処理を統合させる方法が思いつかず、chatGPTに叩きを出してもらいました。
chatGPTに頼らず、ドキュメントを読み、原因を考えながら何度もコーディングを繰り返すことで、複数の処理の分配方法を把握していきたいです。
参考