普通のWebサイトをNuxt.jsで作り変えてみた話

フレームワークはもはや流行りとか言うよりもひとつふたつは使っていて当たりまえ…みたいな雰囲気を感じる今日この頃ですが、受託制作で普通のWebサイトを作っていると普段の仕事では早々使う機会がないんじゃないかと思います。（僕だけですかね…？）

Webサービスやゲームのように非同期で通信する要素があるわけでもなく、DBもなくページ内の物量も普通…そんな普通のコーポレートサイトやLPなんかを作るのにフレームワークはややオーバースペックに感じます。

ついでにクライアントから「ちょっとならHTML触れるから自分で更新します」と言われた日には開発環境の導入自体のハードルが高く、そもそもhtmlじゃないフレームワークの導入なんて出来ません。

今回はそんな風に「別に使わなくても仕事は出来るしなぁ」と腰が重かった自分が、自身のポートフォリオサイトをNuxtに作り変えてみた感想を書いていきます。

Nuxt.jsで書き換えてみた理由

まあちょっとは流行りのもの触っといた方がいいよな…という漠然とした焦りみたいなのが後押ししたというのも大きいんですが、決め手は『静的ファイルの生成機能』でした。

正直SSR（サーバーサイドレンダリング）が動くバックエンド環境を用意する必要性を普通のサイトでは全く見出せないので単純に「出力したファイルをFTPでアップすればOK」という所が一番の魅力でした。

あとはVue.jsに関しては一通り触ったことがあったのである程度気が楽というのもありました。（いやVuexとかここで初めて触ったから大変だったけども）

Nuxt.js導入のざっくりとした手順

細かい技術的なことは書きません。公式を読んだ方が早いです。既存の静的サイトをとりあえずデザインそのままでNuxt.jsにしてみた流れをざっと書いていきます。

1）Next.jsのインストール

公式のリファレンスが丁寧に手順を説明してくださっています。https://ja.nuxtjs.org/guide/installation

最初に任意のディレクトリでコマンドラインやターミナルでこのコマンドを打ちます。いろいろ質問に答えていくのですが、まあだいたいnoneとか一番上の項目で良いと思います。普段使ってるものがあればそちらでも問題ないです。

yarn create nuxt-app プロジェクト名

ただレンダリングモードは「SPA」を選びます。質問に答え終わるとNuxt.jsに必要な諸々がまるっとインストールされます。

そしてpackage.jsonに記述された下記のコマンドを実行するとlocalhost:3000でNuxtの初期画面を見ることが出来ます。

あ、パーミッションエラーとか出る場合はsudo付けたりしてくださいね。

yarn run dev

これでNext.jsを使う下準備が出来ました。次は既存サイトのどこをどんな風に当てはめたかをざっくり説明します。

2）まずNuxtのディレクトリ構造に沿って既存ファイルを入れてった。

自動でインストールされた各ディレクトリとファイルはどんな意味を持っているか？

それがわからないと既存サイトの構造を移植することは出来ません。というわけで、既存サイトのどこをどのNuxt構造に入れたのか羅列してみます。

・assetsディレクトリ

既存サイトのcss、js、imgといったディレクトリは全部ここに入れた。ちなみにcssディレクトリにはSASSが入っている。

・componentsディレクトリ

Vue.jsのコンポーネントを入れるディレクトリなので、ヘッダーやフッターといった共通パーツはここに入れました。その他にも複数箇所で使用するパーツに関してはここの.vueファイルとして移植です。Header.vueFooter.vueみたいな感じで個別にしました。WordPressのheaderとかと同じような扱いです。

・layoutsディレクトリ

ページ全体の大まかな構造を設定するファイルを入れるためのディレクトリです。僕の場合は、

＝＝＝＝＝
ヘッダー
メインコンテンツ（nuxtってコンポーネント名になってる）
フッター
＝＝＝＝＝

みたいな全ページに共通する構成を決めるために使いました。

・pagesディレクトリ

ここが所謂、静的htmlファイル的なものを置く場所です。サイトマップ通りのディレクトリ構成はここに作ります。

なので例えば、

index.vue
 L about/index.vue
 L works/index.vue

みたいな感じでファイルを作りました。

このindex.vueファイルのtemplateの中身が各ページのメインコンテンツで、前述したlayoutsのnuxtコンポーネントの部分に出力されます。

まあ細かい事は置いといてWordPressのページテンプレートとかと意味は同じだと思えば、既存サイトのhtmlのどこを移植すれば良いかはなんとなくわかるんじゃないでしょうか。

・staticディレクトリ

最終的にルートに実体のあるファイルとして置いておきたいものを入れます。具体的には、faviconやogp画像といった外部から参照されるものを置いておくのが良さそうです。あとはサーチコンソールのやつとかそういったものですかね。

・middleware、plugins、storeディレクトリ

これらに関してはとりあえず必要なかったので割愛します。別に無くても動く。

3）既存サイトで使用していたSASSやpug、jqueryプラグインなんかを使えるようにする。

この項目が一番大変で書く事多いので、また別の記事に書こうと思います。やる事をおおまかに説明すると、nuxt.config.jsへの設定の記述がメインです。

nuxt.config.jsは言ってしまえばほぼwebpack.config.jsと同じようなものです。（ここwebpackの知識がないと乗り越えられませんでした）

設定の中にあるbuildのextendの中に、webpackで使用していたmoduleの記述を移しました。

ちょこちょこ書き直さないと動かないものがあってそれの正解探しにやたら時間がかかりました。。

pugやSASSを使えるようにするのはもちろん、jsのプラグイン各種の移行も地味に面倒でした。

追記：こちらの記事に詳しく書いておきました。

Nuxt.jsでSassとpugを使えるようにする方法（ついでにjqueryも）

4）それぞれのファイルがちゃんと編集出来る状態になったら静的ファイルを書き出す

それぞれのファイルがつつがなく編集できるようになったら最終的にFTPでサーバーにアップするためのファイルを書き出します。

やり方は超簡単で以下だけです。これでdistディレクトリ以下に見慣れたファイルが生成されます。

yarn run generate

あとは生成されたdist内のファイルをまるっとサーバーにアップしてしまえばそれで完了です。

出力されたファイルがちゃんと動いているか（ほぼ確実に動きますが）をローカルで確認したい時は、MAMPなりXAMPPなり使ってみて確認すれば良いでしょう。

結局Nuxt.jsって何が良いの？普通の受託系Web制作者がやってみた感想

・Pjaxでの遷移を作るのがめちゃくちゃ楽！

ルーティングとかページごとの処理の切り分けとか、スクラッチで書こうとすると凄くめんどくさいところを何も考えなくて良いのが楽過ぎる。

ページ遷移のトランジション内容に集中出来て嬉しい。

・状態管理もセットで付いてくるのが嬉しい。

割愛しましたがStoreを使えば「今どのページに居るのか」等といった状態をコード側で持たせることが出来て、それが便利でした。

例えば背景にWebGLを用いたアニメーションがあって、それをページ遷移に合わせてシームレスに変化させたい、といった場合に、Storeに値を持たせてページ遷移と共に状態を確認するようにすれば、遷移と共に背景が変わるなんてことが簡単に出来ます。

スクラッチでも出来るっちゃ出来る事ですが、戻るボタンとか連続でリンク押されたらとかそういう面倒極まりない処理の部分を全部Nuxtがやってくれるので本当に安心感があります。

・静的書き出し最高！

別にWebサービスとかバックエンドと連携するようなものを作らない限り、普通のサイトはAWSなんか使わずに安いレンタルサーバーで良いわけですよ。サーバーでNode.js等なんて動かす必要性皆無です。

自分のポートフォリオサイトも普通のレンタルサーバーですし。そこにアップ出来る静的ファイルを書き出してくれる機能は本当に素晴らしい。

他のフレームワーク系はアプリやサービスだけを想定している以上、サーバーの整備もしろよってスタンスですがNuxtは本当に優しい。上２つの利点だけ使えれば満足な層のことも考えてくれるなんて。

コンポーネントって再利用を簡単にする仕組みなので作れば作った分だけいろんな案件で使い回し出来るものが増えていくので、制作スピードを上げたい人にもおすすめなんですが、如何せん今までのフレームワークはサーバーサイドが優しくなかった。特に納品する案件にそんなもん使えないですしね。

まとめ

以上ここまで長々と書いてきましたが、受託系Web制作者の中でもこんな感じの人にはNuxt.jsおすすめです。

『Pjaxでシームレスなページ遷移をするリッチなWebサイトを楽に作りたい人』（いや、これはまんま自分の事なんですが）

『再利用可能なコンポーネントを沢山作って制作スピードを上げたい人』

前提としてある程度Vueとwebpackの知識がないと厳しいかもしれませんが使えると楽に出来ることが増えます。

あまり専門的な事は書いてませんが、全体的な雰囲気を掴む一助になれば嬉しいです。