目次の自動生成ができるJavaScriptライブラリ5選

table-of-contents-js-libraries

ブログ記事等に目次を設置すると、読者にとって読みやすい構造を作ることができます。記事ごとに手で目次を書くのは非効率なので、普通は記事の内容から自動生成します。サーバーサイドで生成しても良いのですが、諸々の理由でクライアントサイドで目次を生成したくなることがあります。今回はJavaScriptで目次を生成するライブラリを調べたのでまとめていこうと思います。

この記事は2019年の4月時点で書いています。今後ライブラリのアップデート等によって記事内容との相違点が出るかもしれないので、注意してください。

このtocbotは今回紹介するライブラリの中でもおすすめのひとつです。JQueryなどに依存せず、クリーンなJavaScriptのみで動作します。

tocbotはユーザのスクロール動作に応じてclass属性値をhtmlに自動で追加してくれます。これにより、ユーザーが見ている場所に応じて目次をハイライトする等の処理がしやすくなります。他のライブラリと比べて嬉しいのは、activeな項目の他にis-collapsibleな項目も属性として追加してくれることです。これによって、「ユーザーが見ているセクションのサブセクションのみを目次欄に表示する」ことが容易にできます(公式のデモページを見るとわかりやすいです)。今回いろいろなライブラリを調べた結果、JavaScriptの目次生成ライブラリはあまりメンテナンスされていないものが多いことがわかったのですが、このライブラリは比較的最近でも開発が続けられているようです。

contentsは比較的最近まで更新が行われている目次生成ライブラリのひとつです。tocbotと同様におすすめです。JQueryなどの外部ツールに依存せずに使用することができます。tocbotはclass属性値を自動で追加・削除しますが、このライブラリではスクロールに応じてchangeイベントを発火させるような設計になっています。そのため、changeイベントのフック関数にtocbotと同等の属性値を追加するような処理を記述することもできますし、もちろん別の処理を登録することもできます。

tocifyは前述のtocbotが最も影響を受けたライブラリです。現時点では、この記事で紹介するものの中で最もGitHubのスター数が多いです。しかし、開発自体は6年ほど前から止まってしまっているようです。JQueryとJQuery UIに依存しているため、tocify単体では動作しません。印象としては、tocbotが上位互換という感じなので特に理由がなければそちらを使うことを推奨します。

TOCはtocbotと同様に直近でも開発が行われている目次生成ライブラリです。tocbotと同じようにスクロール位置に応じて目次にclass属性値を追加してくれます。しかし、現時点ではcollapsibleな要素は教えてくれないようです。JQueryに依存しているため、JQueryを使いたくないような場合には選択することはできません。

TocJSも目次生成のためのライブラリのひとつです。JQueryプラグインとして提供されています。スター数は他と比べると少なく、メンテナンスも数年間されていないようです。目次のインデックス(1, 2, 3,…やi, ii, iii, …など)を自由度高く指定できるのは良い点だなと思います。見ているセクションの検知をするにはBootstrap ScrollSpyなどの外部ツールを使ってくれとのことです。


この記事ではJavaScriptの目次生成ライブラリを調べた結果をまとめてみました。結論としては、tocbotかcontentsを使用すると良いかなと思います。