コンテンツの「質」に集中できる環境を。

こんにちは、「ふ」です。
最近ブログを閲覧していると、headerの少し下に「目次」を置いているページをよく見かけるようになりました。ユーザに記事の全体像を見てもらって、知りたい情報にアクセスしやすくする。有効な事だと思います。

然し乍ら、ページの量産体制に入った時にはいちいち<h2>タグの内容を書き出して目次を作成するのは結構な手間となってしまいます。

また過去にアップした記事それぞれに目次を設定する、骨の折れる作業ですね。

自動化させてしまおう。

<h2>〜</h2>タグに書かれた内容を検出し、自動で目次を作成する仕組みがあれば素敵なのでは?
これ、簡単なJavaScriptを仕込む事で実装することができます。

今回はその方法について紹介したいと思います。少しでもページ作成を効率化して、コンテンツの「質」に集中できる環境を作りましょう。

まずは表示させてみる。

以下のような構成のページがあるとします。

ここに目次エリアを挿入しておきます。わかりやすいように軽くCSSで装飾しておきますね。

見出し1~3の間隔をテキトーにとっています。
この" mokuji "エリアに、見出しである<h2>〜</h2>内のテキストを順に取り出し追加していきましょう。

扨（さて）、プレビューしてみます。。

できましたね ♪　表示するだけなら、７行のコードです。

クリックしてジャンプできるよう実装。

<h2>のテキストを取り出して目次部分に表示する実装には成功しました。
ただし、今作っている媒体はwebページ。

折角なので、クリック（タップ）するとその場所にジャンプできるよう「アンカー」を仕込みましょう。作戦としては以下のようになります。

作戦。

◼︎ジャンプ元（目次の項目）のコード

◼︎ジャンプ先（h2）のコード

このように書き換えたいと思います。JavaScriptコードを追加・変更していきましょう。

プレビューしてみましょう。

ちゃんとアンカーが仕込まれていますね。
８行しか書いていないのに、実装することができました。

コーダーなら自作しようぜ。

今回は「もくじ」の自動作成について紹介しました。CSSでお好みのデザインにして使ってくださいね。
たった８行で実装できてしまう「もくじ」の自動作成。外部プラグインを使うよりも手軽だと思います。

これに限らずあなたならではの「作業効率化」のアイデアが浮かんだら、どんどん自作していきましょう！

あ。この本よかったですよ。