cheerioを利用して、Next.js (App Router)・Newt製サイトに目次を作成する

cheerio は、Node.js上でjQueryライクなAPIでHTMLをパース・操作できるJavaScriptライブラリです。このチュートリアルでは、cheerioを利用して、Next.js (App Router)・Newtで作られたサイトに、目次を追加する方法を紹介します。

記事内で使用している主なソフトウェアのバージョン

• Next.js（next）: 13.4.6
• cheerio（cheerio）: 1.0.0-rc.12

前提条件

• Next.jsのプロジェクトを作成済みであること

Next.jsのセットアップについて知りたい場合は、以下のドキュメントをご確認ください。

• Next.jsの Getting Started のドキュメント
• NewtとNext.jsを利用してブログを作成する

概要

Newtから返却されるHTMLデータ（リッチテキストフィールド・マークダウンフィールド）の内容をもとに、見出し（h2要素）を抜き出して、目次を作成します。
以下のステップで説明します。

• HTMLデータの見出しにidを設定する
• 目次を作成し、見出しに遷移できるようにする

cheerioをインストールする

まずは、cheerio をインストールします。

## npmを利用している場合
npm install --save cheerio

## yarnを利用している場合
yarn add cheerio

HTMLデータの見出しにidを設定する

ここから、目次を作成したいページを編集していきます。
もともと以下のような投稿詳細ページがあるとし、article.body にリッチテキストフィールドまたはマークダウンフィールドが設定され、HTMLデータが返却されるものとします。

app/articles/[slug]/page.tsx

1import { getArticleBySlug } from '@/lib/newt'
2import styles from '@/app/page.module.css'
3
4type Props = {
5  params: {
6    slug: string
7  }
8}
9
10export default async function Article({ params }: Props) {
11  const { slug } = params
12  const article = await getArticleBySlug(slug)
13  if (!article) return
14
15  return (
16    <main className={styles.main}>
17      <h1>{article.title}</h1>
18      <div dangerouslySetInnerHTML={{ __html: article.body }} />
19    </main>
20  )
21}

ここに、見出しにidを設定する処理を追加していきます。

app/articles/[slug]/page.tsx

1import { load } from 'cheerio'
2import { getArticleBySlug } from '@/lib/newt'
3import styles from '@/app/page.module.css'
4
5type Props = {
6  params: {
7    slug: string
8  }
9}
10
11export default async function Article({ params }: Props) {
12  const { slug } = params
13  const article = await getArticleBySlug(slug)
14  if (!article) return
15
16  const $ = load(article.body) // 1
17  $('h2').each((_, elm) => { // 2
18    const text = $(elm).text() // 3
19    $(elm).contents().wrap(`<a id="${text}" href="#${text}"></a>`) // 4
20  })
21  article.body = $.html() // 5
22
23  return (
24    <main className={styles.main}>
25      <h1>{article.title}</h1>
26      <div dangerouslySetInnerHTML={{ __html: article.body }} />
27    </main>
28  )
29}

処理内容の詳細は以下の通りです。

1. cheerioの load 関数に article.body を渡すことでHTMLのパースを行います
2. $('h2').each((_, elm) => { /* 変換処理 */ }) として、h2要素のみを抽出して順次処理を実行します
3. $(elm).text() として、抽出した要素からテキストコンテンツを取得します
4. 抽出した要素のコンテンツをaタグで囲みます（id属性とhref属性に3で取得したテキストコンテンツを設定します）
   5.$.html()を実行して、パースしたDOMノードを再びHTMLへと変換して article.body に再代入します

これでh2要素のテキストコンテンツをaタグでラップし、idを設定することができました。
以下のように、見出し部分がリンクに変わっていることがわかります。

見出し部分のHTMLは、以下のようになっています。

<h2>
  <a id="ステップ1" href="#ステップ1">ステップ1</a>
</h2>

目次を作成し、見出しに遷移できるようにする

次に目次を作成し、見出しに遷移できるようにしましょう。
以下のコードを追加します。

1（省略）
2
3export default async function Article({ params }: Props) {
4  const { slug } = params
5  const article = await getArticleBySlug(slug)
6  if (!article) return
7
8  const headings: string[] = []
9
10  const $ = load(article.body)
11  $('h2').each((_, elm) => {
12    const text = $(elm).text()
13    headings.push(text)
14    $(elm).contents().wrap(`<a id="${text}" href="#${text}"></a>`)
15  })
16
17  article.body = $.html()
18
19  return (
20    <main className={styles.main}>
21      <h1>{article.title}</h1>
22      <div className={styles.TableOfContents}>
23        <h2>目次</h2>
24        <ul>
25          {headings.map((text, index) => {
26            return (
27              <li key={index}>
28                <a href={`#${text}`}>{text}</a>
29              </li>
30            )
31          })}
32        </ul>
33      </div>
34      <div dangerouslySetInnerHTML={{ __html: article.body }} />
35    </main>
36  )
37}

ここでは以下のことを行っています。

1. h2要素のテキストコンテンツを抽出し、headings という配列を作成しています
2. headings の情報をもとに、リストを作成し、各見出しに対応するアンカーリンクを設定しています

スタイルについて、ここでは styles.TableOfContents で定義していますが、お好みで設定してください。

以下のように、目次が作成されていれば成功です。

まとめ

このようにcheerioを利用することで、jQueryのようなAPIを使いながらHTMLを柔軟に変換することができました。
このチュートリアルではh2要素のみを抽出するシンプルな目次を作成しましたが、複数の要素を指定した目次を作成したり、さらには脚注を作成するといった、さらに踏み込んだカスタマイズもできますので、ぜひトライしてみてください。