| name | frontend-dev |
| description | フロントエンド開発（React/TypeScript）のベストプラクティスと規約 |
フロントエンドのコーディング規約
- コンポーネント設計: UI はコンポーネントベースで構築し、再利用可能な構造を保つ。
- 状態管理: 状態管理は一元化し、コンポーネントは必要最小限のデータのみを購読する。UI 固有の状態はコンポーネント内部でカプセル化し、過剰なグローバル状態共有を避ける。
- ロジック分離: ビジネスロジックは DOM 操作から切り離し、データ駆動型の UI 更新を行う。
- キャッシュ戦略: クライアントキャッシュを活用し、リアルタイム更新が不要なデータは
sessionStorageやlocalStorageで保持する。 - UX/UI:
- エラーメッセージは具体的で、ユーザーに理解と行動を促す内容とする。
- 成功状態は過剰に通知せず、明確な視覚的フィードバックを重視する。
実装チェックリスト
- コンポーネントは小さく、単一責任になっているか
-
useEffectの依存配列は正しいか - メモ化（
useMemo,useCallback）は適切に使用されているか - アクセシビリティ（a11y）は考慮されているか（aria 属性など）
- レスポンシブデザインは崩れていないか
- 型定義（Props, State）は明示的か
- ハードコードされた文字列はなく、定数や設定ファイルを使用しているか