| name | developing-frontend |
| description | フロントエンド UI/UX 実装と最適化を支援します。React/Vue/Next.jsでの実装、パフォーマンス最適化、アクセシビリティを提供します。ユーザーインターフェース開発、Web アプリケーション構築が必要な場合に使用してください。 |
フロントエンド開発とパフォーマンス最適化
概要
フロントエンド開発、React/Vue/Next.js実装、TypeScript型設計、パフォーマンス最適化を包括的に支援するスキルです。
実行フロー
Step 1: プロジェクトセットアップ
フレームワーク選定基準
| フレームワーク | 用途 | 特徴 |
|---|---|---|
| React | 汎用的なSPA | 最大のエコシステム |
| Next.js | SEO重視のWebアプリ | SSR/SSG/ISRサポート |
| Vue 3 | シンプルで学習しやすい | Composition API |
| Astro | コンテンツ重視サイト | ゼロJSデフォルト |
| Svelte | バンドルサイズ最小化 | コンパイル時最適化 |
Step 2: TypeScript型設計
高度な型システム
ジェネリクスと制約:
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
判別ユニオンと網羅性チェック:
type Result<T, E = Error> =
| { success: true; data: T }
| { success: false; error: E };
ユーティリティ型の活用:
Partial<T>,Pick<T, K>,Omit<T, K>,Record<K, V>,Required<T>
ブランド型:
type UserId = string & { readonly brand: unique symbol };
Step 3: コンポーネント設計
Reactコンポーネントアーキテクチャ
- 単一責任の原則を守る
- Composition over Inheritance
- Props型を明確に定義
カスタムフック:
function useUser(userId: string) {
const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
// ...
return { user, loading, error };
}
Step 4: 状態管理
状態管理手法の選択
| 手法 | 用途 | 学習曲線 |
|---|---|---|
| useState | ローカル状態 | 低 |
| Context API | テーマ、認証情報 | 中 |
| Zustand | グローバル状態（軽量） | 低 |
| Redux Toolkit | 複雑な状態管理 | 高 |
| React Query | サーバー状態管理 | 中 |
Zustand（推奨）:
const useCartStore = create<CartStore>((set) => ({
items: [],
addItem: (item) => set((state) => ({ items: [...state.items, item] })),
}));
Step 5: パフォーマンス最適化
React最適化テクニック
- React.memo: 不要な再レンダリングを防ぐ
- useCallback/useMemo: 関数・計算結果をメモ化
- コード分割:
lazy()とSuspenseで動的インポート - バーチャライゼーション:
@tanstack/react-virtualで大量リスト対応
Core Web Vitals目標
FCP (First Contentful Paint) < 1.8s
LCP (Largest Contentful Paint) < 2.5s
FID (First Input Delay) < 100ms
CLS (Cumulative Layout Shift) < 0.1
Step 6: Tailwind CSSスタイリング
レスポンシブデザイン:
<div className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-4">
Step 7: テスト
Testing Library:
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
出力成果物
- プロジェクトセットアップ: 初期化済みプロジェクト構造
- 型定義: TypeScriptの型定義ファイル
- コンポーネントライブラリ: 再利用可能なUI部品
- 状態管理: ストア、カスタムフック
- スタイルシステム: Tailwind設定、デザイントークン
- テストコード: ユニット・統合テスト
ベストプラクティス
- TypeScript Strict Mode: 最大限の型安全性を確保
- コンポーネント設計: 単一責任の原則を守る
- パフォーマンス: React.memo、useCallback、useMemoを適切に使用
- アクセシビリティ: セマンティックHTML、ARIA属性、キーボード操作
- テスト: Testing Libraryで動作をテスト
関連ファイル
- PATTERNS.md - 実装パターン集
- PERFORMANCE.md - パフォーマンスチェックリスト