frontend-dev

---

name: frontend-dev description: フロントエンド開発（React/TypeScript）のベストプラクティスと規約

フロントエンドのコーディング規約

• コンポーネント設計: UI はコンポーネントベースで構築し、再利用可能な構造を保つ。
• 状態管理: 状態管理は一元化し、コンポーネントは必要最小限のデータのみを購読する。UI 固有の状態はコンポーネント内部でカプセル化し、過剰なグローバル状態共有を避ける。
• ロジック分離: ビジネスロジックは DOM 操作から切り離し、データ駆動型の UI 更新を行う。
• キャッシュ戦略: クライアントキャッシュを活用し、リアルタイム更新が不要なデータはsessionStorageやlocalStorageで保持する。
• UX/UI:
  • エラーメッセージは具体的で、ユーザーに理解と行動を促す内容とする。
  • 成功状態は過剰に通知せず、明確な視覚的フィードバックを重視する。

実装チェックリスト

• コンポーネントは小さく、単一責任になっているか
• useEffect の依存配列は正しいか
• メモ化（useMemo, useCallback）は適切に使用されているか
• アクセシビリティ（a11y）は考慮されているか（aria 属性など）
• レスポンシブデザインは崩れていないか
• 型定義（Props, State）は明示的か
• ハードコードされた文字列はなく、定数や設定ファイルを使用しているか