4年ぶりにウェブサイトをリニューアルしました。 以前は、Nuxt+TypeScript+Pugを用いて静的HTMLを生成していましたが、今回のリニューアルではPug+JavaScript+Vueに切り替えています。 この記事では、Nuxtを7年以上使用した経験をもとに、なぜこの変更を選んだのかをお話します。

カタカナ多すぎてなにがなんだかわかんないのですが、フロントエンド開発は、環境開発でつまづくらくらいカオスの状態になっていて、もはや自分でもなにをしているのかわからない状態です。 「スーパーマーケットで僕は迷子。 もう楽しく買い物なんてできない。 」 – Lost in the Supermarket by The Clash

話を戻し、Nuxtのメリットは、フロントエンドとバックエンドを分離できることと、データのバインディングが容易だということ、コンポーネント開発ができることです。 特にSSRが必要なアプリケーション開発において、その良さを発揮します。

一方で、アプリ以外で使用すると以下のような課題が見えてきます。 1、小規模サイトでもコストが上がる冗長さやビルドの重さ。 2. Vuexを使うことでデータ管理が複雑化し動作も重たくなる。 3. TypeScriptとの併用でプラグインを試しにくい環境に。

Pugへの移行理由とそのメリットは、テンプレートエンジンが使えて、軽量かつ簡潔な構文で記述できることです。 このサイトは、ワードプレスではなく、記事データをオブジェクトに記述してそれをPugで出力しています。

また、VueJSと組み合わせることで、ユーザー入力に対してリアルタイムで反応しなければならないページの実装が可能になることです。 実際にこのサイトのお問合せページは、Vue3でつくられています。 (お問合せページを見る) 待に参考料金の計算のとこでVueの良さを発揮しています。

ビルドタイムについては、Nuxt3 + Vitaにしれば高速になるのかもしれませんが、Nuxt2を覚えたのに Nuxt3をまた覚え直すのは、将来性考えても酷なので試してません。

通常のサイトでは、VueやNuxtが必要なページというのはあっても数ページなので、全体をNuxtで開発しNuxtと心中するようなことは避けた方が良いかもしれません。 また、Vuexは、かなり慎重に使わないとならないという教訓があります。

僕のように1人で開発するような場合は、アプリ開発では引き続いてNuxtを選択する可能性もある一方で、複雑なシステムが必要ないウェブサイトにはPugのような軽量フレームワークとAPIをつかったPHPが最適だと感じています。

フロントエンドの開発環境はカオス極まりなく、サイトをつくるよりも開発環境をつくることのほうが難しい状態です。 Pugも純粋なHTMLではないので、本当にこれで良いのかという不安はありますが、PugとVue3の部分的な活用は、現在のところ1つの選択肢として良いと思っています。

今回は、ウェブリニューアルの開発フレームワークの話に絞って書きました。 ウェブリニューアルについてはシリーズ化してちょこちょこ書いていきたいと思います。 今日は久しぶりにLondon Callingでも聴こう♫