perf: /[locale] ルートの低優先度パフォーマンス改善

[k0kishima]

概要

/[locale] ルートのパフォーマンス監査で検出された低優先度の改善項目をまとめたものです。
いずれも影響は軽微ですが、コード品質・一貫性の向上に寄与します。

改善項目

1. AuthStatusDisplay の mousedown リスナーが常時登録

• ファイル: apps/web/src/app/[locale]/_components/AuthStatusDisplay.tsx:27-36
• 問題: ドロップダウンメニューの外側クリック検出のために document.addEventListener('mousedown', ...) を常時登録。メニューが閉じている間も全クリックイベントを処理。
• 改善策: isOpen が true の場合のみリスナーを登録する

2. react-icons の deep import 未使用

• ファイル: apps/web/src/app/[locale]/_lib/icon-mapping.tsx 他
• 問題: react-icons/fa からの named import で tree-shaking に依存。deep import (react-icons/fa/FaHome) への切り替えでビルド効率改善の余地あり。
• 改善策: deep import 形式への切り替えを検討

3. AuthProvider の value が useMemo 未使用

• ファイル: apps/web/src/app/[locale]/_contexts/AuthContext.tsx
• 問題: Context value がメモ化されておらず、状態更新時に不要な再レンダリングの可能性。
• 改善策: useMemo でメモ化

4. next-intl/navigation の Link と next/link が混在

• ファイル: Header.tsx, Footer.tsx vs 他のコンポーネント
• 問題: ロケール付きリンクの生成方法が統一されていない。
• 改善策: 統一検討（Server Component の制約を考慮）

5. ミドルウェア未使用で Accept-Language ベースのロケール自動リダイレクトがない

• 問題: next-intl の createMiddleware が未使用。ロケールなし URL が 404 になる。
• 改善策: next-intl の createMiddleware 導入検討（ランディングページとの共存に注意）

6. Route Segment Config が一切未使用

• 問題: export const dynamic / export const revalidate 等の設定がなく、Next.js のデフォルト動作に完全依存。
• 改善策: 変更頻度の低い DB 依存ページに ISR (revalidate) 適用を検討

参考

パフォーマンス監査レポートより抽出

🤖 Generated with Claude Code

[k0kishima]

@claude この課題を作成してからかなりコード変わったんですけどこれってまだ対応の必要ありますか？

[claude]

Claude finished @k0kishima's task in 1m 55s —— View job

---

調査完了 — 各改善項目の現状

コードを確認した結果、いくつかはすでに対応済みでした。以下に各項目の現状を報告します。

---

✅ 対応済み（対応不要）

3. AuthProvider の useMemo 未使用
→ AuthContext.tsx:100-103 で useMemo が適用済みです。

const value = useMemo(
  () => ({ user, session, isLoading, signOut, refreshUser }),
  [user, session, isLoading, signOut, refreshUser]
);

6. Route Segment Config が未使用
→ 現在 58 ファイルで export const dynamic / export const revalidate が使用されており、問題は解消されています。

---

⚠️ 依然として該当するが影響は軽微

1. AuthStatusDisplay の mousedown リスナーが常時登録
→ AuthStatusDisplay.tsx:29-38 を確認。isOpen に関係なくリスナーが登録されています。

useEffect(() => {
  document.addEventListener('mousedown', handleMouseDown);
  return () => document.removeEventListener('mousedown', handleMouseDown);
}, []); // ← isOpen で条件分岐していない

修正するなら useEffect の依存配列に isOpen を追加し、メニューが開いているときだけ登録するように変更する、という改善案が有効です。ただし、実際のパフォーマンス影響は軽微です。

2. react-icons の deep import 未使用
→ icon-mapping.tsx は今も from 'react-icons/fa' の named import を使用しています。ただし、react-icons v5 と現代のバンドラー（Turbopack/Webpack5）は ESM の named import を適切に tree-shake するため、実質的な効果は限定的です。

4. next-intl/navigation の Link と next/link の混在
→ Header.tsx と Footer.tsx は next/link + 手動の /${locale}/... を使用、一方で 50 以上のコンポーネントは @/i18n/routing の Link を使用しています。ただし、Header.tsx/Footer.tsx は Server Component として locale プロパティを受け取っているため、どちらのアプローチも技術的には問題なく動作します。一貫性の観点では統一が望ましいですが、バグではありません。

---

🔄 設計上の判断が必要（現状は意図的な可能性あり）

5. ミドルウェアによるロケール自動リダイレクト
→ middleware.ts は存在しない状態が続いています。ただし i18n/routing.ts に defineRouting が定義されており、ミドルウェア追加の準備は整っています。(landing) ルートグループの設計（ロケールなしのランディングページ）との兼ね合いで意図的に外している可能性があります。追加する場合は影響範囲を慎重に確認する必要があります。

---

まとめ

#	項目	状況
1	mousedown リスナーの常時登録	⚠️ 依然として該当（修正可能）
2	react-icons deep import	⚠️ 依然として該当（影響は軽微）
3	useMemo 未使用	✅ 対応済み
4	Link コンポーネントの混在	⚠️ 依然として該当（バグではない）
5	ミドルウェア未導入	🔄 設計判断が必要
6	Route Segment Config 未使用	✅ 対応済み

推奨: 3 と 6 はすでに解決済みなので、残りのうち 1（mousedown） が最もコスト対効果の良い改善かと思います。他の項目は対応するかどうか判断を仰ぎます。