JavaScriptで記事の目次を自動作成する方法

WordPressのブログ記事とかでよく目次を表示しているものをよく見かけます。
WordPressのプラグインやテーマの機能を使うのもよいですが、今回はJavaScriptを使用して見出し「h1~h6」を自動取得して、自動で目次を表示させるプログラムを作ってみました。

オリジナルの作ってみたいという方はカスタマイズしてみてください！

 

JavaScriptで記事の目次を自動作成する方法

今回はJavaScript（バニラJS）で作成するので、jQueryの依存なし、指定の範囲の見出しだけを取得して目次を作成します。

HTMLを作成する

目次を作るものとHTMLを作成します。
今回は、ID「content」内のh1~h6を自動で取得し、目次化します。
各見出しには、ページ内リンクを設定するため必ず別の名前でidを設定してください。

<div id="content">
    <h1 id="ttl01">test01</h1>
    <p>テストです。</p>
    <h2 id="ttl02">test02</h2>
    <p>テストです。</p>
    <h3 id="ttl03">test03</h3>
    <p>テストです。</p>
    <h4 id="ttl04">test04</h4>
    <p>テストです。</p>
    <h5 id="ttl05">test05</h5>
    <p>テストです。</p>
    <h6 id="ttl06">test06</h6>
    <p>テストです。</p>
</div>

目次自動生成 JavaScript

HTMLのid「content」内のh1~h6を自動で全て検出し、id「content」内の一番上に目次を表示するプログラムです。
CSSは当てていないので、好きなようにカスタマイズしてください。

function getHeadingsFromContainer(containerClass) {
    const container = document.querySelector('#content'); // 「#content」を変更することで、別箇所の目次も生成可能です
    const headings = container.querySelectorAll('h1, h2, h3, h4, h5, h6');
    return headings;
}

function createTableOfContents() {
    const tocList = document.getElementById('toc-list');
    const headings = getHeadingsFromContainer('content');

    headings.forEach((heading) => {
        const headingLevel = parseInt(heading.tagName.charAt(1));
        const tocItem = document.createElement('li');
        const tocLink = document.createElement('a');
        tocLink.textContent = heading.textContent;
        tocLink.href = `#${heading.id}`;

        tocItem.appendChild(tocLink);
        tocItem.classList.add(`toc-level-${headingLevel}`);
        tocList.appendChild(tocItem);
    });
}

// 新たに目次のdivを生成する関数
function createTableOfContentsContainer() {
    const tocContainer = document.createElement('div');
    tocContainer.classList.add('toc');

    const tocHeading = document.createElement('h2');
    tocHeading.textContent = '目次';

    const tocList = document.createElement('ul');
    tocList.id = 'toc-list';

    tocContainer.appendChild(tocHeading);
    tocContainer.appendChild(tocList);

    const container = document.querySelector('#content');
    container.insertBefore(tocContainer, container.firstChild);
}

// 目次を生成
document.addEventListener('DOMContentLoaded', () => {
    createTableOfContentsContainer();
    createTableOfContents();
});

目次自動生成 出力サンプル

ページ内リンクも入れて、見出しをクリックすると指定の位置に移動するようにしています。

<div class="toc">
<h2>目次</h2>
<ul id="toc-list">
    <li class="toc-level-2"><a href="#">目次</a></li>
    <li class="toc-level-1"><a href="#ttl01">test01</a></li>
    <li class="toc-level-2"><a href="#ttl02">test02</a></li>
    <li class="toc-level-3"><a href="#ttl03">test03</a></li>
    <li class="toc-level-4"><a href="#ttl04">test04</a></li>
    <li class="toc-level-5"><a href="#ttl05">test05</a></li>
    <li class="toc-level-6"><a href="#ttl06">test06</a></li>
</ul>
</div>