frontend-typescript-rules

# TypeScript 開発ルール（フロントエンド） 実装向けの frontend 固有 React/TypeScript ルール: しきい値、境界での型安全性、コ���ポーネント/状態の設計、エラーハンドリング、プロジェクト規約。 ## 前提条件の検出 プロジェクト規約を適用する前に、TypeScript、bundler/framework、lint・format、path alias、React Compiler、代表的なコンポーネントの設定を確認する。設定またはリポジトリで確立済みのパターンに裏付けられた規約を確認済みとして扱い、限られた例から導いた結論には推測であることを明記する。競合するパターンによって公開される振る舞い、互換性、コンポーネント境界が変わる場合は作業を止め、必要な情報源または判断を具体的に示す。 ## アンチパターンとしきい値 設計変更を促すシグナル: - prop drilling が 3 階層以上 → Context または状態管理へ持ち上げる - コンポーネントが 300 行超 → 分割する - Props が 10 個超 → コンポーネントを分割（3〜7 個が適正範囲） - optional Props が 50% 超 → デフォルト値または Context を導入する - Props のネストが 2 階層超 → フラット化する - 同一の `as` アサーションが 3 回以上出現 → 型設計を見直す ## 境界での型安全性 信頼できない型または取得できない型は`unknown`で受け、型ガードで絞り込む。`as`は、runtime/frameworkの不変条件によって対象の型が保証される場合にのみ使用し、その不変条件を近くのコメントに記録する。既存の生成コードまたはサードパーティの型宣言に含まれる`any`は、ラップすべき境界入力であり、アプリケーションの契約へ`any`を広げる根拠にはならない。 アプリ内部では React の Props/State は型保証されており `unknown` は不要。外部境界では必ず `unknown` で受け、使用前に型ガードで絞り込む: API レスポンス、`localStorage`/`sessionStorage`、URL パラメータ、パースした JSON。制御コンポーネントのフォーム入力は React 合成イベントを通じて型安全に保たれる。 ```typescript const raw: unknown = await (await fetch(url)).json() if (!isUser(raw)) throw new ValidationError('invalid user') const user = raw // User に絞り込み済み ``` ## コンポーネントと状態の設計 - **Function component のみ。** class component は Error Boundary に限り許可（hook の代替が存在しないため）。 - **Props は名前付き型で明示**し分割代入する: `function UserCard({ user, onSelect }: UserCardProps)`。propsを関数に直接型付けしてProps契約を明示する。 - **Props 駆動:** 1つの明確な親コンポーネントが所有する依存はPropsで渡す。互いに隣接しない複数の子孫が値を共有し、Propsの中継によって所...