Nuxt.jsをつかおう：プロジェクト構築編

• 環境構築編
  • PCの設定など、一回だけ行う作業
  • 記事ではMacを対象としていますが、Windowsでも応用可能です
• プロジェクト構築編（いまここ）
  • 新規に作業するときなど、新たに仕事を請け負うたびに行う作業
• 日常業務編
  • プロジェクトの進行中、つまり仕事を進めるときに行う作業
• 初心者のとっかかり編
  • 初心者がまず最初に何から学べばわかりやすいかを弊社なりに考えた結果

プロジェクト用のフォルダを作る

まずはプロジェクトを作成します。どこか適切なフォルダを作ったらVScodeを立ち上げて「ファイル」→「フォルダーを開く」からそのフォルダーを選びます。

VScodeの画面下にターミナルウインドウが表示されていなければ（通常は表示されているはず）、メニューから「表示」→「ターミナル」を実行してターミナルウィンドウを表示します。

この時点で、プロジェクトフォルダがカレントフォルダ（現在の位置）の状態でターミナルが開きますので、ターミナル作業がしやすいです。今後、特に記載がなければターミナル作業はこのVScodeのターミナル画面で作業することを前提とします。

プロジェクトにNuxt.jsを構築

ターミナルウインドウをクリックして、入力状態にします。入力状態になっているとカーソルが明滅します。
公式サイトの説明を参考に、次のコマンドを実行します。

npx create-nuxt-app <project-name>

<project-name>のところは適切なプロジェクト名にしてください。このプロジェクト名がフォルダ名にもなります。
npxコマンドは、最新のnpmがインストールされていれば（具体的には5.2.0 以降）標準でインストールされているはずです。

例えばプロジェクト名を「test_project」にしたいなら、

npx create-nuxt-app test_project

と入力します。

しばらくいろいろとPCが働いたのち、何やらいくつか質問されます。環境やバージョンによって画面は若干違う場合がありますが、基本は同じはずなので適宜自分の環境に置き換えて操作してください。

? Project name (test_project) 

↑プロジェクト名を再度聞かれます。括弧内にデフォルトが提示されるので、デフォルトのままで良ければそのままEnterキーを押します。変更したい場合はここで直接入力してください。

? Project description (My remarkable Nuxt.js project) 

↑プロジェクトの概要文を聞かれます。デフォルトで良ければそのままEnterキーを押してください。

? Author name (Masamune) 

↑作成者の名前を聞かれます。デフォルトで良ければそのままEnterキーを押してください。

? Choose the package manager (Use arrow keys)
❯ Yarn 
  Npm 

↑パッケージマネージャーをYarnとNpmのどちらを使うかを聞かれます。何のことかわからない場合は、カーソルをNpmにあわせてEnterキーを押してください。このブログではNpmを使う前提で説明を進めます。

? Choose UI framework (Use arrow keys)
❯ None 
  Ant Design Vue 
  Bootstrap Vue 
  Buefy 
  Bulma 
  Element 
  Framevuerk 
  iView 
  Tachyons 
  Tailwind CSS 
  Vuetify.js 

↑UIフレームワークを使用したい場合、何を使うか聞かれます。このブログではBootstrapを使う前提で説明を進めますので、カーソルをBootstrap VueにあわせてEnterキーを押してください。
ちなみに、この操作はあとで変更できます。
Nuxt.jsに慣れてきたら、ほかのUIフレームワーク、たとえばVuetify.jsなどに挑戦してみてもいいと思います。

? Choose custom server framework (Use arrow keys)
❯ None (Recommended) 
  AdonisJs 
  Express 
  Fastify 
  Feathers 
  hapi 
  Koa 
  Micro 

↑サーバーサイドのフレームワークを聞かれます。このブログでは使わない前提で説明を続けるのでNone(Recomended)にカーソルをあわせてEnterキーを押してください。
Nuxt.jsに慣れてきて、サーバーサイドレンダリングなどにも挑戦したい場合、Expressなどをこの段階で導入しておくと、あらかじめさまざまな設定がされた状態でプロジェクトがセットアップされますのでおすすめです。

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to inv
ert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA) Support

↑ここは操作方法が少し変わっていて、カーソルを合わせてスペースキーを押すたびに選択／選択解除が切り替わります。Webページのフォームのチェックボックスみたいな動きです。
この記事では触れませんが、使う機会が多いのでAxiosを選択状態にしてください。
PWAサポートのほうは、モバイルアプリを作るときに選択するものなのでこのブログでは触れません（選択解除状態のまま進めて結構です）。

? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to inver
t selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files

↑キレイなコーディングかどうか、機会が判断してくれるおせっかい機能を導入するかしないか聞かれます。
Nuxt.jsに慣れてきたらESLintなどの導入をおすすめしますが、Nuxt.jsを使う前から一度にたくさんのツールを覚えるのは大変なので、このブログでは触れません。全部空白のままEnterキーを押して次のステップに進めて結構です。

? Choose test framework (Use arrow keys)
❯ None 
  Jest 
  AVA 

↑テストフレームワークを選びます。こちらも慣れてきたらJestなどの導入をおすすめしますが、現段階では何もなしで結構です。ブログでも触れません。

? Choose rendering mode (Use arrow keys)
❯ Universal (SSR) 
  Single Page App 

↑サーバーで動作するサイトを作るか、それとも普通にアップロードするだけの静的ページを作るか聞かれます。
このブログでは静的ページをつくる説明にとどめますのでSingle Page AppにカーソルをあわせてEnterキーを押してください。

? Choose development tools (Press <space> to select, <a> to toggle all, <i> to i
nvert selection)
❯◯ jsconfig.json (Recommended for VS Code)

↑VSCodeを使うときに便利な設定ファイルをあらかじめ作成しておくかどうか聞かれます。
jsconfig.json (Recommended for VS Code)にカーソルを合わせてスペース機を押して選択状態にして次に進みます。

🎉  Successfully created project test_project

  To get started:

        cd test_project
        npm run dev

  To build & start for production:

        cd test_project
        npm run build
        npm run start

↑しばらく待って、上のようなメッセージが表示されればプロジェクトは作成成功です。
この記事では例としてプロジェクト名を「test_project」にしたので同名のフォルダーが出来てるはずです。

現時点で操作に不安があった場合、フォルダーごと削除してもう一度同じ操作を実行すれば何度でもやり直しが出来ます。
もしここまでの作業で不安があるままプロジェクトを進行してしまってから、あとでこの作業をやり直したいと思った場合はやり直しが効かないことはないのですが考慮すべき事項がたくさん増えてしまうためさまざまなスキルが要求されます。ですので、現時点で不安がある場合は思い切って作成したフォルダーを捨ててしまって、この記事の最初からプロジェクト作成をやり直すのもひとつの手でしょう。
また、時間のあるときに「test_project1」「test_project2」など、プロジェクト作成を何回もやってみることも強くおすすめします。間違えても間違えなくても、作成したフォルダを捨ててしまえばいいので、何回か操作をやるうちにプロジェクト作成の自信がついてくると思います。

プロジェクトディレクトリーに移動する

ターミナルが苦手な人が一番迷うのが、「カレントディレクトリ（現在どのフォルダの中で作業してるのか）を意識していない」ことが原因の場合が多い気がします。
つまり逆に言うと、現在どのフォルダの中で作業してるのかを意識するようになれば、迷うことはかなり少なくなります。

ややこしいのが、このブログ記事でも今までのようにコピペだけで動作するものと、カレントディレクトリを意識しないといけない作業も混在していて、初心者は特に迷うように思えます。
目安としては、システムのセットアップやアプリのインストールなどはどのディレクトリからでもコマンドをコピペでOK、プロジェクトを作ったりファイル・ディレクトリを操作する作業はカレントディレクトリを意識する必要がある、というふうに考えられるようになると、作業がだいぶわかりやすくなるかと思います。

現在のフォルダを知る、わかりやすい方法

というわけで、意識して現在どのフォルダで作業しているかを知る必要があります。
慣れた人ならコマンド待機状態の表記だけでも知ることが出来るのですが、もっと手っ取り早い方法があります。

それは、現在のフォルダの中身を一覧するコマンドを打つこと、です。

ls -l

上記のコマンドを打ち込んでください。毎回コピペするのも面倒だと思うので、覚えておくといいでしょう。半角エルエス半角スペース、半角ハイフン、半角エルです。使ってるとそのうち覚えます。

実は、「現在どのフォルダなのか」を知るそのものずばりなコマンドもあるにはあるのですが、そちらよりも現在のフォルダの中身を一覧する方がわかりやすいのです。それには理由があります。

ふだん作業してるときも、わたしたちは「どのフォルダか」よりも「中に何が入ってるか」を常に表示させています。
GUIだと中身の一覧が常に表示されてるので困らないのですが、ターミナルで作業してると普段から表示されているわけではないので、時々迷うのです。ですので、迷ったらエルエス、ハイフンエルを唱える癖を付けて、フォルダの中身を一覧すれば、どのフォルダで作業しているのか把握しやすくなります。

Nuxt.jsのプロジェクトフォルダーの中にいるか確認する

ですので、エルエス、ハイフンエルを打ち込んで、フォルダの中身を表示してみましょう。

ls -l

結論から言うと、次の二つのファイルがあるかどうか、が見分けるための重要な鍵になります。

• package.json
• nuxt.config.js

さらに結論からいうと、プロジェクトを作成した直後では、上の二つは表示されないと思います。つまり今現在はNuxt.jsのフォルダの中にはいないということです。

ではどういうふうに表示されているかというと、プロジェクト作成直後には

test_project

とだけ表示されているはずです（この記事ではプロジェクト名をtest_projectとして進めているのでこういうふうに表示されていますが、もし違うプロジェクト名で作業をした場合はそのプロジェクト名に適宜置き換えて読んでください。つまりプロジェクト名として設定したフォルダが存在しているはずです）。

そこで、そのプロジェクトフォルダに移動します。

cd test_project

そしてフォルダの中身を表示してみましょう。

ls -l

• package.json
• nuxt.config.js

たくさん表示されると思いますが、上の二つのファイルが表示されていれば、プロジェクトフォルダで作業していることになります。
今後は、ここで作業するのが基本になりますので、この二つのファイルが存在するフォルダに今現在いるのかどうかをしっかり意識しながら作業を進めてください。

PugとStylusをインストールする

プロジェクトが作成できたら、次にPugとStylusを使えるようにします。
PugはHTMLの閉じタグを書かなくてもすむようになる便利ツール、StylusはCSSの波括弧やコロンやセミコロンを書かなくても済むようになる便利ツール、のようなものです。
たったそれだけ？と思うかも知れませんが、作業が絶大に楽になるので、是非入れておきましょう。この一連のブログ記事でも入れてあるものとして説明します。

前章で長々と説明したように、プロジェクトフォルダの中（package.jsonとnuxt.config.jsが存在してるフォルダ）で次のふたつのコマンドを実行します。

npm i -D pug pug-loader pug-plain-loader

npm i -D stylus stylus-loader

上がPugのインストールで、下のコマンドがStylusをインストールするコマンドです。

2020-01-10 追記
VUetifyが2.0からstylusではなくsassに移行したようです。当社でもVuetifyはよく使うので、あわせてsassに移行しています。stylusの代わりに以下のコマンドでsassをインストールすることも検討してみてください。

npm i -D node-sass sass-loader

公式サイトを参考に
CSS プリプロセッサを使うには？ – NuxtJS
以下のように一気にインストールしても構いません。

npm install --save-dev pug@2.0.3 pug-plain-loader coffeescript coffee-loader node-sass sass-loader

以上です。詳しくは以下のリンクを参考にしてください。
プリプロセッサ – Nuxt.js

これでプロジェクトのセットアップは完了しました。
次はいよいよ実際の作業編です。