【解説】JavaScriptで記事の目次を自動生成する方法

今回の記事では、JavaScriptを使用して、記事の目次を作成するコードを解説します。

実装では、要素の作成・描画などの基本的なDOM操作や、ループ処理を用いています。
もちろん、フレームワークは使用せず、素のJavaScriptを使用しております。

目次について

サイト(記事)に訪問したユーザーは、目次によってそのページの全体像を把握することができ、
ページ内リンクで該当のコンテンツまで移動できるという観点から、ユーザービリティ向上の手法として使われています。

当ブログの場合、下記のようなイメージでサイドナビ(右側)に配置しています。

実装

実際にこれらの目次を生成するコードについて解説していきます。

まずは、下記のCodePenでイメージや動作をご確認ください。
タイトルレベルが分かる様に色分けをしております。

See the Pen JavaScriptで目次を自動生成 by waibandl321 (@JumCode) on CodePen.

JavaScript

目次のHTMLの生成などもJavaScriptで行っているので、JSに焦点を絞って解説していきます。
HTMLやCSSをCodePenで確認しながら、解説を読むと理解しやすいです。

const contents = document.querySelector('.contents');
const outline = document.querySelector('.outline');
let a_id;

// hタグを取得
const head_tags = contents.querySelectorAll('h2, h3');

head_tags.forEach(function(element, index) {

    const title = element.textContent;

    // DOMの作成
    const ul = document.createElement('ul');
    const li = document.createElement('li');
    const a = document.createElement('a');

    element.setAttribute('id', 'content_0' + index);
    if(element.tagName == 'H2') {
        li.classList.add('outline_level_0');
    } else if(element.tagName == 'H3') {
        li.classList.add('outline_level_1');
    }

    // 描画
    outline.appendChild(ul);
    ul.appendChild(li);
    li.appendChild(a);
    a.textContent = title;
    a.setAttribute('href', '#content_0' + index);
});

処理の流れは以下の順序になります。

1. コンテンツ要素と目次要素を定数で定義する(const contents = …)
2. コンテンツ内の全てのhタグを取得する(const head_tags =…)
3. ループ処理の中で、タイトル要素のテキストコンテンツを取得(const title = …)
4. ループ処理の中で、element.tagNameでタグの種類を判定し、h2, h3に応じてclassを付与する(if(element.tagName ==…)
5. DOMを描画する(outline.appendChild(ul);~)
6. CSSでネストのスタイル調整

上記のコードだと、ループのネストも発生せず、シンプルに実装できるのではないかと思います。
参考になりましたら幸いです。

関連記事

【JavaScript】複数の要素の高さを統一する方法