インターフェースのインタラクション

:root {
  --primary: oklch(0.7 0.15 200);
  --background: oklch(0.09 0 0);
  --foreground: oklch(0.98 0 0);
  --border: oklch(0.25 0 0);
  /* ... その他のカラーバリアブル */
}

// app/layout.tsx
import { ThemeProvider } from '@/components/theme-provider'

export default function RootLayout({ children }) {
  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </ThemeProvider>
  )
}

.dark {
  --background: oklch(0.09 0 0);
  --foreground: oklch(0.98 0 0);
  /* 暗色モード下のすべてのカラーバリアブル */
}

// 完全なフォームコンポーネントの例
'use client'

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form'

const formSchema = z.object({
  username: z.string().min(2, 'ユーザー名は2文字以上である必要があります'),
  email: z.string().email('無効なメールアドレス'),
})

export function UserForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: '',
      email: '',
    },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <FormField
          control={form.control}
          name="username"
          render={({ field }) => (
            <FormItem>
              <FormLabel>ユーザー名</FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">送信</Button>
      </form>
    </Form>
  )
}

// Tab 順序を tabIndex で制御する
<button tabIndex={1}>最初</button>
<button tabIndex={2}>2番目</button>

// 互換性のない要素をスキップする
<div tabIndex={-1}>この要素をスキップする</div>

// Tab 順序から外す（推奨しません。必要な場合のみ）
<button tabIndex={-1}>Tab でアクセス不可</button>

// フォーカストラップ（Focus Trap）- モーダル内で使用
import { FocusTrap } from '@radix-ui/react-focus-trap'

<FocusTrap>
  <Dialog>
    {/* フォーカスはダイアログ内に制限される */}
  </Dialog>
</FocusTrap>

// フォーカス可視スタイル
<button className="focus-visible:ring-2 focus-visible:ring-primary">
  {/* キーボード操作時にフォーカスリングを表示 */}
</button>

// aria-label：要素にラベルを付与する
<button aria-label="ダイアログを閉じる">
  <X />
</button>

// aria-labelledby：他の要素の ID を参照する
<div aria-labelledby="dialog-title">
  <h2 id="dialog-title">ダイアログのタイトル</h2>
</div>

// aria-describedby：追加の説明を提供する
<input 
  aria-describedby="email-help"
  aria-invalid={hasError}
/>
<span id="email-help">有効なメールアドレスを入力してください</span>

// セマンティックタグを使用する
<nav>ナビゲーション</nav>
<main>メインコンテンツ</main>
<article>記事</article>
<section>セクション</section>
<aside>サイドバー</aside>
<header>ヘッダー</header>
<footer>フッター</footer>

// 避ける：セマンティックタグの代わりに div を使用する
<div className="nav"> {/* 非推奨 */}
<nav> {/* 推奨 */}

// role 属性を使用する（セマンティックなタグが使用できない場合）
<div role="button" tabIndex={0} onClick={handleClick}>
  カスタムボタン
</div>

<div role="alert" aria-live="polite">
  重要なお知らせ
</div>

<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  {/* モーダルダイアログ */}
</div>

// エラー：状態を色だけで表す
<span className="text-red-500">エラー</span>

// 正解：色 + アイコン/テキスト
<span className="text-red-500 flex items-center gap-1">
  <AlertCircle />
  エラー：有効な値を入力してください
</span>

// memo を使用して不要な再レンダリングを回避
const ExpensiveComponent = React.memo(({ data }) => {
  return <div>{/* 複雑なレンダリング */}</div>
})

// useMemo を使用して計算結果をキャッシュ
const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b)
}, [a, b])

// useCallback を使用して関数をキャッシュ
const handleClick = useCallback(() => {
  doSomething(id)
}, [id])

// react-window または react-virtualized を使用
import { FixedSizeList } from 'react-window'

<FixedSizeList
  height={600}
  itemCount={10000}
  itemSize={50}
  width="100%"
>
  {Row}
</FixedSizeList>

// コンポーネントを動的にインポート
import dynamic from 'next/dynamic'

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <Skeleton />,
  ssr: false, // SSR を無効にする必要がある場合
})

// ルートレベルのコード分割（Next.js が自動処理）
// app/dashboard/page.tsx は自動的に分割される

// Next.js Image コンポーネントによる自動最適化
import Image from 'next/image'

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority // ファーストビューの画像
  loading="lazy" // ファーストビュー以外の画像
  placeholder="blur" // ぼかしプレースホルダー
/>

// WebP、AVIF などの最新フォーマットをサポート
// レスポンシブ画像を自動生成

// Use next/font to optimize fonts
import { GeistSans } from 'next/font/google'

const geistSans = GeistSans({
  subsets: ['latin'],
  display: 'swap', // Font loading strategy
  preload: true,
})

// Font subsetting, load only the required characters

// サードパーティドメインを事前接続
<link rel="preconnect" href="https://fonts.googleapis.com" />

// 重要リソースを事前読み込み
<link rel="preload" href="/fonts/geist.woff2" as="font" />

// 次のページのリソースを事前取得
<link rel="prefetch" href="/dashboard" />