チートシートページ実装計画レビュー依頼

Goal

B-016: チートシート/リファレンスページを新規作成する。初回リリースとして正規表現チートシート、Gitコマンドチートシート、Markdownチートシートの3ページを実装する。既存ツールとの連携リンクを含め、SEO対策を施す。

Step-by-step Plan

Step 1: 型定義とレジストリの作成

ファイル: src/cheatsheets/types.ts

export type CheatsheetCategory = "developer" | "writing" | "devops";

export interface CheatsheetSection {
  id: string;           // アンカーリンク用
  title: string;        // セクション見出し
}

export interface CheatsheetMeta {
  slug: string;
  name: string;             // 日本語表示名
  nameEn: string;           // 英語名
  description: string;      // 日本語、120-160文字、meta description用
  shortDescription: string; // 日本語、約50文字、カード表示用
  keywords: string[];       // 日本語SEOキーワード
  category: CheatsheetCategory;
  relatedToolSlugs: string[];       // 関連するツールのslug
  relatedCheatsheetSlugs: string[]; // 関連するチートシートのslug
  sections: CheatsheetSection[];    // 目次生成用セクション一覧
  publishedAt: string;              // ISO date
}

ファイル: src/cheatsheets/registry.ts

ToolMetaのregistryと同じパターンで実装する。

import type { CheatsheetMeta } from "./types";

// 各チートシートのmetaをimport
import { meta as regexMeta } from "./regex/meta";
import { meta as gitMeta } from "./git/meta";
import { meta as markdownMeta } from "./markdown/meta";

const cheatsheetEntries: CheatsheetMeta[] = [regexMeta, gitMeta, markdownMeta];

export const cheatsheetsBySlug: Map<string, CheatsheetMeta> = new Map(
  cheatsheetEntries.map((entry) => [entry.slug, entry]),
);

export const allCheatsheetMetas: CheatsheetMeta[] = cheatsheetEntries;

export function getAllCheatsheetSlugs(): string[] {
  return cheatsheetEntries.map((e) => e.slug);
}

Step 2: SEOヘルパー関数の追加

ファイル: src/lib/seo.ts に追加

以下の関数を追加する:

generateCheatsheetMetadata(meta: CheatsheetMeta): Metadata -- ツールのgenerateToolMetadataと同じパターン。タイトルフォーマットは ${meta.name} - チートシート | ${SITE_NAME}
generateCheatsheetJsonLd(meta: CheatsheetMeta): object -- @type は "Article" を使用。articleSection: "チートシート" を含める

Step 3: 共通コンポーネントの作成

ファイル: src/components/cheatsheets/CheatsheetLayout.tsx

ToolLayoutと同じパターンで、チートシート個別ページの共通レイアウトを提供する。

<article>
  <Breadcrumb items={[ホーム, チートシート, {name}]} />
  <header>
    <h1>{name}</h1>
    <p>{description}</p>
  </header>
  <TableOfContents sections={meta.sections} />
  <section aria-label="Cheatsheet content">
    {children}
  </section>
  <RelatedTools /> -- 既存コンポーネントを再利用、relatedToolSlugsを渡す
  <RelatedCheatsheets currentSlug={slug} relatedSlugs={relatedCheatsheetSlugs} />
  <AiDisclaimer />
</article>

CSS Moduleは CheatsheetLayout.module.css として作成。ToolLayout.module.cssを参考にする。

ファイル: src/components/cheatsheets/TableOfContents.tsx

チートシートのsectionsを受け取り、アンカーリンク付き目次を表示するコンポーネント。

interface TableOfContentsProps {
  sections: CheatsheetSection[];
}

各項目をクリックすると対応するセクションへスクロールする。CSS Moduleで枠付きのサイドバー風デザイン。

ファイル: src/components/cheatsheets/RelatedCheatsheets.tsx

RelatedToolsコンポーネントと同じパターンで、関連チートシートへのリンクを表示する。

ファイル: src/components/cheatsheets/CheatsheetCard.tsx

ToolCardと同じパターン。一覧ページで使用する。

interface CheatsheetCardProps {
  meta: CheatsheetMeta;
}

カテゴリラベル対応表: developer -> "開発者向け", writing -> "ライティング", devops -> "DevOps"

ファイル: src/components/cheatsheets/CheatsheetGrid.tsx

ToolsGridと同じパターン。CheatsheetCardを並べるグリッド。

ファイル: src/components/cheatsheets/CodeBlock.tsx

チートシート内のコードスニペット表示用コンポーネント。コピーボタン付き。

interface CodeBlockProps {
  code: string;
  language?: string;
  title?: string;
}

クリップボードにコピーする機能を持つ。"use client" が必要。

Step 4: ルーティングとページの作成

ファイル: src/app/cheatsheets/page.tsx -- 一覧ページ

import type { Metadata } from "next";
import { allCheatsheetMetas } from "@/cheatsheets/registry";
import CheatsheetGrid from "@/components/cheatsheets/CheatsheetGrid";
import AiDisclaimer from "@/components/tools/AiDisclaimer";

export const metadata: Metadata = {
  title: "チートシート一覧 | yolos.net",
  description: "正規表現、Git、Markdownなど、開発者向けのチートシート集。日本語で分かりやすく解説。",
  keywords: ["チートシート", "リファレンス", "開発者", "正規表現", "Git", "Markdown"],
};

export default function CheatsheetsPage() { ... }

ファイル: src/app/cheatsheets/[slug]/page.tsx -- 個別ページ

tools/[slug]/page.tsx と同じパターンで実装。generateStaticParams, generateMetadataを含む。各slugに対してスラグ固有のコンテンツコンポーネントを動的importする。

import { cheatsheetsBySlug, getAllCheatsheetSlugs } from "@/cheatsheets/registry";

export function generateStaticParams() {
  return getAllCheatsheetSlugs().map((slug) => ({ slug }));
}

ファイル: src/app/cheatsheets/[slug]/CheatsheetRenderer.tsx -- 動的import用ラッパー

ToolRendererと同じパターン。"use client"コンポーネント。

Step 5: 各チートシートのコンテンツ作成

5-1: 正規表現チートシート (`src/cheatsheets/regex/`)

meta.ts:

slug: "regex"
name: "正規表現チートシート"
nameEn: "Regex Cheatsheet"
category: "developer"
relatedToolSlugs: ["regex-tester"]
relatedCheatsheetSlugs: ["git", "markdown"]

Component.tsx: セクション構成:

基本的なメタ文字 (\d, \w, \s, ., ^, $ 等) -- テーブル形式
量指定子 (*, +, ?, {n}, {n,m} 等) -- テーブル形式
文字クラス ([abc], [^abc], [a-z] 等) -- テーブル形式
グループとキャプチャ ((), (?:), (?=), (?<=) 等) -- テーブル形式
フラグ (g, i, m, s, u 等) -- テーブル形式
よく使うパターン集 (メールアドレス、URL、電話番号、日付、IPアドレス等) -- CodeBlockコンポーネントで表示
正規表現テスターで試す -- regex-testerツールへのリンクボタン

5-2: Gitコマンドチートシート (`src/cheatsheets/git/`)

meta.ts:

slug: "git"
name: "Gitコマンドチートシート"
nameEn: "Git Command Cheatsheet"
category: "devops"
relatedToolSlugs: []
relatedCheatsheetSlugs: ["regex", "markdown"]

Component.tsx: セクション構成:

初期設定 (git config, git init, git clone) -- コマンドとCodeBlock
基本操作 (git add, git commit, git status, git log, git diff) -- テーブル+CodeBlock
ブランチ操作 (git branch, git checkout/switch, git merge, git rebase) -- テーブル+CodeBlock
リモート操作 (git remote, git push, git pull, git fetch) -- テーブル+CodeBlock
取り消し・修正 (git reset, git revert, git stash, git cherry-pick) -- テーブル+CodeBlock
タグ (git tag) -- テーブル+CodeBlock
便利なエイリアス -- CodeBlock

5-3: Markdownチートシート (`src/cheatsheets/markdown/`)

meta.ts:

slug: "markdown"
name: "Markdownチートシート"
nameEn: "Markdown Cheatsheet"
category: "writing"
relatedToolSlugs: ["markdown-preview"]
relatedCheatsheetSlugs: ["regex", "git"]

Component.tsx: セクション構成:

見出し (h1-h6) -- 記法と表示例
テキスト装飾 (太字、斜体、取り消し線、引用) -- 記法と表示例
リスト (番号付き、番号なし、入れ子) -- 記法と表示例
リンクと画像 -- 記法と表示例
コードブロック (インライン、ブロック、言語指定) -- 記法と表示例
テーブル -- 記法と表示例
その他 (水平線、エスケープ、脚注、タスクリスト) -- 記法と表示例
Markdownプレビューで試す -- markdown-previewツールへのリンクボタン

Step 6: ナビゲーション更新

ファイル: src/components/common/Header.tsx

NAV_LINKSにチートシートを追加:

{ href: "/cheatsheets", label: "チートシート" }

ツールの次、ゲームの前に配置する。

Step 7: テストの作成

以下のテストファイルを作成:

src/cheatsheets/__tests__/registry.test.ts:

全チートシートのslugがユニークであること
全metaの必須フィールドが存在すること
relatedCheatsheetSlugsが実在するslugを参照していること
relatedToolSlugsが実在するツールslugを参照していること

src/components/cheatsheets/__tests__/CheatsheetCard.test.tsx:

正しいリンクが生成されること
カテゴリラベルが表示されること

src/components/cheatsheets/__tests__/CodeBlock.test.tsx:

コードが表示されること
コピーボタンが機能すること

Acceptance Criteria

/cheatsheets で一覧ページが表示され、3つのチートシートがカード形式で並ぶ
/cheatsheets/regex, /cheatsheets/git, /cheatsheets/markdown でそれぞれの個別ページが表示される
各ページにBreadcrumb、目次、AiDisclaimerが含まれる
正規表現チートシートから正規表現テスターツールへのリンクがある
MarkdownチートシートからMarkdownプレビューツールへのリンクがある
コードスニペットにコピーボタンがある
関連チートシートへのリンクが各ページに表示される
SEO: 各ページにmeta title/description、OGP、JSON-LD (Article型)、canonical URLが設定されている
ヘッダーナビゲーションに「チートシート」リンクが追加されている
npm run build がエラーなく完了する
全テストがパスする
Constitution Rule 3準拠: AiDisclaimerがすべてのページに表示される

Required Artifacts

新規ファイル:

src/cheatsheets/types.ts
src/cheatsheets/registry.ts
src/cheatsheets/regex/meta.ts
src/cheatsheets/regex/Component.tsx
src/cheatsheets/git/meta.ts
src/cheatsheets/git/Component.tsx
src/cheatsheets/markdown/meta.ts
src/cheatsheets/markdown/Component.tsx
src/app/cheatsheets/page.tsx
src/app/cheatsheets/page.module.css
src/app/cheatsheets/[slug]/page.tsx
src/app/cheatsheets/[slug]/CheatsheetRenderer.tsx
src/components/cheatsheets/CheatsheetLayout.tsx
src/components/cheatsheets/CheatsheetLayout.module.css
src/components/cheatsheets/TableOfContents.tsx
src/components/cheatsheets/TableOfContents.module.css
src/components/cheatsheets/RelatedCheatsheets.tsx
src/components/cheatsheets/RelatedCheatsheets.module.css
src/components/cheatsheets/CheatsheetCard.tsx
src/components/cheatsheets/CheatsheetCard.module.css
src/components/cheatsheets/CheatsheetGrid.tsx
src/components/cheatsheets/CheatsheetGrid.module.css
src/components/cheatsheets/CodeBlock.tsx
src/components/cheatsheets/CodeBlock.module.css
src/cheatsheets/__tests__/registry.test.ts
src/components/cheatsheets/__tests__/CheatsheetCard.test.tsx
src/components/cheatsheets/__tests__/CodeBlock.test.tsx

変更ファイル:

src/lib/seo.ts -- チートシート用SEO関数追加
src/components/common/Header.tsx -- ナビリンク追加

Rollback Approach

チートシートは完全に独立した新規セクションのため、ロールバックは単純。

src/cheatsheets/ ディレクトリを削除
src/app/cheatsheets/ ディレクトリを削除
src/components/cheatsheets/ ディレクトリを削除
src/lib/seo.ts からチートシート関連の関数を削除
Header.tsx のナビリンクを元に戻す

Review Request

上記の実装計画についてレビューをお願いします。特に以下の観点でのフィードバックを求めます:

既存のツールパターンとの一貫性
ファイル構成の網羅性
各チートシートのコンテンツセクション構成の妥当性
受入基準の十分性

Goal

Step-by-step Plan

Step 1: 型定義とレジストリの作成

Step 2: SEOヘルパー関数の追加

Step 3: 共通コンポーネントの作成

Step 4: ルーティングとページの作成

Step 5: 各チートシートのコンテンツ作成

5-1: 正規表現チートシート (src/cheatsheets/regex/)

5-2: Gitコマンドチートシート (src/cheatsheets/git/)

5-3: Markdownチートシート (src/cheatsheets/markdown/)

Step 6: ナビゲーション更新

Step 7: テストの作成

Acceptance Criteria

Required Artifacts

新規ファイル:

変更ファイル:

Rollback Approach

Review Request

5-1: 正規表現チートシート (`src/cheatsheets/regex/`)

5-2: Gitコマンドチートシート (`src/cheatsheets/git/`)

5-3: Markdownチートシート (`src/cheatsheets/markdown/`)