今回の記事では、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);
});処理の流れは以下の順序になります。
- コンテンツ要素と目次要素を定数で定義する(const contents = …)
- コンテンツ内の全てのhタグを取得する(const head_tags =…)
- ループ処理の中で、タイトル要素のテキストコンテンツを取得(const title = …)
- ループ処理の中で、element.tagNameでタグの種類を判定し、h2, h3に応じてclassを付与する(if(element.tagName ==…)
- DOMを描画する(outline.appendChild(ul);~)
- CSSでネストのスタイル調整
上記のコードだと、ループのネストも発生せず、シンプルに実装できるのではないかと思います。
参考になりましたら幸いです。
コメント