VuePressの時の課題

VuePressでは記事はMarkdown、ランニングのデータはjsonファイルで管理していたのですが、この環境だと手軽な更新ができず、つい滞りがちになってしまっていました。
特にランニングデータはスマートフォンから簡単に更新したかったこともあり、思った以上に致命的でした。

また、VuePressは開発当時はTypeScriptに対応していなかったこと、ドキュメント管理以外の部分の作り込みをしようと思うと構成がかなり複雑になってしまうことなどがあり、かなり悩ましい状態となってしまっていました。（TypeScriptは1月にプラグインが出たのでおそらく使えるようになってるはず）

決定打になったのはPWAのWorkboxの調整がうまくできなかったことです。パフォーマンスが最悪な状態を脱せなかったことです。自分のスキル不足かもしれませんが、サイト内で使用している全ての画像を初回アクセス時にダウンロードしようとする動作をどれだけ頑張っても改善できませんでした。

そこで、上記の全ての課題を解消することはもちろん、別の技術を使用してJAMstackなサイトにしてみようと思い立ちました。

使った技術

• NuxtTS（Nuxt.js x TypeScript）
• Vue Composition API
• microCMS
• Netlify

最初は久々にReactにしようかとNext.js（ts）を検討していましたが、結局業務でも使用しているNuxtに落ち着きました。

その代わり？に、ちょうどベータ版となったVue3のComposition APIを導入しました。
ただし、pagesコンポーネントのasyncDataとfetchはComposition APIでは使用できないため、工夫が必要です。（方法はいくつかありますが、今回はVue.extendとのキメラにする方法を採用しました。）

更新性については、原点回帰でCMSを導入しました。GraphQLのGraphCMSか、無料枠で使用できる機能が豊富なmicroCMSで悩み、最終的にmicroCMSに決めました。

Netlifyは前の環境からそのまま引き継いでいます。

技術的な細かい話はまた後日、時間がある時にまとめられそうならまとめたいと思います。

移行した結果

JAMstackなサイトの開発は、もともと持っていた知識で簡単に作ることができました。
パフォーマンスはチューニングの真っ最中ですが、とりあえずVuePressの時よりは速くなっているので、それだけでも満足です。