OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

Vue.jsのフレームワークであるNuxt.jsの導入と新規プロジェクト作成フローまとめ

最近、クライアント案件でも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/
Vue.jsのフレームワークであるNuxt.jsの導入と新規プロジェクト作成フローまとめ ちなみにですが、先ほどは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」というデザインライブラリを使っていたので、デモの画面もかなりクールな感じに仕上がっています。 Vue.jsのフレームワークであるNuxt.jsの導入と新規プロジェクト作成フローまとめ  
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の学習についてはいろんな書籍が出ているので、それらも合わせて参考に進めていくと理解が深まります。特にこちらの書籍はわかりやすく実例としてソースコードも紹介されていますのでオススメです!
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram