0%

Programmingプログラミングナレッジ

Posted:2019.05.24

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の学習についてはいろんな書籍が出ているので、それらも合わせて参考に進めていくと理解が深まります。特にこちらの書籍はわかりやすく実例としてソースコードも紹介されていますのでオススメです!

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】