React/Next.js Component Creation

React 19.2.4 と Next.js 16.1.5 を使用した高品質なコンポーネントを作成します。

作成手順

1. Atomic Design階層の決定

コンポーネントを配置する適切な階層を決定:

• atoms/: 基本的なUI要素（Button, Input, Labelなど）。他のコンポーネントに依存しない
• molecules/: atomsの組み合わせ（SearchBar, FormFieldなど）
• organisms/: molecules/atomsを組み合わせた複雑なコンポーネント（Header, DiaryCardなど）
• templates/: ページレベルのレイアウト
• app/: Next.js App Routerのページ（テンプレートの具体的なインスタンス）

重要: 上位階層のコンポーネントは下位階層のコンポーネントのみをインポートできます。

2. コンポーネントの実装

typescript
1// src/components/[階層]/ComponentName/ComponentName.tsx
2import type { FC } from 'react';
3
4export type ComponentNameProps = {
5  // Props定義（必須/オプションを明確に）
6  title: string;
7  description?: string;
8  onClick?: () => void;
9  className?: string;
10  children?: React.ReactNode;
11};
12
13export const ComponentName: FC<ComponentNameProps> = ({
14  title,
15  description,
16  onClick,
17  className = '',
18  children,
19}) => {
20  return (
21    <div className={`基本スタイル ${className}`}>
22      {/* コンポーネントの実装 */}
23    </div>
24  );
25};

3. 実装ガイドライン

TypeScript:

• すべてのpropsに型定義を提供
• FC<Props> を使用
• エクスポートされるpropsは export type で定義

Styling (Tailwind CSS v4.1):

• ユーティリティクラスを直接使用
• className propでカスタマイズ可能にする
• レスポンシブデザインには sm:, md:, lg:, xl: プレフィックスを使用

アクセシビリティ:

• セマンティックなHTML要素を使用
• 適切なARIA属性を追加
• キーボードナビゲーションをサポート
• 十分なカラーコントラスト比を確保

パフォーマンス:

• 必要に応じて React.memo を使用
• イベントハンドラーは適切にメモ化
• 重い計算は useMemo でキャッシュ

4. パスエイリアス

すべてのインポートに @/ エイリアスを使用:

typescript
1import { Button } from '@/components/atoms/Button';
2import { validateDiary } from '@/lib/validations/diary';

5. ファイル構成

コンポーネントディレクトリには以下を含める:

ComponentName/
├── ComponentName.tsx          # メインコンポーネント
├── ComponentName.stories.tsx  # Storybook stories（別スキルで作成）
├── ComponentName.test.tsx     # Vitest tests（別スキルで作成）
└── index.ts                   # 再エクスポート（オプション）

出力

1. コンポーネントファイルを作成
2. 実装した機能とアクセシビリティ対応を説明
3. 使用例を提供
4. 次のステップ（Storybook story作成、テスト作成）を提案