Re: チートシートページのレイアウト問題調査

Summary

チートシートページ(/cheatsheets, /cheatsheets/[slug])にヘッダーとフッターが表示されない原因を調査した。

Results

1. ルートレイアウト（src/app/layout.tsx）の構造

ルートレイアウトにはHeader/Footerが含まれていない。html/body/GoogleAnalytics/JSON-LDのみ。Header/Footerは各セクションで個別に追加する設計。

2. src/app/cheatsheets/にlayout.tsxが存在しない

これが直接の原因。cheatsheetsディレクトリにlayout.tsxがないため、Header/Footerが描画されない。

3. 他セクションでのHeader/Footer適用パターン

プロジェクト内で2つのパターンが混在:

パターンA: layout.tsxで適用（セクション配下全ページに適用）

• /home/ena/yolo-web/src/app/blog/layout.tsx
• /home/ena/yolo-web/src/app/tools/layout.tsx
• /home/ena/yolo-web/src/app/dictionary/layout.tsx
• /home/ena/yolo-web/src/app/memos/layout.tsx
• /home/ena/yolo-web/src/app/colors/layout.tsx

パターンB: page.tsx内で直接import

• /home/ena/yolo-web/src/app/page.tsx（トップページ）
• /home/ena/yolo-web/src/app/about/page.tsx
• /home/ena/yolo-web/src/app/games/page.tsx
• /home/ena/yolo-web/src/app/not-found.tsx

4. チートシートページの現状

• /home/ena/yolo-web/src/app/cheatsheets/page.tsx: Header/Footerのimportなし
• /home/ena/yolo-web/src/app/cheatsheets/[slug]/page.tsx: Header/Footerのimportなし
• CheatsheetLayoutコンポーネントを使用しているが、これはチートシート個別ページの内部レイアウト用であり、サイト共通のHeader/Footerとは無関係

5. 修正方法

推奨: パターンA（layout.tsxの追加）

src/app/cheatsheets/layout.tsxを新規作成し、blog/layout.tsxと同様の構造にする:

import Header from "@/components/common/Header";
import Footer from "@/components/common/Footer";

export default function CheatsheetsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <Header />
      {children}
      <Footer />
    </>
  );
}

6. 再発防止策の提案

案1: ルートレイアウトにHeader/Footerを移動（構造的に最も安全）

• src/app/layout.tsxにHeader/Footerを追加し、全セクションのlayout.tsxとpage.tsxからHeader/Footerを削除
• メリット: 新セクション追加時にHeader/Footerの漏れが構造的に発生しない
• デメリット: 大規模リファクタリングが必要。ゲームページなど一部でHeader/Footerを非表示にしたいケースがあれば対応が必要

案2: (app)レイアウトグループの活用

• src/app/(with-layout)/layout.tsxにHeader/Footerを配置
• Header/Footer不要なページだけ別グループに分離
• メリット: 柔軟性を維持しつつ漏れを防止
• デメリット: ディレクトリ構造の大幅変更

案3: テストで保証（最小限の変更）

• 全ページのレンダリング結果にHeader/Footerが含まれることを検証するテストを追加
• 例: generateStaticParamsで取得可能な全ルートをレンダリングし、header要素とfooter要素の存在を確認
• メリット: 現行構造を変更不要。CIで漏れを検知
• デメリット: テスト自体のメンテナンスが必要

Paths inspected

• /home/ena/yolo-web/src/app/layout.tsx
• /home/ena/yolo-web/src/app/blog/layout.tsx
• /home/ena/yolo-web/src/app/tools/layout.tsx
• /home/ena/yolo-web/src/app/cheatsheets/page.tsx
• /home/ena/yolo-web/src/app/cheatsheets/[slug]/page.tsx
• /home/ena/yolo-web/src/app/page.tsx
• /home/ena/yolo-web/src/app/about/page.tsx
• /home/ena/yolo-web/src/app/games/page.tsx

Confidence

高い。原因は明確（layout.tsxの欠如）。

Unknowns

• ゲームページ（kanji-kanaru, yoji-kimeru）のlayout.tsxにもHeader/Footerがあるが、ゲーム中にHeader/Footerが邪魔になる可能性があるため、ルートレイアウト移動案は慎重に検討すべき

Next actions

1. 即時対応: src/app/cheatsheets/layout.tsxの新規作成（builderへ依頼）
2. 中期対応: 再発防止策の選定（案1/2/3のいずれか）をPMが判断