Merge pull request #74 from myoshi2891/dev

IntersectionObserver モックをリファクタリングしテスト安定性を改善

Author: myoshi2891

.claude/skills/fix-mermaid/SKILL.md

@@ -245,6 +245,28 @@ vi.mock("@/components/docs/MermaidDiagram", () => ({
 }));
 ```
 
+### 外側 DOMPurify による過剰サニタイズで図が壊れる（2026年6月追記・QA_Studies 実地）
+
+**症状**: ダークモードでノード内テキストが消える（背景と同化）／矢印・枠線のスタイルが当たらない。構文は正しくブラウザ Console にも構文エラーは出ない。
+
+**根本原因**: `mermaid.render()` の出力 SVG に対し、コンポーネント側で**外側から** `DOMPurify.sanitize(svg, { USE_PROFILES: { svg: true } })` をかけていた。SVG プロファイルは HTML 要素を許可しないため、以下が同時に除去される。
+
+- `htmlLabels: true` のノードラベルは `<foreignObject>` 内の `<div class="nodeLabel">`（＝HTML）として描画される → `div`/`span` が除去され **テキスト消失**。
+- ノード/エッジ/テキストの色を与える `<style>` ブロックが **`<style>` 要素ごと除去** → 色・矢印・枠線が既定（黒）に戻る。
+- `ADD_TAGS: ['style']` を足しても `USE_PROFILES` 制約下では除去が続く。
+
+**恒久対策**:
+
+1. **図表が開発者直書きの静的定数（外部入力なし）なら、外側 DOMPurify は不要・有害**。撤去して `mermaid.render()` の出力をそのまま描画する。XSS 攻撃面が無く、Mermaid v11 は内部に DOMPurify を同梱しているため自前で無害化される。
+2. どうしても外側サニタイズを残すなら `USE_PROFILES: { svg: true }`（HTML を排除するプロファイル）は使わず、`style` タグ＋CSS 内容・`foreignObject`・`div`/`span`・`style`/`class` 属性を明示許可する。ただし CSS 無害化が脆く mermaid 出力変化に弱いため非推奨。
+
+**テストの落とし穴（再発防止）**:
+
+- モックが `<svg><g>ok</g></svg>` のような自明 SVG だと、`<style>` や `<foreignObject>` を含まないため壊れるサニタイズ経路を一度も通らず、**テストが緑のまま本番が壊れる**。モックには必ず `<style>` ブロックと `<foreignObject>` 内 HTML ラベルを含めること。
+- ただし **happy-dom / jsdom は SVG 内 `<style>` 内容や `foreignObject` の HTML 子要素の `DOMParser`/`XMLSerializer` ラウンドトリップを完全再現できない**。ユニットテストでは「`<style>` 要素が除去されないこと」など機械的に確実な差分のみを検証し、色・ラベル文字列の可視性は実ブラウザ（Playwright 等）の目視で担保する。
+
+詳細な解決記録は `docs/archive/MERMAID_TROUBLESHOOTING.md` を参照。
+
 ---
 
 ### Mermaid を諦めて HTML/CSS に置き換えるべきケース

CLAUDE.md

@@ -1,6 +1,6 @@
 # CLAUDE.md
 
-Updated 2026-06-08
+Updated 2026-06-10
 
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
@@ -18,14 +18,14 @@ bun run dev          # 開発サーバー起動（HMR あり）
 bun run build        # 本番ビルド（.next/ へ出力）
 bun start            # ビルド成果物をプロダクションモードで起動
 bun run lint         # ESLint 実行
-bun test             # ユニットテスト (bun test, 149 specs)
+bun test             # ユニットテスト (bun test, 151 specs)
 ```
 
 ### E2E テスト (Playwright)
 
 ```sh
 bun run e2e:install  # 初回のみ: chromium バイナリ取得 (~150 MB)
-bun run e2e          # 全 31 ルートのスモーク E2E (webServer 自動起動)
+bun run e2e          # 全 33 ルートのスモーク E2E (webServer 自動起動)
 bun run e2e:ui       # Playwright UI モードで対話実行
 bun run lhci:autorun # Lighthouse CI 自動実行（本番ビルドの品質予算検証）
 bun run e2e:report   # 直近の HTML レポートを表示
@@ -137,6 +137,9 @@ Next.js App Router 構成:
 - `app/istqb-ct-ste-complete-guide.css` — セキュリティテストエンジニア(CT-STE)ガイド固有スタイル
 - `app/istqb-ct-ste-complete-guide/page.tsx` — セキュリティテストエンジニア(CT-STE)ガイドページ
 - `app/istqb-ct-ste-complete-guide/NavBar.tsx` — CT-STE ページ固有スティッキーナビ（`'use client'`）
+- `app/istqb-ct-game-complete-guide/istqb-ct-game-complete-guide.css` — ゲームテスト(CT-GaMe)ガイド固有スタイル
+- `app/istqb-ct-game-complete-guide/page.tsx` — ゲームテスト(CT-GaMe)ガイドページ
+- `app/istqb-ct-game-complete-guide/NavBar.tsx` — CT-GaMe ページ固有スティッキーナビ（`'use client'`）
 - `app/istqb-ct-pt-complete-guide.css` — パフォーマンステスト(CT-PT)ガイド固有スタイル
 - `app/istqb-ct-pt-complete-guide/page.tsx` — パフォーマンステスト(CT-PT)ガイドページ
 - `app/istqb-ct-pt-complete-guide/NavBar.tsx` — CT-PT ページ固有スティッキーナビ（`'use client'`、`IntersectionObserver` でアクティブリンク制御）
@@ -331,7 +334,7 @@ bun run lint    # ESLint エラーなし
 
 ```text
 コンテキスト:
-- 最新 HEAD: `abf37c8`
+- 最新 HEAD: `fdc0ea1`
 - **新規ガイド追加中**: CT-AuTの移行が完了し、次はCT-GaMeの移行に入ります。
 - 合計 32 ルート（ホーム + 31 ガイド）が Next.js で管理されています。
 - 各種テスト（ユニット、型チェック、ESLint）はすべて最新の構成に同期され、通過しています。

GEMINI.md

@@ -1,6 +1,6 @@
 # Project Overview
 
-Updated 2026-06-08
+Updated 2026-06-10
 
 This project is a Next.js (App Router) web application designed as a comprehensive learning resource and guide for Quality Assurance (QA) and Software Testing. It provides extensive documentation on modern software testing methodologies (Unit, Functional, Integration, E2E, BDD, Security, Accessibility) as well as AI system testing based on ISTQB CT-AI and CT-GenAI standards.
 
@@ -92,9 +92,11 @@ This project is a Next.js (App Router) web application designed as a comprehensi
 - `app/istqb-ct-genai-complete-guide/page.tsx` (GenAIテスト CT-GenAI 完全ガイド、`NavBar.tsx` 付き)
 - `app/istqb-ct-mbt-complete-guide/page.tsx` (モデルベーステスト CT-MBT 完全ガイド、`NavBar.tsx` 付き)
 - `app/istqb-ct-act-complete-guide/page.tsx` (受入テスト CT-AcT 完全ガイド、`NavBar.tsx` 付き)
+- `app/istqb-ct-aut-complete-guide/page.tsx` (自動車ソフトウェアテスター CT-AuT 完全ガイド、`NavBar.tsx` 付き)
 - `app/istqb-ct-mat-complete-guide/page.tsx` (モバイルアプリテスト CT-MAT 完全ガイド、`NavBar.tsx` 付き)
 - `app/istqb-ct-sec-complete-guide/page.tsx` (セキュリティテストガイド、`NavBar.tsx` 付き)
 - `app/istqb-ct-ste-complete-guide/page.tsx` (セキュリティテストエンジニア(CT-STE)ガイド、`NavBar.tsx` 付き)
+- `app/istqb-ct-game-complete-guide/page.tsx` (ゲームテスト CT-GaMe 完全ガイド、`NavBar.tsx` 付き)
 - `app/istqb-ct-pt-complete-guide/page.tsx` (パフォーマンステスト CT-PT 完全ガイド、`NavBar.tsx` 付き)
 - `app/istqb-ct-ut-complete-guide/page.tsx` (ユーザビリティテスト CT-UT 完全ガイド、`NavBar.tsx` 付き)
 - `app/istqb-ct-tas-complete-guide/page.tsx` (テスト自動化戦略 CT-TAS 完全ガイド、`NavBar.tsx` 付き)
@@ -163,6 +165,7 @@ This project is a Next.js (App Router) web application designed as a comprehensi
 | `istqb-ct-mat-complete-guide.html` | `/istqb-ct-mat-complete-guide` | ✅ NavBar + aria-current あり |
 | `istqb-ct-sec-complete-guide.html` | `/istqb-ct-sec-complete-guide` | ✅ NavBar + aria-current あり |
 | `istqb-ct-ste-complete-guide.html` | `/istqb-ct-ste-complete-guide` | ✅ NavBar あり |
+| `istqb-ct-game-complete-guide.html` | `/istqb-ct-game-complete-guide` | ✅ NavBar + aria-current あり |
 | `istqb-ct-tas-complete-guide.html` | `/istqb-ct-tas-complete-guide` | ✅ NavBar あり |
 | `istqb-ct-ut-complete-guide.html` | `/istqb-ct-ut-complete-guide` | ✅ NavBar あり |
 | `istqb-ctal-atlas-complete-guide.html` | `/istqb-ctal-atlas-complete-guide` | ✅ NavBar あり |
@@ -184,9 +187,23 @@ This project is a Next.js (App Router) web application designed as a comprehensi
 
 | ファイル | 予定ルート | 状態 | 備考 |
 |---|---|---|---|
-| `istqb-ct-game-complete-guide.md` | `/istqb-ct-game-complete-guide` | ⏳ 未着手 | HTML版追加済み |
-| `istqb-ct-gt-complete-guide.md` | `/istqb-ct-gt-complete-guide` | ⏳ 未着手 | HTML版未生成 |
+| `istqb-ct-gt-complete-guide.md` | `/istqb-ct-gt-complete-guide` | ⏳ 進行中 | HTML版生成済み、表示調整中 |
 
 ## 既知の留保事項
 
 - `istqb-ctfl-at-complete-guide` と `bdd-testing-guide` / `ai-test-guide` は html-archive/ に元 HTML が存在しない（最初から Next.js で作成）
+- `istqb-ct-aut-complete-guide.html` はリポジトリ内に存在しません（not found）。
+- `istqb-ct-gt-complete-guide.html` は生成済みです。表示崩れや Mermaid の調整を実施中。
+
+## 次回セッションでの再開プロンプト
+
+```text
+コンテキスト:
+- 最新 HEAD: `fdc0ea1`
+- **新規ガイド追加中**: 既存の全 HTML 移行は完了しましたが、新たに CT-AuT, CT-GaMe, CT-GT ガイドが追加されました。
+- 合計 33 ルート（ホーム + 32 ガイド予定）が管理されています。
+- 各種テスト（ユニット、型チェック、ESLint）はすべて最新の構成に同期され、通過しています。
+
+【指示】
+CT-GaMeガイドの移行が完了し、33ルートになりました。次のタスク（CT-GTガイドの移行、またはその他のタスク）について指示を仰ぎます。
+```

README.md

@@ -1,6 +1,6 @@
 # ソフトウェアテスト実施概要
 
-最終更新日: 2026-06-08
+最終更新日: 2026-06-10
 
 本プロジェクトにおいて、システムの品質（正しく動くか・快適に使えるか）を担保するために実施するテスト項目の概要と目的を以下に定義します。
 

app/istqb-ct-game-complete-guide/NavBar.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+/**
+ * Renders a sticky in-page navigation bar that highlights the anchor corresponding to the section currently visible in the viewport.
+ *
+ * The component tracks all `section[id]` elements and applies the `active` CSS class to the matching link so the navigation reflects the user's scroll position.
+ *
+ * @returns The JSX element for the sticky navigation with links to table of contents, chapters, exam, and references; the link for the currently visible section will include the `active` class.
+ */
+export default function NavBar() {
+    const [activeId, setActiveId] = useState('');
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            (entries) => {
+                const visibleEntries = entries.filter((entry) => entry.isIntersecting);
+                if (visibleEntries.length > 0) {
+                    const bestEntry = visibleEntries.reduce((prev, curr) =>
+                        curr.intersectionRatio > prev.intersectionRatio ? curr : prev
+                    );
+                    setActiveId(bestEntry.target.id);
+                }
+            },
+            { rootMargin: '-60px 0px -80% 0px' }
+        );
+
+        const sections = document.querySelectorAll('section[id]');
+        sections.forEach((section) => observer.observe(section));
+
+        return () => observer.disconnect();
+    }, []);
+
+    return (
+        <nav className="sticky-nav sticky z-40" style={{ top: 'calc(60px + var(--disclaimer-height, 0px))' }} aria-label="CT-GaMe セクションナビゲーション">
+            <div className="nav-inner">
+                <span className="nav-logo">&#127918; CT-GaMe</span>
+                <a className={`nav-link ${activeId === 'overview' ? 'active' : ''}`} href="#overview" aria-current={activeId === 'overview' ? 'location' : undefined}>概要</a>
+                <a className={`nav-link ${activeId === 'ch1' ? 'active' : ''}`} href="#ch1" aria-current={activeId === 'ch1' ? 'location' : undefined}>Ch.1</a>
+                <a className={`nav-link ${activeId === 'ch2' ? 'active' : ''}`} href="#ch2" aria-current={activeId === 'ch2' ? 'location' : undefined}>Ch.2 メカニクス</a>
+                <a className={`nav-link ${activeId === 'ch3' ? 'active' : ''}`} href="#ch3" aria-current={activeId === 'ch3' ? 'location' : undefined}>Ch.3 グラフィックス</a>
+                <a className={`nav-link ${activeId === 'ch4' ? 'active' : ''}`} href="#ch4" aria-current={activeId === 'ch4' ? 'location' : undefined}>Ch.4 サウンド</a>
+                <a className={`nav-link ${activeId === 'ch5' ? 'active' : ''}`} href="#ch5" aria-current={activeId === 'ch5' ? 'location' : undefined}>Ch.5 コントローラー</a>
+                <a className={`nav-link ${activeId === 'ch6' ? 'active' : ''}`} href="#ch6" aria-current={activeId === 'ch6' ? 'location' : undefined}>Ch.6 レベル</a>
+                <a className={`nav-link ${activeId === 'ch7' ? 'active' : ''}`} href="#ch7" aria-current={activeId === 'ch7' ? 'location' : undefined}>Ch.7 ローカライズ</a>
+                <a className={`nav-link ${activeId === 'tools' ? 'active' : ''}`} href="#tools" aria-current={activeId === 'tools' ? 'location' : undefined}>ツール</a>
+                <a className={`nav-link ${activeId === 'exam' ? 'active' : ''}`} href="#exam" aria-current={activeId === 'exam' ? 'location' : undefined}>試験対策</a>
+                <a className={`nav-link ${activeId === 'refs' ? 'active' : ''}`} href="#refs" aria-current={activeId === 'refs' ? 'location' : undefined}>参照URL</a>
+            </div>
+        </nav>
+    );
+}