はじめに
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ページの内容を生成 |
| 静的ファイルの生成 | Webサーバーにそのまま配置できるファイルを生成 |
| ルーティング | URLのパスでページを切り替え |
| Vuexストア | Vuex（ページの状態を管理する仕組み）の利用をサポート |
本記事では、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の項目を設定できます。今回はすべての項目で改行キーを押下して、デフォルト値をそのまま受け入れます。
| No. | 設定項目 | 意味 | デフォルト値 |
|---|---|---|---|
| 1 | Project name | プロジェクト名 | リスト1のコマンドで指定したプロジェクト名 |
| 2 | Project description | プロジェクトの説明 | 実行のたびに変わる |
| 3 | Use a custom server framework | Webサーバーフレームワーク | none |
| 4 | Choose features to install | インストールする追加機能 | 未選択 |
| 5 | Use a custom UI framework | UIフレームワーク | none |
| 6 | Use a custom test framework | テストフレームワーク | none |
| 7 | Choose rendering mode | レンダリングモード | Universal |
| 8 | Author name | 作者名 | Gitに登録された名前、なければ空文字 |
| 9 | Choose a package manager | パッケージマネージャー | npm |
すべての項目を設定するとプロジェクトが生成されるので、リスト2（1）のコマンドでプロジェクトのフォルダーに移動して、（2）のコマンドで実行します。実行後、Webブラウザーで「http://localhost:3000/」を開くと、図3の通り表示されます。
cd p001-cli # …（1） npm run dev # …（2）
［補足］Nuxt.jsプロジェクト生成時に設定できる項目（表2のNo.3～7）の詳細
表2のNo.3（Webサーバーフレームワーク）は、表3から1つ選択できます。
| 選択肢 | 詳細（参照URL） |
|---|---|
| none | - |
| express | https://github.com/expressjs/express |
| koa | https://github.com/koajs/koa |
| adonis | https://github.com/adonisjs/adonis-framework |
| hapi | https://github.com/hapijs/hapi |
| feathers | https://github.com/feathersjs/feathers |
| micro | https://github.com/zeit/micro |
| fastify | https://github.com/fastify/fastify |
表2のNo.4（インストールする追加機能）は、表4から複数選択できます。
| 選択肢 | 詳細 |
|---|---|
| Progressive Web App (PWA) Support | PWA機能 |
| Linter / Formatter | ESLintによるコードチェック／整形機能 |
| Prettier | Prettierによるコード整形機能 |
| Axios | AxiosによるHTTPクライアント機能 |
表2のNo.5（UIフレームワーク）は、表5から1つ選択できます。
| 選択肢 | 詳細（参照URL） |
|---|---|
| none | - |
| bootstrap | https://github.com/bootstrap-vue/bootstrap-vue |
| vuetify | https://github.com/vuetifyjs/vuetify |
| bulma | https://github.com/jgthms/bulma |
| tailwind | https://github.com/tailwindcss/tailwindcss |
| element-ui | https://github.com/ElemeFE/element |
| buefy | https://buefy.github.io/ |
| ant-design-vue | https://github.com/vueComponent/ant-design-vue |
| iview | https://github.com/iview/iview |
| tachyons | https://github.com/tachyons-css/tachyons |
表2のNo.6（テストフレームワーク）は、表6から1つ選択できます。
| 選択肢 | 詳細（参照URL） |
|---|---|
| none | - |
| jest | https://github.com/facebook/jest |
| ava | https://github.com/avajs/ava |
表2のNo.7（レンダリングモード）は、表7から1つ選択できます。「ユニバーサル」は、コードがサーバーとクライアントの両方で実行されるという意味です。
| 選択肢 | 詳細 |
|---|---|
| Universal | ユニバーサル（サーバーサイドレンダリング有効） |
| Single Page App | シングルページアプリケーション（サーバーサイドレンダリング無効） |
