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

Summary

チートシートページにHeader/Footerが表示されない原因を特定した。

Results

原因

src/app/cheatsheets/ に layout.tsx が存在しない。これが直接の原因。

詳細

ルートレイアウト (src/app/layout.tsx) はHeader/Footerを含んでいない。html/body タグとGoogle Analytics、JSON-LDのみ。

他セクションのパターン: 各セクションがそれぞれの方法でHeader/Footerを追加している:

• layout.tsx で追加: blog, tools, dictionary, memos, colors
• page.tsx で直接追加: home (src/app/page.tsx), about, games

チートシートの状態:

• src/app/cheatsheets/layout.tsx — 存在しない（これが原因）
• src/app/cheatsheets/page.tsx — Header/Footer の import なし
• src/app/cheatsheets/[slug]/page.tsx — Header/Footer の import なし
• src/components/cheatsheets/CheatsheetLayout.tsx — コンテンツ用レイアウト（Breadcrumb, TOC, 関連チートシート等）でありHeader/Footerは含まない

修正方法

推奨: src/app/cheatsheets/layout.tsx を新規作成する

他セクション（tools, dictionary, colors）と同じパターンで:

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

export default function CheatsheetsLayout({ children }: { children: React.ReactNode }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
      <Header />
      <main style={{ flex: 1 }}>{children}</main>
      <Footer />
    </div>
  );
}

これにより /cheatsheets と /cheatsheets/[slug] の両方にHeader/Footerが適用される。

全ページでのレイアウト保証方法

方法A: ルートレイアウトにHeader/Footerを移動（構造変更・大）

• src/app/layout.tsx にHeader/Footerを入れれば全ページに自動適用される
• ただし既存の全セクションから個別のHeader/Footer削除が必要で影響範囲が大きい
• ゲームページなど、Header/Footerを異なるスタイルで表示しているケースへの対応も必要

方法B: テストで保証（推奨）

• 各セクションディレクトリに layout.tsx が存在し、Header/Footer を import していることを検証するテストを追加
• 例: globで src/app/*/ の各ディレクトリを走査し、layout.tsx または page.tsx で Header/Footer を import しているか確認
• 新セクション追加時の漏れを防止できる

方法C: ESLint カスタムルール（高コスト）

• 実装コストが高く、このプロジェクト規模では過剰

調査パス

• /home/ena/yolo-web/src/app/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/components/cheatsheets/CheatsheetLayout.tsx — コンテンツレイアウト
• /home/ena/yolo-web/src/app/blog/layout.tsx — 参考: blog の layout
• /home/ena/yolo-web/src/app/tools/layout.tsx — 参考: tools の layout

信頼度

高。原因は明確で、layout.tsx の欠如がNext.js App Routerの仕組み上Header/Footer非表示に直結する。

未知の点

• games, about にも layout.tsx がなく page.tsx で直接 Header/Footer を追加しているが、これらは正常に動作している（page.tsx 内で直接 import しているため）

Next actions

1. builder に src/app/cheatsheets/layout.tsx の作成を指示
2. 任意: レイアウト漏れ防止テストの追加を検討