React/TypeScript基本実装ルール

React/TypeScript開発における基本的なコーディング規約を定義するスキル。

基本方針

• 早期returnでネストを浅くする
• クラスを使わず type / interface を使用
• 引数が4つ以上または同じ型の引数がある場合はオブジェクトで受け取る
• ESLint/Prettierの標準ルールに準拠
• if文には必ず波括弧 {} を付ける（ワンライナー禁止）
• マジックナンバーは使用せず定数を定義

一般原則

• 単一責任の原則: 関数・モジュールは「1つのこと」に集中
• 不変性を優先: const/readonly、イミュータブルな更新
• 副作用の分離: 純粋関数を基本、I/O・状態変更は境界に寄せる
• 明示的なインターフェース: 公開APIを最小限に
• 命名は意図を表現: 略語・あいまい語を避け、ドメイン語彙を使用

TypeScriptの原則

• any は原則禁止（必要な場合も局所化し unknown からの絞り込み）
• 返り値の型は基本的に明示
• 列挙は union type を優先
• 定数は as const を活用

コメントルール

• docコメント: 関数のdocコメントは必ず記載
• 実装の意図: 特別な理由で実装している箇所はコメントを記載
• その他: 上記以外はコメントを記載しない

エラーと入力バリデーション

• 入力境界でバリデーションと正規化を行う
• 例外の握り潰しを避ける
• ユーザー向けメッセージと開発者向けログを分ける

非同期処理

• async/await を優先
• 原則 try/catch は使わない（境界で1箇所に集約、または await promise.catch(...) を使用）
• タイムアウト・リトライ・キャンセルのポリシーを決める

React向け補足

• コンポーネントは小さく保ち、可能な限り純粋に
• propsは読み取り専用、内部での再代入を避ける
• useEffect の依存配列は正確に保つ
• メモ化は必要な場合に限定