はい、soussune Advent Calendarの記事です。何日目でもよいです。
今回は「soussuneのサイトでVueを使いたい💪」という積年の夢にようやく取り掛かりました。前回の課題としてJekyll上でJS書いていくとつらくなることは必至なので、記事内容の.mdファイルだけ移して新規のリポジトリで一からNuxt化をゴリゴリと進めています。
https://github.com/soussune/soussune.com/blob/master/pages/actors/index.ts
たとえばこのへんはアレですね。出演者一覧とエピソード一覧を取得して、合成して各人の出演回数を算出して情報付加してソーティングという処理です。JSで処理できるので、以前に比べてだいぶサックリ書ける感じです。
表示的にはこんな感じになりますね。（出演回数多い順 & 新しい順）
で、今までそういうことをJekyllでもやってたんですが、
https://github.com/soussune/soussune.github.io/blob/master/actors/index.html
こんな感じだったんですよね。
「ウッ…！！」ってなる感じですよね…。
ちょっと死んじゃいますよね。
https://github.com/soussune/soussune.github.io/blob/topic/episodes/episode/index.html
そんな状況でもむりやり記事検索機能をvueで作っていたんですが、vueのデータ部分を作るだけでアレでしたね。Jekyllで頑張って必要な情報を集めて合成してJsonifyしまくって渡すという感じです。テンプレートでカンマ入れて配列作るのとか特に涙ぐましくないですか？？？
あとvueのMustache記法 {{ }} が、Jekyllの記法 {% %}と被ってしまうのでデリミタの設定を変更したりしてました。そんな設定あるんですね。当時はなんか、なんとか頑張っていこうと思ってたんですが、完全に気の迷いだったんだと思います。
というわけで、とりいそぎ供養でした。また次回。
