記事：2024/7/22-

## 「React」開発者など存在しない：プログラミングの本質とは

* **ツールではなく概念に焦点を当てよ**
   - ReactはJavaScriptのツールであり、JavaScriptはコンピューティングのツール、そしてコンピューティングは問題解決のツールである。
   - 各ツールに固執せず、普遍的な概念を理解することが重要。
* **プログラミング言語は全て同じ基礎の上に成り立っている**
   - 入力、処理、出力、ストレージ
   - 選択、シーケンス、繰り返し
   - データとアクション（CRUD）
   - 分割統治（モジュール、関数、OOP）
* **一度言語を習得すれば、新しい言語の習得は容易になる**
   - プログラミング言語も自然言語も、基礎となる構成要素は共通している。
* **フレームワークも同様**
   - React、Vue、Angularなどのフレームワークも、基礎となる概念は共通している。
   - 細部に囚われず、基礎を理解することが重要。
* **APIの詳細はGoogleで検索可能**
   - 記憶よりも、必要な情報を効率的に探し出すスキルが重要。
* **忘却は機能であり、バグではない**
   - 記憶すべきは、現実世界で役立つ知識とスキルである。
* **プログラミングとは、考えることであり、タイピングではない**
   - ツールよりも、思考を深めることが重要。

**まとめ：プログラミングの本質は、問題解決能力であり、思考力である。**

## Reactデザインパターン

Reactアプリケーション開発で頻繁に利用されるデザインパターンをまとめました。

**各パターンの概要と利点**

* **カスタムフックパターン**
    * コンポーネントのロジックを再利用可能な関数にまとめる
    * コードの再利用性を高め、保守性を向上
    * 複雑なロジックを抽象化し、可読性を向上
* **HOCパターン (高階コンポーネント)**
    * 複数のコンポーネント間でロジックを共有
    * コードの重複を避け、保守性を向上
    * 表示ロジックとビジネスロジックを分離
* **拡張可能なスタイルパターン**
    * コンポーネントのスタイルを柔軟にカスタマイズ
    * ユーザのニーズに合わせてスタイルを変更可能
    * アプリケーション全体のスタイルの一貫性を維持
* **複合コンポーネントパターン**
    * 複数のコンポーネントを組み合わせて、より複雑なコンポーネントを構築
    * 関連するロジックをカプセル化し、再利用性を向上
    * カスタマイズ性と柔軟性を向上
* **Render Propsパターン**
    * コンポーネント間のコード共有を柔軟に行う
    * レンダリングロジックを外部関数に委譲し、カスタマイズ性を向上
    * 表示ロジックとビジネスロジックを分離
* **Control Propsパターン**
    * 親コンポーネントから子コンポーネントの状態を制御
    * コンポーネント間の双方向通信を可能にする
    * 異なるコンテキストでのコンポーネントの再利用を促進

**各パターンの使い所**

上記のパターンは、それぞれ異なる状況下で役立ちます。
例えば、

* 複数のコンポーネントでロジックを共有したい場合は、カスタムフックパターンやHOCパターン
* コンポーネントのスタイルを柔軟にカスタマイズしたい場合は、拡張可能なスタイルパターン
* 複雑なコンポーネントを構築したい場合は、複合コンポーネントパターン
* レンダリングロジックを柔軟に共有したい場合は、Render Propsパターン
* 親コンポーネントから子コンポーネントの状態を制御したい場合は、Control Propsパターン

が適しています。

これらのパターンを適切に活用することで、Reactアプリケーションの開発効率、保守性、再利用性を向上させることができます。

INPを理解する：新しいツールと実用的な洞察

### INP とは何か？

2024年3月にGoogleのコアウェブバイタルに採用された指標。
ユーザーの操作から次の画面描画までの時間を計測する。
200ms以内の応答が求められる。

### INP の誤解

DOMを変更しなくてもINPとしてカウントされる。
メインスレッドをブロックしても、描画の機会があればINPには影響しない。
データフェッチ後、すぐに描画しない場合もINPは悪化する可能性がある。

### INP の構成要素

ユーザー操作
その他のコード (パート1)
イベントハンドラ
その他のコード (パート2)
ブラウザレンダリング

### INP 最適化の方法

JSの実行を最小限にする
イベントハンドラの実行時間を短縮する
ブラウザレンダリングの時間を短縮する
DOMのサイズを小さくする
アニメーションを最適化する
CSS containment を活用する
長いリストを仮想化する

### 新しいツール: await-interaction-response

ユーザー操作の確認と実際のページ変更を分離する。
ネイティブのselect要素を使用する場合、操作確認は不要。
Reactの startTransition と同様の機能を提供。

### 最適化すべき箇所を見つける方法

Vercel Speed Insights でINPに影響を与える要素を特定する。
Vercel Toolbar でINPを監視する。
Chrome DevTools でCPUスロットリングを行い、低速デバイスでの動作を再現する。

### まとめ

INPは200ms以内にユーザーの入力を処理することを求めている。
サードパーティコードの改善、JSフレームワークのレンダリングパフォーマンスの最適化、CSS containmentの活用、await-interaction-responseによるイベント処理の分割などがINP改善に有効。