JavaScriptでサイドバーに目次を表示する方法

created 2020/10/24updated 2021/03/06

本記事では、サイドバーで目次を表示する方法を解説しています。JAMStackでブログを作る際に、必要になると思います。参考になれば幸いです。

JavaScriptのコード

本ブログでは、Nuxt.jsを使っているのですが、JavaScriptを使用しているので、基本的な実装方法はどのフレームワークを使用しても変わらないと思います。

js
document.addEventListener("DOMContentLoaded", () => { const article = document.querySelector(".article") const heads = article.querySelectorAll("h1, h2") if (heads && heads.length) { let contents = "" heads.forEach((head, i) => { contents += `<li><a href="#head${i}">${head.textContent}</a></li>` head.innerHTML += `<a id="head${i}"></a>` }) document.querySelector( "#table-of-content" ).innerHTML += `<ol>${contents}</ol>` } })

Window: DOMContentLoaded イベントで、最初の HTML 文書の読み込みと解析が完了を待ってから、Headタグを取得します。

document.querySelector(".article") で記事のセレクタを取得します。

次にarticle.querySelectorAll("h1, h2")h1h2タグを取得しています。

そして、"#table-of-content"にHTMLを挿入しています。

HTMLのコード

html
<div id="table-of-content" />

このようにidを指定していれば、HTMLが挿入されます。

セレクタは、classでもidでも良いと思います。

Vue.jsの場合

mountedの中に、JavaScriptのコードを入れてあげてください。

js
mounted() { // JavaScriptのコード }

createdの中にコードを入れてしまうと、documentが読み込めないので、注意しましょう。