nuxt.jsで自分のWebサイトを改装した話

f:id:ru_shalm:20180506012758j:plain

ブログ書いていくぞ！！

どういうわけか？

このたび、僕のサイト『鳥小屋ポータRu』を改装しました。
リニューアルってやつです。

見た目はおいといて、今回はサイトジェネレータとして nuxt.js を使用しました。
なので、その経緯とかを書いてみます。

ジオシティーズみたいな古の時代はおいといて、最近（？）の歴史です＞＜

僕のサイトはいままで、静的サイトジェネレータとして Middleman を使用していました。
僕自身Rubyの人だし、ふだんRailsで使うSprocketsがほぼそのまま使えたりすることもあり、とても便利に使っていました。
あとサイトがかわいい。日本語化されてるし。あとサイトがカワイイ。

ですが、月日が経つにつれ、Webフロントの世界はなんかもうすごいことになってきました＞＜
ライブラリは npm で取ってくるのが普通だし、webpackとかbabelとかしたくなってきます。

そんな中、 Middleman は v4 からExternal Pipelineという仕組みが導入され、 Sprockets ではなく webpack や gulp など外部ツールを利用してJavaScriptなどをビルドできるようになりました。

僕的にも早速v4にするぞ！という感じだったのですが、
その頃つくったブラウザゲームがMiddlemanのSprocketsを一部利用してビルドしていたため、
簡単に移行ができないという問題がありました…＞＜

全ページを一気に移行するのはなかなか大変だったため、
苦肉の策として一部のページから移行を始めることにしました。
というか、まずはトップページだけ移行しました。

www/
├ toripota/ … Middleman v3でビルドしたページ群
│　├ yearlies/  …  いままでの子ページ達
│　└ …
└ toripota-next/ … Middleman v4でビルドしたページ群
　　└ index.html  …  新トップページ

上のようなイメージ。これをNginxでパスごとにディレクトリ切り替えて、
移行できたページからv4のページを配信するような仕組みにしました。

移行するためには Sprockets への依存を切り捨てる必要がありました。

ぶっちゃけ普通のページは全体で10ページくらいしかないので、
丸ごとポイして作り直してしまえば良いので全く問題はなかったのですが、
最大の問題はブラウザゲームたちです…

当時の僕のゲームはだいたい CoffeeScript で書かれていて、
そのビルドなどに Sprockets が使用されていました。

そもそも、サイトのビルド設定を使ってゲームをビルドしていることが
完全にクソヤバ案件なので、昔の僕を叱りつつ引剥がして別リポジトリに移します。

『発火フォール』などは、このタイミングでリポジトリもドメインをわけて
別サイトとして配信するようにしました。

移行作業、ぶっちゃけ楽しくもなんともないので超ゆっくりやっていたのですが、
その間にWebフロントの世界が進みすぎてしまい、
Middleman v4で作ったプロジェクトの Webpack が化石になりました＞＜（v1〜〜〜）
ゆっくりした結果がこれだよ！！

ビルド環境の面倒を見続けるのも大変だし、
ちょっといろいろ準備できた今のタイミングでやり方を考え直そうかな……と思っている中で、
選択肢として nuxt.js を考え、何度か挑戦してみた結果、今回やっと移行できるようになりました。

もうwebpackとかの面倒はみない
- ビルドツールの設定はプロにやってもらおう……（migration難しすぎる）
- 自分で設定を極力書かないことで、今後の移行コストも安くしたい
Vue.js でいろいろな道具が最初から使える
- 当然、コンポーネント定義できる
  - サイト内で使う汎用部品とか
  - Middlemanのときもテンプレートを切り出したりしていた
- 突然全体で持ちたいステートがあってもVuexとか使える
  - ブログの最新記事一覧、一度取得したら再取得したくなかった
  - ルートコンポーネントで持っても良いけど、あとで困りそうなのでステートに
何もしなくてもSingle Page Applicationになる
- generateで生成したファイル群をホストするだけでSPA！
- 最高
- ~~最近、仕事でSPAのサイトいじってたので、SPAじゃないサイトがクソ遅く感じるようになってしまった~~