Vue.js を使って h1 タグの内容をもとにページ内リンクのリストを作る方法

一枚ペラのページを作るときに、ページ内の目次を作りたいという場合、セクションごとに ID をふるのはいいとして、それを手書きでリスト化するのは手間もかかるし、ミスのもとになります。

そんなときに Vue.js を使うとリストの作成、更新を自動化できて便利です。

完成イメージは下記のような感じです。

Vue.js のテンプレートを含んだ HTML はこのようになります。

<ul class="menu">
  <li v-for="title in titles">
    <a v-bind:href="'#'+title.href">{{ title.title }}</a>
  </li>
</ul>
<article>
  <header>
    <h1 id="first" class="add-to-list">First article</h1>
  </header>
  <section>
    <p>I have a pen.</p>
  </section>
</article>

<article>
  <header>
    <h1 id="second" class="add-to-list" alt-title="Second Section">Second article</h1>
  </header>
  <section>
    <p>I have a apple.</p>
  </section>
</article>

<article>
  <header>
    <h1 id="third" class="add-to-list">Third article</h1>
  </header>
  <section>
    <p>I have a pen.</p>
  </section>
</article>

<article>
  <header>
    <h1 id="fourth" class="add-to-list">Fourth article</h1>
  </header>
  <section>
    <p>I have a pineapple.</p>
  </section>
</article>

JavaScript のコードはこちら

var titles = document.getElementsByClassName('add-to-list');
var titleTextArray = [];
var title;

for (var i=0; i<titles.length; i += 1) {
  title = titles[i];
  titleTextArray.push({
    title: title.hasAttribute('alt-title') ? title.getAttribute('alt-title') : title.innerText,
    href: title.id
  });
}

var vm = new Vue({
  el: '.menu',
  data: {
    titles: titleTextArray
  }
});

HTML 要素の class でリストに掲載する h1 タグを指定していますがもちろん、タグは h1 以外でも使えます。

alt-title という属性は h1 タグの内容とは違う文字列をリストに表示する場合に使います。

タイトルのリストを作るとき、alt-title という属性を持っている場合にはその値を title としてセットします。

これで、ページ内にセクションを追加するたびにリストを書き換える必要がなくなりますね。

ほんのちょっとしたことなので、わざわざ Framework などを使うのはどうかという考えになるかもしれませんが、作業量や間違いを減らす効果を考えると十分に導入の動機になるのではないでしょうか。

使用しているのは Vue.js 2.3.4 です。

Vue.js のウェブサイトはこちら (Vue.js)

上記スクリプトのデモ。

See the Pen prZGMm by Shingo Matsui (@shingorow) on CodePen.