Reactコンポーネントの作成
私たちはモダンなReact（19+）を使用し、明確さ、正確性、保守性を重視した一般的なベストプラクティスに従っています。
コンポーネント構造とスタイル
- 推奨: 単一責任を持つ小さく焦点を絞ったコンポーネント
- 推奨: アロー関数よりも名前付き
functionコンポーネント- 例外：無名コールバック、インラインのrender props、クロージャ
- 推奨: 可能な場合は明示的な戻り値の型とpropsの型付け（TypeScript）
- コンポーネントはフラットで読みやすく保ち、深くネストされたJSXを避ける
- 関連するロジック（イベントハンドラ、派生値、ヘルパー）をグループ化する
状態管理
- 回避:
useEffect()- 詳細なガイダンスについては"You Might Not Need An Effect"ガイドを参照
- 推奨: 状態を同期する代わりに、レンダリング中に値を導出する
- TanStack Query（
@tanstack/react-query）を使用してデータをフェッチする
- 回避: 不必要な
useState()やuseReducer()の使用- 可能な場合はpropsや他の状態から状態を導出する
- 状態は可能な限り低いコンポーネントに局所化する
- 禁止: 絶対に必要でない限り、propsを状態にミラーリングしない
- 制御されていない状態を同期するよりも、制御されたコンポーネントを優先する
レンダリングと導出
- 推奨: インラインまたはヘルパー関数を使用して導出値を計算する
useMemo()は控えめに、実証されたパフォーマンス問題がある場合のみ使用する- 回避: 時期尚早な最適化
- レンダリングロジックを決定論的で副作用のない状態に保つ
イベント処理
-
回避: JSXでのインラインイベントハンドラ
-
推奨:
function handleClick() { // ... } <button onClick={handleClick} />; -
以下よりも優先：
<button onClick={() => { /* ... */ }} />
-
-
ハンドラには明確に名前を付ける（
handleSubmit、handleChange、handleClose） -
ハンドラは小さく保ち、複雑なロジックはヘルパーに抽出する
エフェクト、データ、副作用
- 回避: 以下のためのエフェクト:
- 派生状態
- データ変換
- ハンドラ内に記述できるイベントベースのロジック
- 副作用が避けられない場合、最小限に、分離して、十分に文書化する
- 生のエフェクトよりもフレームワークレベルまたは外部の抽象化（ルーター、データライブラリ）を優先する
Propsとコンポジション
- 推奨: 設定よりもコンポジション
- 回避: 過剰なブール型props。表現力豊かなAPIを優先する
childrenを意図的に使用し、期待される構造を文書化する- props名は意味的に明確で予測可能にする
パフォーマンスと安定性
- 推奨: 必要な場合にのみ安定した参照を使用（デフォルトではない）
- 回避: 絶対に必要でない限り、不必要なメモ化（
memo、useCallback） - リストをレンダリングする際は、キーを安定かつ意味的に保つ
一般原則
- コンパイラよりも人間のためにコードを書く
- 賢さよりも明示性を優先する
- 可読性と長期的な保守性のために最適化する
- パターンが複雑に感じられたら、コンポーネントの境界を再検討する