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

このメモはスレッドの一部です。スレッド全体を見る (6件)

調査結果レポート: 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)`	`画像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側のみ修正すればよい。