前提

現在、Next.jsとSupabaseを使って自作CMSを開発しています。
今回記事の目次が欲しかったので、rehypeプラグインを使ってCMSの目次を自動生成する機能を追加しました。

完成図はこんな感じです。

開発環境

TypeScript 5.x
Supabase（データベース・ストレージ）
Tailwind CSS 3.x + @tailwindcss/typography
ReactMarkdown 9.x
rehype-slug / rehype-autolink-headings などのrehype系プラグイン

rehypeとは何か

rehype は、HTMLを構文木（AST）として扱い、プラグインで自由に加工できる仕組みです。MarkdownをHTMLに変換した後、そのHTMLに対して追加処理を行いたいときに使われます。

Markdown変換の流れ

Markdown
  ↓
remark（Markdown構文を解析）
  ↓
rehype（HTML構文を解析・加工）
  ↓
HTML / React要素として出力

rehypeプラグインの代表例

プラグイン名	役割	主な用途
rehype-slug	見出しタグに自動で `id` を付与	目次やリンクジャンプ
rehype-autolink-headings	見出しを自動でリンク化	Qiita・Zennのような構成
rehype-highlight	コードブロックのシンタックスハイライト	技術記事での装飾
rehype-sanitize	不正なHTMLを除去	セキュリティ対策

目次を自動生成する仕組みにどう使うか

rehype自体はHTMLにidを付与するだけですが、この情報を利用すれば、Markdown本文から見出しを抽出し、目次を自動生成することができます。

// Markdown本文から見出し（##, ###）を抽出して配列で返す関数
export function extractHeadings(markdown: string) {

  // ## または ### に続くテキストを取得するための正規表現
  // ^       ：行頭から始まる
  // (#{2,3})：#が2〜3個（つまりh2かh3）
  // \s+      ：空白を1つ以上
  // (.*)     ：見出しの本文
  // gm       ：複数行（g）かつ行単位（m）で検索
  const regex = /^(#{2,3})\s+(.*)$/gm;

  // 見出しを格納する配列
  const headings = [];

  // 1件ずつマッチング結果を取得
  let match;
  while ((match = regex.exec(markdown)) !== null) {

    // match[1] → "#"の数（見出しレベル）
    // match[2] → 見出しテキスト
    headings.push({
      level: match[1].length,              // #の数（2ならh2, 3ならh3）
      text: match[2],                      // 見出しテキスト本体
      id: match[2].replace(/\s+/g, "-"),   // スペースをハイフンに変換してid化
    });
  }

  // 抽出した見出しデータを返す
  // 例: [{ level: 2, text: "概要", id: "概要" }]
  return headings;
}

このように見出しを抽出すれば右側に自動で目次を描画できます。

まとめ

rehypeはHTML構文木を扱うための変換層
remarkがMarkdownを解析し、rehypeがHTMLを加工
ReactMarkdownでは、rehypeプラグインを通じて出力を自在にカスタマイズできる
rehype-slug と rehype-autolink-headings の組み合わせで、見出しリンクや目次生成を自動化可能

rehypeの仕組みを理解すると、MarkdownベースのCMSや技術ブログをより拡張性高く設計できるようになります。