[no_toc]
目次
はじめに
当記事の目的
ブログなどの記事で目次があると記事の全体像がわかりやすいですよね。
特に長い記事だと目次があると助かりますよね。
今回はそんな便利な目次を自動作成してくれるJavaScriptを紹介し、
簡単に目次を作れるようになってもらいます。
目次のサンプル
実際に作成された目次のサンプルを当記事にも反映してみました。
記事の一番上部にあるのがJavaScriptで自動作成した目次です。
（いつも私が書く記事ではこんなに章分けをしませんが、今回は例として多めに分けています。。。）
見出しタグから目次を作成する方法
見出しタグから目次を作成する方法として、JavaScriptを用います。
JavaScriptを使用して記事中の見出しタグ（h2タグ、h3タグ）を抽出し、それぞれの内容から目次を自動作成します。
実際に作成したJavaScriptのコード
以下に見出しタグから目次を自動生成するJavaScriptのコードを記載しました。
File: create-toc.html
---------------------
<!-- 目次を作成する先 -->
<div id="toc"></div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var contentsList = document.getElementById('toc'); // 目次を追加する先(table of contents)
var div = document.createElement('div'); // 作成する目次のコンテナ要素
// .entry-content配下のh2、h3要素を全て取得する
var matches = document.querySelectorAll('.entry-content h2, .entry-content h3');
// 取得した見出しタグ要素の数だけ以下の操作を繰り返す
matches.forEach(function (value, i) {
// 見出しタグ要素のidを取得し空の場合は内容をidにする
var id = value.id;
if(id === '') {
id = value.textContent;
value.id = id;
}
// 要素がh2タグの場合
if(value.tagName === 'H2') {
var ul = document.createElement('ul');
var li = document.createElement('li');
var a = document.createElement('a');
// 追加する<ul><li><a>タイトル</a></li></ul>を準備する
a.innerHTML = value.textContent;
a.href = '#' + value.id;
li.appendChild(a)
ul.appendChild(li);
// コンテナ要素である<div>の中に要素を追加する
div.appendChild(ul);
}
// 要素がh3タグの場合
if(value.tagName === 'H3') {
var ul = document.createElement('ul');
var li = document.createElement('li');
var a = document.createElement('a');
// コンテナ要素である<div>の中から最後の<li>を取得する。
var lastUl = div.lastElementChild;
var lastLi = lastUl.lastElementChild;
// 追加する<ul><li><a>タイトル</a></li></ul>を準備する
a.innerHTML = value.textContent;
a.href = '#' + value.id;
li.appendChild(a)
ul.appendChild(li);
// 最後の<li>の中に要素を追加する
lastLi.appendChild(ul);
}
});
// 最後に画面にレンダリング
contentsList.appendChild(div);
});
</script>
コードの説明
jQueryなどは使わずに純粋なJavaScriptで動くように書きました。なので、外部ライブラリは特に必要ではありません。
また、JavaScirptがわからないよって人でも、何らかのコードを読める人であれば解読できるように多めにコメントをつけておきました。
コメントを読んでもらえればやっていることはわかると思います。
必要であればコピペして適宜アレンジして使ってください。
簡単なコードの流れは以下となっています。
- 記事中のh2、h3タグを抽出する
-
抽出したタグ毎に目次の項目を作成していく
- aタグで見出しタグに飛べるように見出しにidを設定する
- 目次にaタグ要素を追加する
- 作成した目次を記事にレンダリング（表示）する
目次自動作成のJavaScriptで出来ること
紹介したJavaScriptで出来ること
紹介したJavaScriptを用いれば、記事内のh2とh3タグを自動で探してそれぞれの内容を元に目次を作成します。
作成する際はaタグを利用し、クリックすれば該当の見出しタグに飛ぶようにしてあります。
なお、そのために見出しタグ(h2、h3タグ)でidを持っていないものへは自動でidを付与しています。
また、作成される目次はh2タグとh3タグの見出しで入れ子になるようしてあるので、記事の階層がわかるようになっています。
紹介したJavaScriptの使い方
今回紹介したJavaScriptは以下の手順でご利用ください。
-
JavaScript（
<script>〜</script>）を記事内の一番下にコピペする -
目次が生成される先として
<div id="toc"></div>を設置する
なお、JavaScriptでh2タグ、h3タグを探す際に.entry-contentclass配下の見出しタグを探すように設定しているので、
適宜修正してご利用ください。
（私ははてなブログでブログを書いているので、.entry-contentclass配下を探す設定にしています。）
該当のコードは以下となります。
var matches = document.querySelectorAll('.entry-content h2, .entry-content h3');
おわりに
今回は見出しタグから自動で目次を作成するJavaScriptについて紹介しました。
HTMLから自動で目次を作成したい場合には使えると思うので、是非ご利用ください。