「sou.da.name」をAstroで書き直し

中身が無いので20分くらいでNuxt3から移行が終了 / 2023-09-25T00:00:00.000Z

「そうだな」という感情を単純に示したい時がこの世の中に存在します。というわけで過去の私はsou.da.nameというドメインに中身のないページを作成し、チャットなどに「sou.da.name」を書くだけで誰でも簡単に「そうだな」もしくは「そうだね」という感情を示すことが出来るようにしました。

ところでこの中身のないページは何故かNuxt3で生成されていました。Nuxt3は便利ではあるものの、牛刀をもって鶏を割いているような気がずっとしていました。この微妙な気持ちを解決するために、私は気合を出しAstroというフレームワークを用いたものへと移行してみました。びっくりするほど中身が無いかと思いますが、興味のある方は読んでみてください。

結論

  1. 牛刀割鶏はちょっと気持ち悪い
  2. JavaScriptフレームワークJS抜き
  3. 豚刀割鶏くらいにはなったはず

牛刀割鶏

「牛刀割鶏」という四字熟語が存在します。これは論語に由来する言葉で、小さな物事を処理するのにわざわざ大げさな方法や有能すぎる人物を用いる必要はないという意味を持ちます。ところでNuxt3は「The Intuitive Web Framework」を自称しており、Vue3をさらに便利にして本格的なWebアプリケーション構築をしやすくするようなものです。具体的にはSSRやルーティング、Auto-import(これ、本当に便利)やエラーハンドリングが標準で付いてきます。

さてこのNuxt3は、sou.da.nameという「そうだな」「そうだね」という文字列だけを表示するサイトに対して適切なレベルのツールと言えるでしょうか。前文にも書かせていただいた通り明らかに釣り合っているとは言えないと思います。先述したSSR・ルーティング・Auto-import・エラーハンドリングのうち使っている機能は、ルーティング(1ページ)とAuto-import(2コンポーネント)のみです。もしかしてこれはNuxt3の無駄遣いなのではないか、そうした気持ちがSoudane.vueというコンポーネントを作っている最中には出てきていました。

Nuxt3は本格的なWebアプリケーションを構築するためのツールであるため、ビルドに90秒ほどかかってしまったり、クライアントへ少量ではあるものの本質的には不要なJavaScriptコードが送信されてしまったりといった問題点も存在しました。別にCI/CD駆動開発をしていたわけではありませんが、(お茶をゆっくり飲む時間は無くなってしまうという欠点は存在するものの)ビルド時間は短ければ短いほど良いと思われるため、短くできるなら改善したいという気持ちもありました。またクライアントサイドへ不要なデータを送り付けてしまうのは若干ながら心が痛んでしまうため、私の精神衛生の寒天からしても、問題を解決する必要があると考えられました。

that scales with you

そんな気持ちを持っていましたが、Nuxt3に依存しながら人生を過ごしていたため、Nuxt3以外で書き直すという行為はsou.da.nameを作成してから5ヶ月ほど行われませんでした。純粋に優先度が低いというものもありましたし、私はNuxt以外のフレームワークに関する知識がそこまで豊かではありませんでした。11tyを触ったことはあったものの私の肌にはそこまで合わず、合わなかったこともあってか他のフレームワークへの食指があまり動きませんでした。

しかしながらAstroというフレームワークの評判をよく見聞きするようになり、何となくドキュメントを眺めてみました。すると導入がめちゃくちゃ簡単である上、静的なサイトを作るのに向いているのではないかと思うようになりました。今回は使用しませんでしたが、必要ならば部分部分でVueやSvelteといったフレームワークのコンポーネントを使用することが出来るという点も気に入りました。一週間くらいかけてゆっくりと一通りドキュメントを舐めプしたので、これを用いてsou.da.nameを再構築出来るのではないかと思うようになりました。

豚刀割鶏

というわけでsou.da.nameをAstroを用いて再構築することにしました。といっても再構築という程仰々しいものではなく、公式のドキュメントを読み、適宜ローカルでpnpm run devを行いながら20分程度で終了しました。当該コミットをご覧いただければ分かるかと思いますが、ものすごく簡単でした。それなのにビルドが長くとも30秒程度で終了するようになり余計なコードを送り付けないようになるという、当初の目的を達成することが出来ました。

どんな感じになったのかはGitHubのリポジトリをご覧いただければと思います。owari.shopさんのようにサブドメインに応じて出力内容が変化するようなものを実装するやる気が出た場合はまた再構築をするかもしれませんが、取り敢えず現状としてはまあこれくらいでいいのではないかなと思います。

最後に

というわけで中身のないフレームワーク移行記事でした。中身がある移行だったのであれば、もう少し書くことはありそうですが、元のNuxt3から静的なサイトを生成するために使用していたので本当に書くことがありませんでした。書くことが出来るように精進していきたいと思います。それでは。

Writer

Osumi Akari