最近、クライアント案件でもVue.jsを触る機会が増えてきました。SPA構成のウェブアプリケーションを作成するのに便利なVue.jsですが、SSR（サーバーサイドレンダリング）などSEOやOGP設定といった通常のウェブサイトで求められる要件となるとなかなか難しいようです。そんなときに便利なのがVue.jsのフレームワークであるNuxt.jsです。今回はNuxt.jsの導入から新規プロジェクト作成までの流れをまとめていきたいと思います。  

SSRやルーティングの自動設定など一般的なウェブサイト構築に便利なNuxt.js

Nuxt.jsはVue.jsのフレームワークで、特性上Vue.jsの苦手としていたSEOの領域でSSRやmetaタグの一括管理、また複雑なルーティングの設定を自動でしてくれたりと、大変便利な機能が詰まっています。通常のウェブサイトはもちろん、メディアサイトやブログサイトなどの動的なコンテンツを持つものや、サーバーサイドと連携したウェブアプリケーションなどにも広く用いられています。   基本的な構成や規則などはVue.jsに準拠しており、Vue.jsをある程度理解すれば比較的導入のハードルは低いようです。プロジェクトの新規作成もVue CLIと同じような感じでコマンドを叩くだけであっという間にセットアップが完了します。では早速みていきましょう！  

direnvのインストールと設定

Nuxt.jsの導入の前に、「direnv」というツールをインストールしておくことをオススメします。このツールはディレクトリごとに独自の環境変数を設定することができるもので、ウェブアプリケーションの開発などでは必要となるシーンも出てくるのではないでしょうか。導入も簡単で、下記のようにHomebrew経由でインストールします。インストールが完了しましたら、バージョンを確認し、表示されていればOKです。

$ brew install direnv

$ direnv --version
2.20.1

  インストールが終わったら、パスを通すために「.bashrc」に下記のように追記していきます。 【.bashrc】

eval "$(direnv hook bash)"

  追記が終われば、下記のコマンドで.bashrcを再度読み込みし、設定を反映させます。

$ source ~/.bashrc

  これで準備が整いました。いよいよNuxt.jsのプロジェクトを作成していきます。ちなみにですが、Nuxt.jsのインストールにはVue CLIが必要となります。過去記事「vue-cli 3系への移行と新規Vue.jsプロジェクト作成とビルド方向まとめ」などでVue CLIのインストールについてまとめていますのでご参考ください。  

Nuxt.jsプロジェクトの新規作成（starter-templateテンプレート）

Nuxt.jsのプロジェクトを作成する際には、あらかじめ用意されているテンプレートを指定してパッケージなどをインストールしていきます。その中でも最もベーシックな「starter-template」と呼ばれるプロジェクトで作成する流れになります。まずはプロジェクトディレクトリを用意して、その場所まで移動します。そしてvue initコマンドでテンプレート名を指定し、プロジェクト名を続けて入力します。

$ cd プロジェクトディレクトリ
$ vue init nuxt-community/starter-template [PROJECT_NAME]

  プロジェクト名を「nuxt-sample」というものにする場合には下記のようになります。

$ vue init nuxt-community/starter-template nuxt-sample

  初回は下記のようなエラーメッセージが表示される場合もあります。そんな時は案内の通りコマンドを入力し、足りないパッケージを追加します。

Command vue init requires a global addon to be installed.
Please run yarn global add @vue/cli-init and try again.

// @vue/cli-initのパッケージを追加
$ yarn global add @vue/cli-init and try again.

  問題なく進むと、いくつかの質問が表示されます。必要に応じて内容を編集し、Enterキーで進めていきます。

? Project name (********)
? Project description (********)
? Author (********)

  全ての質問が終わると、プロジェクトに必要なパッケージが一式インストールされ、下記のように完了をおしらせしてくれます。

vue-cli · Generated "PROJECT_NAME".

To get started:

　cd [PROJECT_NAME]
　npm install # Or yarn
　npm run dev

  表示されているコマンドでは、開発用にローカルサーバーで確認するようにビルドできます。試しにコマンドを実行して確認してみます。その前にnode_modulesをパッケージと合わせてインストールしていきます。

$ cd [PROJECT_NAME]
$ npm install

> nuxt@2.7.1 postinstall ******/node_modules/nuxt

  パッケージのインストールが終わると下記のコマンドを実行します。間も無くビルドが始まり、数秒で完了します。メッセージのように「http://localhost:3000/」でアクセスできますので、実際にブラウザで確認してみると下記のようなデモ画面が表示されます。

$ npm run dev

　Nuxt.js v2.7.1

　　Running in development mode (universal)
　　Listening on: http://localhost:3000/

ちなみにですが、先ほどはnpmコマンドでビルドしましたが、yarnコマンドでも同じように開発用サーバーを起動してローカルで確認できるようになります。

$ yarn
$ yarn dev

   

Nuxt.jsプロジェクトの新規作成（create-nuxt-appテンプレート）

いろいろな種類があるNuxt.jsプロジェクトのテンプレートですが、次は「create-nuxt-app」というカスタマイズに適した、いろんなパッケージを選択して含めることができるテンプレートになります。このテンプレートは、npxが必要とのことで、あらかじめコマンドで確認しておきます。

$ npx -v
5.10.0

  問題なければ準備OKですので、先ほどと同じようにディレクトリへ移動し、下記のコマンドでプロジェクトを作成していきます。

$ cd プロジェクトディレクトリ
$ npx create-nuxt-app [PROJECT_NAME]

  間も無くインストールが始まりますが、同じくいくつかの質問が表示されますので、順番に進めていきます。create-nuxt-appのテンプレートでは、いろんな拡張パッケージをこのタイミングでインストールしていくことも可能です。

? Project name (********)
? Project description (********)

  まずは、サーバーサイドにどれを使うかを選択します。「none」の場合は通常のローカルサーバーを利用する形になります。「express」なんかも利用できるようですね。

? Use a custom server framework (Use arrow keys)
❯ none
  express
  koa
  adonis
  hapi
  feathers
  micro

  次にLintツールや、コード整形ツール、またAPIからデータを取得する「Axios」などを追加していきます。こちらも必要に応じて選択していきます。

? Choose features to install (Press <space> to select, <a> to toggle all, <i> to invert selection)
>○ Progressive Web App (PWA) Support
 ○ Linter / Formatter
 ○ Prettier
 ○ Axios

  そして、デザインやレイアウト、UIパーツのデザイン用フレームワークを選択します。こちらも必要に応じて用意していきますが、後からインストールすることも可能です。

? Use a custom UI framework (Use arrow keys)
>○ none
 ○ bootstrap
 ○ vuetify
 ○ bulma
 ○ tailwind
 ○ element-ui
 ○ buefy

  Vue CLIの時と同じくテストツールを選択していきます。

? Use a custom test framework (Use arrow keys)
>○ none
 ○ jest
 ○ ava

  Nuxt.jsのレンダリングモードを選択していきます。SSRが特に不要なSPAあれば「Single Page App」でも問題なさそうですね。

? Choose rendering mode (Use arrow keys)
>○ Universal
 ○ Single Page App

  そしてこのタイミングでプロジェクトの所有者を記しておくことができます。

? Author name (********)

  最後にモジュールのパッケージマネージャーの種類を選択していきます。「npm」「yarn」のどちらかお好きな方で大丈夫かと思います。

? Choose a package manager (Use arrow keys)
>○ npm
 ○ yarn

  全ての選択肢に答えると間も無くパッケージのインストールが始まります。そんなに時間はかかりませんが、しばらくすると下記のメッセージが表示されて完了します。

> nuxt@2.7.1 postinstall ******/node_modules/nuxt

Listening on: http://localhost:3000/

To get started:
 cd [PROJECT_NAME]
 npm run dev

To build & start for production:
 cd [PROJECT_NAME]
 npm run build
 npm start

To test:
 cd [PROJECT_NAME]
 npm run test

  先ほどと同じくメッセージの通りコマンドを叩いてローカルホストのサーバーを起動させると、プロジェクトのファイルを閲覧することができます。

$ cd [PROJECT_NAME]
$ npm run dev

  数秒でビルドが終了し、表示されたローカルホストのURLにアクセスすると下記のような画面が表示されています。ここでは「vuetify」というデザインライブラリを使っていたので、デモの画面もかなりクールな感じに仕上がっています。  

Nuxt.jsプロジェクトの基本的なディレクトリ構成

このようにプロジェクトには異なるいくつかのテンプレート存在します。テンプレートや選択して追加した拡張機能によって中身が異なりますが、基本的には下記のような構成になっています。

PROJECT_ROOT
 ┣ .git
 ┣ .nuxt
 ┣ node_modules
 ┣ assets
 ┣ components
 ┣ layouts
  ┗ default.vue
 ┣ pages
  ┗ index.vue
 ┣ store
 ┣ static
 ┣ plugins
 ┣ middleware
 ┣ nuxt.config.js
 ┣ .eslintrc.js
 ┣ package-lock.json
 ┗ package.json

 

/.git	git用の設定ファイルなどが含まれる
/node_modules	各種モジュールが含まれる
/.nuxt	ビルドされたデプロイに使うソースコードが含まれる
/assets	画像やCSS、その他javascriptなどの静的ファイルが含まれる
/components	.vueの拡張子がついたコンポーネントファイルが含まれる
/layouts	レイアウトに使う.vueのコンポーネントファイルが含まれる
/layouts/default.vue	ページコンポーネントを内包しラップ要素として最初に読み込まれるコンポーネントファイル
/page	ルーティングに必要なページごとに使用するファイルが含まれる
/page/index.vue	プロジェクトでインデックスページとして使われるファイル
/store	ステートの管理などに使われるjsファイルが含まれる
/static	ビルドに含まない画像やCSSなどの静的ファイルが含まれる
/plugins	外部リソースとして使うjsファイルが含まれる
/middleware	ページの描画前に実行する関数などを定義する
/nuxt.config.js	metaタグの設定やOGP設定、その他Nuxtプロジェクトに関する設定を記述するファイル
/.eslintrc.js	lintに関する設定を記述するファイル
/package-lock.json	node_modulesに含まれるパッケージとバージョンを管理しているファイル
/package.json	プロジェクトに使用している（＝依存関係にある）パッケージを管理するためのファイル

  その他、インストールするパッケージによっては上記以外のものを含む場合がありますが、基本的なところについてはこのような構成になります。  

本番環境へのデプロイ用にソースファイルをビルド

最後にデプロイ用のビルドコマンドもローカルサーバー用にビルドした時に表示されていますので試してみると、プロジェクト内に「.nuxt」というフォルダが出来上がり、その中にビルドされたソースコードが入ります。あとはこのファイル一式を本番環境などのウェブサーバーにアップロードすればサイトとして閲覧することができます。

$ npm run build

 

---

  今回はNuxt.jsの導入とプロジェクト作成という、最初のフェーズにあたる部分をまとめていきました。Vue CLIなどでVue.jsを扱ったことがある場合ですと共通点も多いのではないでしょうか。今回は具体的な構築方法については触れていませんが、その部分はまた後日別記事でまとめていきたいと思います。   Nuxt.jsの学習についてはいろんな書籍が出ているので、それらも合わせて参考に進めていくと理解が深まります。特にこちらの書籍はわかりやすく実例としてソースコードも紹介されていますのでオススメです！