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

はじめに

　Vue.jsは、Webページのユーザーインタフェイス（UI）作成にフォーカスしたJavaScriptフレームワークです。AngularやReactと比較されることが多いフレームワークですが、導入や習熟のしやすさ、日本語ドキュメントの充実などが特徴として挙げられます。

　Vue.jsの機能はUIに特化しており、Webページ構築に有用なUI以外の機能（Ajaxやサーバーサイドレンダリングなど）は提供しません。そこで、Nuxt.jsは、Vue.jsのUI機能と、Vue.jsが提供しないUI以外の機能をまとめて利用できる環境を提供します。開発者はNuxt.jsを利用すれば、UIをVue.jsで構築しつつ、Nuxt.jsが提供するUI以外の機能も同時に利用できます。

　Nuxt.jsが提供する主な機能を表1にまとめます。

　本記事では、Vue.jsとNuxt.jsを使い始める最初の一歩として、プロジェクトを生成・実行する方法と、Webページの基本的な実装方法を説明します。また、Nuxt.jsの便利な機能として、サーバーサイドレンダリングや静的ファイルの生成を紹介します。

対象読者

• Webページ作成を楽にしてくれるフレームワークを探している方
• Vue.jsの環境をまとめて作成したい方
• AngularやReactを経験して、他のフレームワークも試したい方

必要な環境

　Nuxt.jsのプロジェクト生成や実行には、Node.jsが必要になります。

　今回は以下の環境で動作を確認しています。Webブラウザーは、JavaScriptの有効／無効を設定で切り替えることができるGoogle Chromeを利用します。　

• Windows 10 64bit版　
  • Node.js v10.15.3 64bit版
  • Nuxt.js 2.7.1
  • Vue.js 2.6.10
  • Google Chrome 74.0.3729.157

　サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「npm run dev」コマンドを実行して、Webブラウザーで「http://localhost:3000/」を開きます（詳細は後述します）。

Nuxt.jsプロジェクトを生成して実行する手順

　最初に、Nuxt.jsが提供するCLIツール（create-nuxt-app）を利用して、プロジェクトを生成して実行する手順を説明します。プロジェクトを実行すると、図3の通りWebページが表示されます。

　プロジェクトを生成するには、Node.jsがインストールされている環境で、リスト1のコマンドを実行します。npxはNode.jsのコマンドで、create-nuxt-appを（別途インストールせずに）実行できます。

npx create-nuxt-app p001-cli

　コマンドラインでは、プロジェクトに関する表2の項目を設定できます。今回はすべての項目で改行キーを押下して、デフォルト値をそのまま受け入れます。

　すべての項目を設定するとプロジェクトが生成されるので、リスト2（1）のコマンドでプロジェクトのフォルダーに移動して、（2）のコマンドで実行します。実行後、Webブラウザーで「http://localhost:3000/」を開くと、図3の通り表示されます。

cd p001-cli # …（1）
npm run dev # …（2）

Nuxt.jsプロジェクトの内容

　create-nuxt-appで生成できるプロジェクトの内容を、以下で説明します。

プロジェクトで利用できるコマンド

　生成されたプロジェクトでは、表8のコマンドが利用できます。

　No.1は開発用の実行コマンドで、実行中にファイルを変更すると、Webページを更新して変更を反映します。No.2は本番用にビルドするコマンドで、ビルド結果はNo.3のコマンドで実行できます。No.4は静的ファイルを生成するコマンドで、詳細は後述します。

プロジェクトに含まれるファイルやフォルダー

　プロジェクトに含まれる、Nuxt.js固有のファイルやフォルダーの概要を表9に示します。詳細は本連載で順次説明していきます。

デフォルトで生成されるページやコンポーネントの内容

　生成されたプロジェクトに含まれるページと、ページの一部分に対応するコンポーネントのファイルについて、以下で説明します。pages/index.vueが、最初に表示されるインデックスページのファイルです。

<template><!-- テンプレート …（1）-->
  <section class="container">
    <div>
      <logo /><!-- コンポーネント …（1a）-->
（略）
    </div>
  </section>
</template>
<script><!-- スクリプト …（2）-->
import Logo from '~/components/Logo.vue' // 参照 …（2a）
export default {
  components: {
    Logo // 公開 …（2b）
  }
}
</script>
<style><!-- スタイル …（3）-->
（略）
</style>

　*.vueファイルでは、<template>タグ（1）内にテンプレート（表示内容のHTML）、<script>タグ（2）内にスクリプト（JavaScript）、<style>タグ（3）内にスタイル（CSS）を、それぞれ記述します。（1a）の<logo>タグは、ロゴを表示するコンポーネントに対応します。コンポーネントを実装したcomponents/Logo.vueを（2a）で参照して（2b）で利用できるようにしています。

　コンポーネントは、ページと同じ形式の*.vueファイルで記述します。ロゴを表示するコンポーネントのファイル（components/Logo.vue）をリスト4に示します。ここでは、ロゴを構成する三角形に対応するdiv要素が<template>に、それらのスタイルやアニメーションの指定が<style>に記述されています。詳細はサンプルコードを参照してください。

<template>
  <div class="VueToNuxtLogo">
    <div class="Triangle Triangle--two" />
    <div class="Triangle Triangle--one" />
    <div class="Triangle Triangle--three" />
    <div class="Triangle Triangle--four" />
  </div>
</template>
<style>
（略）
</style>

　Nuxt.jsのページやコンポーネントの概要をまとめると、以下の通りになります。

• ページやコンポーネントは*.vueファイルに記述する
• ページのファイルはpages、コンポーネントのファイルはcomponentsの各フォルダーに配置する
• *.vueファイルは<template>、<script>、<style>の部分に分かれる

Vue.jsの基本的な実装方法

　*.vueファイルの基本的な実装方法を、図4のサンプルで説明します。このサンプルは、テキストボックスに入力した内容をそのまま画面に表示します。テキストボックスの内容を変更すると、リアルタイムで画面に反映されます。

　このサンプルのindex.vueは、リスト5の通りです。

<template>
  <div>
    <h1>Hello {{name}}!</h1> <!-- nameの表示 …（1） -->
    <input v-model="name"><!-- nameの入力 …（2）-->
  </div>
</template>
<script>
export default {
  data() { // ページに表示するデータの指定 …（3）
    return {
      name: 'World' // nameの初期値 …（4）
    }
  }
}
</script>

　テンプレートの「{{name}}」（1）は、name変数の内容を表示することを表します。（2）では、<input>タグに「v-model="name"」と指定して、name変数の値とテキストボックスの内容が双方向に同期（バインディング）されるようにしています。「v-model」のように、要素の属性に指定して機能を設定する記述を、ディレクティブと呼びます。

　スクリプトでは、「export default」記述で、テンプレートで利用する実装をエクスポートします。このサンプルでは、画面に表示するデータを指定するdata関数（3）で、name変数の初期値を設定します（4）。

　より詳細なVue.jsの実装方法は、本連載の次回以降で説明します。

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を開いて、設定画面を直接表示することもできます。

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

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

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

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

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

静的ファイル生成

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

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

　ダウンロードできるサンプルに、図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