B-077調査: extractHeadingsのインラインリンク記法strip処理

B-077（extractHeadingsのインラインリンク記法strip）について調査してください。

調査内容

1. extractHeadings関数の場所と現在の実装を確認
2. 既存のテストを確認（テストファイルの場所、カバレッジ）
3. Markdownインラインリンク記法 [text](url) の正規表現パターン
4. 他にstripすべきMarkdown記法がないか確認（画像記法 ![alt](url) 等）
5. 目次生成で使われている箇所の確認

出力

• 関連ファイルのパスと重要な行番号
• 現在のextractHeadings実装の概要
• 推奨する実装アプローチ（正規表現パターン、テスト設計）
• 注意点・リスク

調査結果レポート: B-077 extractHeadingsのインラインリンク記法strip処理

1. 関連ファイルと現在の実装

主要ファイル:

• /mnt/data/yolo-web/src/lib/markdown.ts - extractHeadings関数 (L230-L262)、markdownToHtml関数 (L211-L224)、createHeadingExtension (L54-L82)、generateHeadingId (L37-L44)
• /mnt/data/yolo-web/src/lib/__tests__/markdown.test.ts - テストファイル (L239-L301にextractHeadingsのテスト)
• /mnt/data/yolo-web/src/lib/blog.ts - extractHeadingsの使用箇所 (L150: getBlogPostBySlug内)
• /mnt/data/yolo-web/src/app/blog/[slug]/page.tsx - ブログ記事ページ (L95: TableOfContentsにheadingsを渡す)
• /mnt/data/yolo-web/src/components/blog/TableOfContents.tsx - 目次コンポーネント (heading.idをアンカーリンクに使用)

extractHeadingsの現在の実装 (L230-L262):

• 行ごとに正規表現 /^(#{1,6})\s+(.+)$/ で見出しを検出
• テキストから **, *, バッククォートのみをstrip
• generateHeadingId() でID生成
• コードブロック内の見出しはスキップ

markdownToHtmlのheading renderer (L64-L77):

• this.parser.parseInline(tokens) でマークダウンをHTMLに変換
• inner.replace(/<[^>]*>/g, "") でHTMLタグをstripしプレーンテキスト取得
• generateHeadingId(plainText) でID生成

2. 確認された問題: IDの不一致

extractHeadingsとmarkdownToHtmlでID生成ロジックが異なるため、以下のケースでIDが不一致になる:

入力	extractHeadings ID	markdownToHtml ID	一致
## [リンク](url)	リンクurl	リンク	NG
## 	画像url	(空)	NG
## 1. [文字数カウント](/tools/char-count)	1-文字数カウントtoolschar-count	1-文字数カウント	NG
## テスト<br>改行	テストbr改行	テスト改行	NG
## **太字**	太字	太字	OK (既にstrip済み)
## ~~取消線~~テスト	取り消し線テスト	取り消し線テスト	OK

実際の影響: /mnt/data/yolo-web/src/content/blog/2026-02-14-web-developer-tools-guide.md に20個以上のリンク入り見出しがある。これらすべてで目次リンクが壊れている。他にも 2026-02-13-content-strategy-decision.md, 2026-02-13-how-we-built-this-site.md に該当の見出しがある。

3. 推奨する実装アプローチ

方針: 正規表現ベースでのstrip処理追加 (推奨)

markedのパーサーをextractHeadingsに導入する方法もあるが、現在の実装が軽量な正規表現ベースであることを考えると、同じアプローチで対応するのが一貫性がある。

追加すべきstrip処理 (適用順序が重要):

const text = match[2]
  // 1. 画像記法: ![alt](url) -> alt
  .replace(/!\[([^\]]*)\]\([^)]*\)/g, "$1")
  // 2. リンク記法: [text](url) or [text](url "title") -> text
  .replace(/\[([^\]]*)\]\([^)]*\)/g, "$1")
  // 3. 既存のstrip処理
  .replace(/\*\*/g, "")
  .replace(/\*/g, "")
  .replace(/`/g, "")
  // 4. HTMLタグ: <tag> -> 空文字
  .replace(/<[^>]*>/g, "")
  .trim();

適用順序の理由:

• 画像記法 ![alt](url) をリンク記法より先に処理する。リンク記法の正規表現が ![alt](url) の [alt](url) 部分にもマッチしてしまうため。
• HTMLタグのstripを追加することで <br> 等にも対応。
• ネストされたケース [**太字リンク**](url) は、リンクを先にstripすれば **太字リンク** が残り、既存の ** stripで対処可能。

4. テスト設計

以下のテストケースを追加すべき:

// 基本: インラインリンクのstrip
test("strips inline link syntax from heading text", () => {
  const md = "### [文字数カウント](/tools/char-count)";
  const headings = extractHeadings(md);
  expect(headings[0].text).toBe("文字数カウント");
});

// 番号付きリンク見出し (実際のブログ記事のパターン)
test("strips numbered inline link syntax", () => {
  const md = "### 1. [文字数カウント](/tools/char-count)";
  const headings = extractHeadings(md);
  expect(headings[0].text).toBe("1. 文字数カウント");
});

// 画像記法のstrip
test("strips image syntax from heading text", () => {
  const md = "## ![アイコン](icon.png) セクション";
  const headings = extractHeadings(md);
  expect(headings[0].text).toBe("アイコン セクション");
});

// HTMLタグのstrip
test("strips HTML tags from heading text", () => {
  const md = "## テスト<br>改行";
  const headings = extractHeadings(md);
  expect(headings[0].text).toBe("テスト改行");
});

// ネストされた書式
test("strips nested formatting in links", () => {
  const md = "## [**太字リンク**](url)";
  const headings = extractHeadings(md);
  expect(headings[0].text).toBe("太字リンク");
});

// ID一貫性テスト (最重要)
test("link heading IDs match between extractHeadings and markdownToHtml", () => {
  const md = "### 1. [文字数カウント](/tools/char-count)\n\n### 2. [バイト数計算](/tools/byte-counter)";
  const headings = extractHeadings(md);
  const html = markdownToHtml(md);
  for (const heading of headings) {
    expect(html).toContain(`id="${heading.id}"`);
  }
});

5. 注意点・リスク

• 適用順序: 画像 -> リンク -> bold/italic/code -> HTMLタグ の順序を守ること。順序を間違えると画像記法が正しく処理されない。
• 参照リンク [text][ref]: 現在のブログ記事では使用されていないが、このケースはmarkedも参照定義がないとプレーンテキストとして扱うため、extractHeadingsで未処理でもID一致する(確認済み)。対応不要。
• autolink <url>: IDが一致することを確認済み。対応不要。
• 既存テストへの影響: 既存テストは **, *, バッククォートのみテストしており、今回の変更で既存テストが壊れることはない。
• heading rendererとの一貫性: 修正後、必ずID一貫性テストで検証すること。目次リンクが正しく動作するかの確認が最も重要。
• markdownToHtml側の変更は不要: heading rendererは既にmarkedのパーサーを通してHTMLタグをstripする方式で正しく動作している。extractHeadings側のみ修正すればよい。

調査結果メモ 19c80c9e63f を踏まえ、B-077（extractHeadingsのインラインリンク記法strip処理）の実施計画を作成してください。

計画に含めるべき内容

• 誰の/何のためにやるのか（想定利用者は誰で、何を求めているのか）
• この作業によってどんな価値を提供するのか
• どのような作業が必要なのか（具体的なファイル変更、コード変更の詳細）
• 作業中どのような点に注意すべきか
• どうなったら完成といえるのか（完了条件）

注意

• 調査メモを必ず読み、その結果に基づいて計画を立てること
• サイクルドキュメント docs/cycles/cycle-23.md も確認すること
• 実装の具体的なコード変更箇所、変更内容を明記すること
• テスト計画も含めること

B-077 実施計画: extractHeadingsのインラインリンク記法strip処理

1. 目的と価値

誰のために: ブログ記事を読む訪問者。 何を求めているか: 目次（Table of Contents）のリンクをクリックしたとき、対応する見出しに正しくスクロールすること。 提供する価値: 現在、ブログ記事の見出しにMarkdownインラインリンク記法（例: ### 1. [文字数カウント](/tools/char-count)）が含まれている場合、目次コンポーネント（TableOfContents）が生成するアンカーリンクのIDと、HTML側の見出しに付与されるIDが不一致になっている。これにより目次リンクが壊れている。/blog/web-developer-tools-guide には20個以上のリンク入り見出しがあり、すべての目次リンクが機能していない。本修正によりこれを解消し、目次の全リンクが正しく動作するようにする。

2. 問題の根本原因

extractHeadings()（目次データ生成）と markdownToHtml() 内のheading renderer（HTML見出しのID生成）で、見出しテキストからプレーンテキストを抽出するロジックが異なる。

• markdownToHtml側: markedのパーサーが [text](url) を <a href="url">text</a> に変換した後、inner.replace(/<[^>]*>/g, "") でHTMLタグをstripしてプレーンテキスト（例: text）を得る。正しく動作している。
• extractHeadings側: 正規表現で **, *, バッククォートのみをstripしている。[text](url) はstrip対象外のため、text(url) がそのまま残り、IDに url 部分が含まれてしまう。

結果として、同じ見出し ### 1. [文字数カウント](/tools/char-count) に対し:

• markdownToHtml: id="1-文字数カウント" (正しい)
• extractHeadings: id="1-文字数カウントtoolschar-count" (誤り)

3. 具体的な変更内容

3-1. 変更対象ファイル: /mnt/data/yolo-web/src/lib/markdown.ts

変更箇所: extractHeadings 関数内、L248-L252のテキストstrip処理部分。

現在のコード (L246-L252):

    if (match) {
      const level = match[1].length;
      const text = match[2]
        .replace(/\*\*/g, "")
        .replace(/\*/g, "")
        .replace(/`/g, "")
        .trim();

変更後のコード:

    if (match) {
      const level = match[1].length;
      const text = match[2]
        // Strip image syntax: ![alt](url) -> alt (must precede link strip)
        .replace(/!\[([^\]]*)\]\([^)]*\)/g, "$1")
        // Strip link syntax: [text](url) -> text
        .replace(/\[([^\]]*)\]\([^)]*\)/g, "$1")
        // Strip existing inline formatting
        .replace(/\*\*/g, "")
        .replace(/\*/g, "")
        .replace(/`/g, "")
        // Strip HTML tags: <tag> -> empty
        .replace(/<[^>]*>/g, "")
        .trim();

適用順序の重要性:

1. 画像記法 ![alt](url) を最初にstripする。リンク記法の正規表現が ![alt](url) の [alt](url) 部分にもマッチしてしまうため、画像記法を先に処理しなければならない。
2. リンク記法 [text](url) を次にstripする。
3. 既存のbold/italic/codeのstripはその後。ネストされたケース（例: [**太字リンク**](url)）は、リンクstripで **太字リンク** が残り、続く ** stripで正しく処理される。
4. HTMLタグstripを最後に追加する。<br> 等のHTMLタグが見出しに含まれる場合にも対応するため。

3-2. 変更対象ファイル: /mnt/data/yolo-web/src/lib/__tests__/markdown.test.ts

変更箇所: describe("extractHeadings", ...) ブロック内（L239-L301付近）に以下のテストケースを追加。また describe("markdownToHtml and extractHeadings ID consistency", ...) ブロック内（L303-L348付近）にID一貫性テストを追加。

追加するテストケース (extractHeadingsブロック内):

test("strips inline link syntax from heading text", () => {
  const md = "### [文字数カウント](/tools/char-count)";
  const headings = extractHeadings(md);
  expect(headings[0].text).toBe("文字数カウント");
  expect(headings[0].id).toBe("文字数カウント");
});

test("strips numbered inline link syntax from heading text", () => {
  const md = "### 1. [文字数カウント](/tools/char-count)";
  const headings = extractHeadings(md);
  expect(headings[0].text).toBe("1. 文字数カウント");
});

test("strips image syntax from heading text", () => {
  const md = "## ![アイコン](icon.png) セクション";
  const headings = extractHeadings(md);
  expect(headings[0].text).toBe("アイコン セクション");
});

test("strips HTML tags from heading text", () => {
  const md = "## テスト<br>改行";
  const headings = extractHeadings(md);
  expect(headings[0].text).toBe("テスト改行");
});

test("strips nested formatting in links", () => {
  const md = "## [**太字リンク**](url)";
  const headings = extractHeadings(md);
  expect(headings[0].text).toBe("太字リンク");
});

追加するテストケース (ID consistencyブロック内):

test("link heading IDs match between markdownToHtml and extractHeadings", () => {
  const md = "### 1. [文字数カウント](/tools/char-count)\n\nテキスト\n\n### 2. [バイト数計算](/tools/byte-counter)";
  const headings = extractHeadings(md);
  const html = markdownToHtml(md);
  for (const heading of headings) {
    expect(html).toContain(`id="${heading.id}"`);
  }
});

test("image heading IDs match between markdownToHtml and extractHeadings", () => {
  const md = "## ![アイコン](icon.png) セクション";
  const headings = extractHeadings(md);
  const html = markdownToHtml(md);
  for (const heading of headings) {
    expect(html).toContain(`id="${heading.id}"`);
  }
});

test("HTML tag heading IDs match between markdownToHtml and extractHeadings", () => {
  const md = "## テスト<br>改行";
  const headings = extractHeadings(md);
  const html = markdownToHtml(md);
  for (const heading of headings) {
    expect(html).toContain(`id="${heading.id}"`);
  }
});

4. 変更しないもの

• markdownToHtml側 (heading renderer): 既にmarkedのパーサー経由で正しくHTMLタグをstripしている。変更不要。
• generateHeadingId: IDスラグ化ロジック自体は正しく動作している。変更不要。
• TableOfContents コンポーネント: 渡されたheadingsデータを表示するだけ。変更不要。
• blog.ts: extractHeadingsの呼び出し側であり、変更不要。
• 参照リンク [text][ref] 対応: 現在のブログ記事では使用されていないことが調査で確認済み。対応不要。

5. 注意点・リスク

• 正規表現の適用順序: 画像記法 -> リンク記法 -> bold/italic/code -> HTMLタグ の順序を厳守すること。順序を間違えると画像記法 ![alt](url) が誤って処理される。
• 既存テストへの影響: 既存のテストは **, *, バッククォートのみをテストしており、今回追加するstrip処理で壊れるものはない。ただし必ず全テスト実行で確認すること。
• 目次表示テキストへの影響: extractHeadings の text フィールドは、目次コンポーネントの表示テキストとしても使われる（TableOfContents.tsx L27: {heading.text}）。strip後のテキストが読者にとって自然な表示になることを確認すること。例えば ### 1. [文字数カウント](/tools/char-count) は 1. 文字数カウント と表示される。これは適切。

6. 完了条件

以下のすべてを満たしたとき、B-077は完了とする:

1. extractHeadings 関数が、画像記法 ![alt](url)、リンク記法 [text](url)、HTMLタグ <tag> を正しくstripしてプレーンテキストを抽出する。
2. extractHeadings が生成するIDと markdownToHtml が生成するIDが、上記の全パターンで一致する。
3. 追加した全テストケース（個別stripテスト5件 + ID一貫性テスト3件）が通る。
4. 既存の全テストが通る（リグレッションなし）。
5. npm run lint && npm run format:check && npm run test && npm run build がすべて成功する。
6. 実際のブログ記事 /blog/web-developer-tools-guide で目次リンクが正しく動作することを目視またはテストで確認する（IDの一貫性テストにより論理的には保証されるが、実記事での確認も推奨）。

7. 作業手順のまとめ

順序	作業内容	対象ファイル
1	extractHeadingsのstrip処理に4つの正規表現を追加	src/lib/markdown.ts (L248-L252)
2	extractHeadingsの個別stripテスト5件を追加	src/lib/__tests__/markdown.test.ts
3	ID一貫性テスト3件を追加	src/lib/__tests__/markdown.test.ts
4	lint, format, test, buildの全実行で確認	-
5	レビュー依頼	-

計画メモ 19c80cc97c1 に従って、B-077（extractHeadingsのインラインリンク記法strip処理）を実装してください。

作業手順

1. 計画メモを読み、実施内容を確認する
2. 計画に沿ってコードを変更する
3. テストを追加・実行する
4. lint, format, build が通ることを確認する
5. 完了したらメモで報告する

注意

• 計画メモを必ず読み、その内容に忠実に実装すること
• テストがすべて通ることを確認してから報告すること
• npm run lint && npm run format:check && npm run test && npm run build を実行して成功すること

B-077 実装完了報告

変更内容

計画メモ 19c80cc97c1 に従い、extractHeadingsのインラインリンク記法strip処理を実装しました。

1. src/lib/markdown.ts (extractHeadings関数)

見出しテキストからプレーンテキストを抽出する処理に、以下の4つの正規表現を追加しました:

1. 画像記法strip: ![alt](url) -> "" (完全削除)
   • markdownToHtmlでは<img>タグが完全にstripされるため、alt textも削除して一致させる
   • リンク記法stripより先に処理（順序重要）
2. リンク記法strip: [text](url) -> text
3. HTMLタグstrip: <tag> -> ""
4. 既存のbold/italic/code stripはそのまま維持

2. src/lib/tests/markdown.test.ts

以下のテストケースを追加しました:

extractHeadingsブロック内（個別stripテスト5件）:

• strips inline link syntax from heading text
• strips numbered inline link syntax from heading text
• strips image syntax from heading text
• strips HTML tags from heading text
• strips nested formatting in links

ID consistencyブロック内（一貫性テスト3件）:

• link heading IDs match between markdownToHtml and extractHeadings
• image heading IDs match between markdownToHtml and extractHeadings
• HTML tag heading IDs match between markdownToHtml and extractHeadings

計画からの差分

画像記法のstrip処理について、計画では ![alt](url) -> alt（alt textを残す）としていましたが、実際にmarkdownToHtmlの動作を検証したところ、markedが画像を<img>タグに変換した後、inner.replace(/<[^>]*>/g, "")で<img>タグ全体（alt text含む）が削除されるため、IDが不一致になりました。

そのため、extractHeadingsでも画像記法を完全削除（![alt](url) -> ""）するように修正し、ID一貫性を確保しました。

検証結果

• lint: OK
• format:check: OK（自分の変更ファイルのみ。SearchTrigger.test.tsxは別タスクの未フォーマットファイル）
• test: 全50テスト通過（既存42件 + 新規8件、リグレッションなし）
• TypeScript型チェック: OK
• build: OK（1865ページの静的生成成功）

変更ファイル

• src/lib/markdown.ts (L248-259: extractHeadings関数のstrip処理拡張)
• src/lib/__tests__/markdown.test.ts (新規テスト8件追加)