何がどう難しいのか

えー、目次を作るにはvueファイル内のscriptの部分でtemplate部分(HTML)にアクセスできればいいだけです。

ところがNuxt.jsというかVue.jsの仕様？みたいなので、script部分の処理＞template部分のレンダリングの順なので、アクセスする方法がないっぽいんですよ。 その中でどうにかやりくりしていくお。

失敗例①：refを使う

Vue.jsかな？にrefという機能があるようです。

この↓ように書くとthisやappからアクセスできる「$refs」というオブジェクトのrefで指定したキーにHTMLエレメントが追加されます。

<h2 id="title1" ref="h2_1">タイトル①</h2>

上の例だと「this.$refs.h2_1」。

実行される順序の都合、Nuxt.js(たぶんVue.js)ではscriptからtemplateの中身を知ることができないんですが、それを知れる唯一？の方法のようです。

で、ChatGPTによると得られる値はDOM要素だとかで、「id」で指定したidを(this.$refs.h2_1.id)、「innerText」でタグの内側のテキスト(this.$refs.h2_1.innerText)が得られます。 これで目次を作る要素が揃うわけです。

例えばこんな↓書き方で

<h2 id="title1" ref="h2[]">タイトル①</h2>

h2キーにエレメントの配列を作ってくれないかなーと思ったんですが、どうもできなくてですね。 最後の要素だけが入るみたいです。 []なしで書いても同様。

今回やりたいのはメンテナンス性向上のために自動で目次を作る方法です。 いちいちrefに一意の値を割り振ってーとかやりたくないんです僕は。

data()で定義する変数を静的変数扱いして、関数を呼ぶたびに数値が増えていくこんな↓書き方もしてみましたが、

<h2 id="title1" :ref="'h2_'+refNum()">タイトル①</h2>

数値が300とかになってですね、まぁそれはいいんですけど、「無限ループおきてますよー」みたいなエラーも出てて諦めました。

あとですね、ChatGPTが出してくる用例がことごとくbuttonを使ったrefの操作なんですね。

どうもこの$refsに値がちゃんと入るのが、scriptの処理＞templateのレンダリングのさらに後のようなんです。

script内で使えないなら意味がありません。

というわけで、この方法は今回の要件を満たしません。

失敗例②：JavaScriptでDOM要素から取得

えー、僕は基本的なJavaScriptの知識がすっからかんなので全然意味が分かってないんですが、よく見かける「getElementById」みたいなのを使う方法です。

ChatGPTにほぼ全任せで、意図した挙動になるよう調整した最終的なコードがこんな↓感じ。

computed: {
  items() {
    let list = []
    
    if ( process.browser ) {
      const article = document.getElementById('article')
      
      if ( article ) {
        const h2 = article.querySelectorAll('h2')
        
        h2.forEach(row => {
          list.push({
            href: row.id,
            name: row.textContent,
          })
        })
      }
    }
    
    return list
  },
},

これで、最終的にレンダリングされたHTMLの#article内にあるh2を全て拾ってきて目次作成用のオブジェクト配列ができあがります。

「if ( process.browser ) {」はサーバサイドで実行した場合？にエラーが出てたので追加しました。 「if ( article ) {」も実行タイミング？によってはエラーが出たので追加。

後はこれを目次生成部分でv-for使って目次にするだけです。

ただですね…。

F5を押すと必ず目次が表示されたんですが、ページ移動時やページアップデート時など、よく目次生成にコケてるんですよね。

JavaScriptに詳しい人なら解決できそうにも思えましたが、仮にうまくいったとしてもおそらくgenerateしたHTMLファイルには目次が入らないと思うのでSEO的にいくらか不安が残ります。

というわけで、候補として残しはするけどこの方法も不採用。

失敗例③：HTMLを別ファイルに分離

イメージとしてはヘッドレスCMSと同じことをローカルでやる感じです。

どこかテキトーにjsファイルかjsonファイルにtemplateに書いていたものを移植します。

それをimportすると、templateのレンダリング前にtemplateの中身を知ることができます。

後はそれを正規表現とかcheerioモジュールを使ってh2を引っこ抜いてやれば目次が作れます。

このやり方は付随するメリットも大きくて、記事ごとのふるい分けを動的ルーティング(_id.vueみたいな)に任せて、ルートによって読み込むjsファイルを切り替えると、共通処理が_id.vueの1ファイルで管理できるのでメンテナンス性が上がります。

さらに、jsファイル側にタイトルとかデスクリプションも持たせてやると、記事個別の部分だけをjsファイルに隔離できます。 vueファイルでこれをやると他の処理やらなんやらも記述されているので視認性が低い。

と思ってテストをしていると気付きました。

ヘッドレスCMSを使う方法だと独自コンポーネントをロードするのにひと手間必要で、そのページだけデータベースからあのデータを持って来てーみたいなのを柔軟にやりにくいんです。 なのでこれも不採用。

コンポーネントとかデータベースとか関係なしにベタHTMLで記事を書く場合はこのやり方はアリだと思います。 でもそれだとヘッドレスCMSとかマークダウンで書けばいいような気もします。

最終的な選択

結局ですね、script部分でtemplateの中身を知るのが設計上難しいっぽいんですよね。

ChatGPTに

ってだだこねたりしたんですが、どうも絶望的に無理そうでした。

というわけで僕が採用したのはref方式と一部妥協。

<h2 ref="xbox">まずはXbox本体を手に入れろ！</h2>
<h2 ref="software">次にソフトを手に入れろ！</h2>
<h2 ref="hdmi">XboxとテレビをHDMIで接続しよう</h2>
<h2 ref="nine">メガテンNINEは高解像度対応か</h2>
<h2 ref="rec">配信や実況をするにはどうすればいいか</h2>
<h2 ref="button">決定ボタンの位置問題</h2>

data() {
  return {
    items: [],
  }
},
mounted() {
  let list = []
  
  for ( const key in this.$refs ) {
    this.$refs[key].id = key
    
    list.push({ href: '#' + key, name: this.$refs[key].innerText })
  }
  
  this.items = list
},

<ul>
<li v-for="item in items">
<nuxt-link :to="item.href">{{ item.name }}</nuxt-link>
</li>
</ul>

まとめ

結局ですね、「できない」ことが分かっただけで最後にできあがったものは何やら普通の目次になってしまいました。 これが唯一可能な方法な気がしないでもないです。

そこそこの妥協点で、そこそこの仕上がりなので、そこそこ満足です。

同じことで時間を浪費する人の助けになれば幸い