senior-frontend

シニアフロントエンド

React／Next.js アプリケーション向けのフロントエンド開発パターン、パフォーマンス最適化、自動化ツールです。

プロジェクトのスキャフォールディング

TypeScript、Tailwind CSS、ベストプラクティスに基づく設定を備えた、新しい Next.js または React プロジェクトを生成します。

スキャフォールダーのオプション

オプション	説明
--template nextjs	App Router と Server Components を備えた Next.js 14 以降
--template react	TypeScript を使用した React + Vite
--features auth	NextAuth.js による認証を追加
--features api	React Query + API クライアントを追加
--features forms	React Hook Form + Zod によるバリデーションを追加
--features testing	Vitest + Testing Library を追加

生成される構成（Next.js）

my-app/
├── app/
│   ├── layout.tsx        # Root layout with fonts
│   ├── page.tsx          # Home page
│   ├── globals.css       # Tailwind + CSS variables
│   └── api/health/route.ts
├── components/
│   ├── ui/               # Button, Input, Card
│   └── layout/           # Header, Footer, Sidebar
├── hooks/                # useDebounce, useLocalStorage
├── lib/                  # utils (cn), constants
├── types/                # TypeScript interfaces
├── tailwind.config.ts
├── next.config.js
└── package.json

コンポーネントの生成

TypeScript、テスト、Storybook のストーリーを含む React コンポーネントを生成します。

ジェネレーターのオプション

オプション	説明
--type client	'use client' を指定したクライアントコンポーネント（デフォルト）
--type server	非同期のサーバーコンポーネント
--type hook	カスタム React フック
--with-test	テストファイルを含める
--with-story	Storybook のストーリーを含める

バンドル分析

package.json とプロジェクト構成を分析し、バンドルを最適化できる箇所を特定します。

置き換えを検討する大きな依存関係

パッケージ	サイズ	代替
moment	290KB	date-fns（12KB）または dayjs（2KB）
lodash	71KB	ツリーシェイキングに対応した lodash-es
axios	14KB	ネイティブの fetch または ky（3KB）
jquery	87KB	ネイティブの DOM API
@mui/material	大きい	shadcn/ui または Radix UI

React のパターン

複合コンポーネント

const Tabs = ({ children }) => {
  const [active, setActive] = useState(0);
  return (
    <TabsContext.Provider value={{ active, setActive }}>
      {children}
    </TabsContext.Provider>
  );
};

Tabs.List = TabList;
Tabs.Panel = TabPanel;

カスタムフック

function useDebounce<T>(value: T, delay = 500): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

Next.js の最適化

サーバーコンポーネントとクライアントコンポーネント

デフォルトではサーバーコンポーネントを使用します。以下が必要な場合に限り、'use client' を追加します。

• イベントハンドラー（onClick、onChange）
• 状態（useState、useReducer）
• エフェクト（useEffect）
• ブラウザー API

画像の最適化

import Image from 'next/image';

// Above the fold - load immediately
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority
/>

// Responsive image with fill
<div className="relative aspect-video">
  <Image
    src="/product.jpg"
    alt="Product"
    fill
    sizes="(max-width: 768px) 100vw, 50vw"
    className="object-cover"
  />
</div>

アクセシビリティのチェックリスト

1. セマンティック HTML：適切な要素（<button>、<nav>、<main>）を使用する
2. キーボード操作：すべてのインタラクティブ要素にフォーカスできるようにする
3. ARIA ラベル：アイコンや複雑なウィジェットにラベルを設定する
4. 色のコントラスト：通常のテキストでは最低 4.5:1 を確保する
5. フォーカスインジケーター：フォーカス状態を視認できるようにする

// Accessible button
<button
  type="button"
  aria-label="Close dialog"
  onClick={onClose}
  className="focus-visible:ring-2 focus-visible:ring-blue-500"
>
  <XIcon aria-hidden="true" />
</button>

クイックリファレンス

Tailwind CSS ユーティリティ

import { cn } from '@/lib/utils';

<button className={cn(
  'px-4 py-2 rounded',
  variant === 'primary' && 'bg-blue-500 text-white',
  disabled && 'opacity-50 cursor-not-allowed'
)} />

TypeScript のパターン

// Props with children
interface CardProps {
  className?: string;
  children: React.ReactNode;
}

// Generic component
interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: ListProps<T>) {
  return <ul>{items.map(renderItem)}</ul>;
}