frontend-dev

フロントエンド開発

Next.js のページ、React コンポーネント、Tailwind CSS のスタイル、API 連携、フック、i18n を作成または変更する場合に使用します。

コードを書く前に

1. ユーザーフローについて、docs/agent/architecture/frontend-workflow.md を読みます
2. スイス・インターナショナル・スタイルについて、docs/agent/design/style-guide.md を読みます（必須）
3. 規約について、docs/agent/coding-standards.md を読みます
4. apps/frontend/components/ にある既存のコンポーネントを確認します

必ず守るルール

1. スイス・インターナショナル・スタイル - UI の変更にはすべて適用します
2. あらゆる場所で rounded-none を使います - 角を丸くすることは一切禁止です
3. ハードシャドウ - shadow-[4px_4px_0px_0px_#000000] を使い、ソフトシャドウは使いません
4. コミット前に npm run lint を実行します
5. コミット前に npm run format を実行します
6. すべてのテキストエリアで Enter キーを処理します

スイス・インターナショナル・スタイル早見表

要素	値
キャンバスの背景	#F0F0E8 / bg-[#F0F0E8]
インクのテキスト	#000000
ハイパーブルー	#1D4ED8 / text-blue-700
シグナルグリーン	#15803D / text-green-700
アラートレッド	#DC2626 / text-red-600
見出し	font-serif
本文	font-sans
ラベル	font-mono text-sm uppercase tracking-wider
罫線	rounded-none border-2 border-black
シャドウ	shadow-[4px_4px_0px_0px_#000000]
ホバー	hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none

アンチパターン（絶対に使用しない）

• rounded-none 以外の rounded-*
• グラデーションやぼかしシャドウ
• パレットにない色
• パステルカラーや柔らかい色
• 機能のない装飾用アイコン

パターン

新しいコンポーネント

'use client';

interface MyComponentProps {
  title: string;
  onAction: () => void;
}

export function MyComponent({ title, onAction }: MyComponentProps) {
  return (
    <div className="bg-white border-2 border-black shadow-[4px_4px_0px_0px_#000000] p-6">
      <h3 className="font-serif text-xl mb-4">{title}</h3>
      <button
        onClick={onAction}
        className="rounded-none border-2 border-black px-4 py-2 bg-blue-700 text-white shadow-[2px_2px_0px_0px_#000000] hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none transition-all"
      >
        Action
      </button>
    </div>
  );
}

テキストエリア（Enter キーの修正）

const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
  if (e.key === 'Enter') e.stopPropagation();
};

<textarea onKeyDown={handleKeyDown} className="w-full rounded-none border-2 border-black p-3 font-sans" />

バンドルの最適化

// Direct icon import (NOT barrel import)
import FileText from 'lucide-react/dist/esm/icons/file-text';

// Dynamic import for heavy components
import dynamic from 'next/dynamic';
const PDFViewer = dynamic(() => import('./PDFViewer'), { ssr: false });

API 連携

// Use Promise.all for independent fetches
const [resumes, jobs] = await Promise.all([
  api.get('/api/v1/resumes'),
  api.get('/api/v1/jobs'),
]);

チェックリスト

• npm run lint が成功する
• npm run format を実行した
• すべての要素に rounded-none を適用した
• ハードシャドウのみを使い、スイスのパレットに限定した
• タイポグラフィが適切（見出しはセリフ体、ラベルは等幅フォント、本文はサンセリフ体）
• テキストエリアに Enter キーのハンドラーがある
• アイコンを直接インポートし、重いコンポーネントには next/dynamic を使う
• 独立したフェッチには Promise.all() を使う