component-library

コンポーネントライブラリの標準スキル

使用する場面

以下の場合に使用します。

• 新しい UI コンポーネントを作成するとき
• 既存のコンポーネントを再利用しやすいようにリファクタリングするとき
• コンポーネントのアーキテクチャをレビューするとき
• 共通コンポーネントのパターンを設定するとき
• コンポーネントのパフォーマンスを最適化するとき

クイックリファレンス

命名

• ファイル：PascalCase（Button.tsx）
• Props：ComponentNameProps インターフェース
• フック：use- 接頭辞（use-auth.ts）

構造

'use client'; // Only if needed
// Imports: types → hooks → utils → components
export interface MyComponentProps { ... }
export default function MyComponent({ ... }: MyComponentProps) { ... }

パターン

• 設定よりコンポジションを優先
• 複雑な UI には複合コンポーネントを使用
• フォームには制御コンポーネントを使用
• 型安全性のためにジェネリックコンポーネントを使用

パフォーマンス

• 純粋なコンポーネントには React.memo
• コストの高い処理には useMemo ／ useCallback
• コード分割には lazy ＋ Suspense
• 仮想化には react-window

アクセシビリティ

• セマンティック HTML（div ではなく button、nav）
• アイコンに ARIA ラベルを設定
• キーボードナビゲーションに対応
• フォーカス状態を視認できるようにする

参考資料

• 完全ガイド：パターン、スタイリング、TypeScript、テスト、ドキュメント