Editor.jsとcheerioを使用した目次の自動生成方法

Editor.jsを使用する中で目次を自動生成する必要があったので、その方法を備忘録としてまとめます。

必要なライブラリのインストール

editorjs-htmlとcheerioのインストール

• editorjs-html：Editor.jsの出力データをHTML形式に変換するライブラリ
• cheerio：HTML構文を解析するライブラリ

以下のコマンドでインストールします。

npm install editorjs-html cheerio

Editor.jsのデータをHTMLに変換

まず、Editor.jsの出力データをHTML形式に変換します。

import edjsHTML from "editorjs-html";
import * as cheerio from "cheerio";

/**
 * Editor.jsの出力データを代入した変数
 */
const editorData = {
    "time" : 1550476186479,
    "blocks" : [
        {
            "id": "32D3C7CD",
            "type" : "paragraph",
            "data" : {
                "text" : "段落"
            }
        },
        {
            "id": "9CDF4837",
            "type" : "header",
            "data" : {
                "text" : "見出し1",
                "level" : 1
            }
        },
        {
            "id": "5DADBAA3",
            "type" : "paragraph",
            "data" : {
                "text" : "段落1"
            }
        },
        {
            "id": "F59F28AD",
            "type" : "header",
            "data" : {
                "text" : "見出し2",
                "level" : 1
            }
        },
        {
            "id": "8B2BC734",
            "type" : "paragraph",
            "data" : {
                "text" : "段落2"
            }
        }
    ],
    "version" : "2.8.1"
};

const edjsParser = edjsHTML();

/**
 * HTML形式に変換
 * 配列形式で代入されます
 */
let html = edjsParser.parse(editorData);

htmlから目次を作成

次に、変換したHTMLから目次を作成します。

/**
 * cheerioライブラリにhtmlを読み込ませる
 */
const $ = cheerio.load(html.join(''));

/**
 * 読み込ませたhtmlからh1タグを抜き出す
 */
// const headings = $('h1, h2, h3').toArray(); // h2タグとh3タグまで抜き出したい場合
const headings = $('h1').toArray();

/**
 * 目次データを作成
 */
const tocs = headings.map(data => ({
    id: data.attribs.id,
    text: data.children[0].data,
}));

このコードにより、以下のような目次データが生成されます。

[
    { id: "5DADBAA3", text: "見出し1"},
    { id: "8B2BC734", text: "見出し2"}
]

目次をプレビュー

最後に、目次データを元にHTMLを作成します。以下はVue.jsを使用した例です。

<ul class="tocs">
    <li v-for="toc in tocs" :key="toc.id" class="toc">
        <!-- ページ内リンクでaタグを設定 -->
        <a :href="`#${toc.id}`">
            {{ toc.text }}
        </a>
    </li>
</ul>

まとめ

目次データを配列で作成するだけでなく、createElementを使用してDOMを作成し、appendChildで特定のDOMに代入することも可能です。用途に応じてカスタマイズしてください。

参考

• microCMSで目次を作成する
• Node.js(cheerio) を使ってスクレイピング
• WEBスクレイピング入門(TypeScript)

以上がEditor.jsとcheerioを使用した目次の自動生成方法です。ぜひ参考にしてください。