「Vue.js」でWebページを作成できるフレームワーク「Nuxt.js」最初の一歩

JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用 第1回

Nuxt.jsのサーバーサイドレンダリングと静的ファイル生成を試す

　ここでは、Vue.jsを補完するNuxt.jsの機能として、サーバーサイドレンダリングと、静的ファイル生成を紹介します。

サーバーサイドレンダリング

　サーバーサイドレンダリングは、サーバーサイドでWebページの内容を生成する機能で、検索エンジン最適化（SEO）や表示の高速化に有用です。また、JavaScriptが無効な環境でも、最低限の内容を表示できるメリットがあります。

　Nuxt.jsのプロジェクトでは、デフォルトでサーバーサイドレンダリングが有効になるため、JavaScriptを無効にしたWebブラウザーでもWebページを表示できます（ただし、動的な処理は機能しません）。例えば、図4のWebページをJavaScript無効のWebブラウザーで表示すると、初期表示は行えますが、テキストボックスの内容を変更しても画面に反映されません。

［補足］ChromeでJavaScriptの有効／無効を切り替える

　ChromeでJavaScriptの有効／無効を切り替える設定は、設定画面の「詳細設定」-「サイトの設定」-「JavaScript」にあります。「chrome://settings/content/javascript」のURLを開いて、設定画面を直接表示することもできます。

図5：ChromeでJavaScriptの有効／無効を設定する画面

　図4のサンプルで、Webページのソースコードを参照すると、サーバーサイドレンダリングされた初期表示の内容がHTMLで記述されていることがわかります（図6の赤枠部）。

図6：サーバーサイドレンダリングされたWebページのソースコード（p002-basic）

　Nuxt.jsの設定ファイルnuxt.config.jsで、「mode」を「universal」から「spa」に変更すると、サーバーサイドレンダリングを無効にできます。

［リスト6］サーバーサイドレンダリングを無効化するnuxt.config.jsの設定

export default {
  mode: 'spa', // 'universal'から変更
（略）

　図4のサンプルでリスト6のmodeを変更後、「npm run dev」を実行して、JavaScript無効のWebブラウザーでWebページを開くと、真っ白なページが表示されます。ソースコードを参照すると、初期表示のHTML記述を含まないことがわかります。

図7：サーバーサイドレンダリングされていないWebページのソースコード（p002-basic）

　なお、リスト6のmodeは、プロジェクト生成時に、表2のNo.7（レンダリングモード）で初期設定できます。デフォルト値の「Universal」を選択するとmodeがuniversalに、「Single Page App」を選択するとmodeがspaに、それぞれ設定されます。

静的ファイル生成

　Nuxt.jsでは、プロジェクトから静的なファイルを生成できます。生成した静的ファイルは任意のWebサーバーにホストできます。Webサーバーにnode.jsやサーバーサイドアプリケーションの実行環境は必要ありません。

　「npm run generate」コマンドを実行すると、図8の通り、プロジェクトのdistフォルダーに静的ファイルが生成されます。

図8：Nuxt.jsプロジェクトから生成した静的ファイルの例

　ダウンロードできるサンプルに、図4のプロジェクト（p002-basic）から生成した静的ファイル（distフォルダー）を、Node.jsのWebサーバーでホストする例（p003-generated）を含めています。実行すると図4と同じ画面が表示されます。実行方法などの詳細は、サンプルコードのreadmeを参照してください。

まとめ

　本記事では、UIフレームワーク「Vue.js」を利用してWebページを作成できるJavaScriptフレームワーク「Nuxt.js」について、フレームワークの概要、プロジェクトの生成／実行方法、基本的な実装方法を説明しました。また、サーバーサイドレンダリングや静的ファイルの生成といった、Nuxt.jsの特徴的な機能を紹介しました。

　Nuxt.jsを使いこなすには、Vue.jsの基本について理解することが必要です。次回は、Vue.js（*.vueファイル）のバインディングやディレクティブの基本を説明していきます。

参考資料

• Nuxt.js
• Vue.js