Nuxt.jsを使おう：日常業務編

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

全4回にわたって弊社が猛プッシュしているNuxt.js。そこまでしてオススメするほど、導入するとサイト制作が便利になる、段違いに価値のあるツールですがいよいよ日常業務編。
この日常業務が使いやすくなければ導入する意味がないので、ここはさくっといきます。
作業を始める前や作業中、「あれ？あれどうやってするんだっけ？」と思ったときにはこのページを思い出してもらえれば、すんなり解決すると思います。

作業開始と作業終了時

作業開始はコマンド一発。作業終了はショートカットキー一発です。
そのものずばりを書いておきます。

作業開始

npm run dev

デフォルトなら
http://localhost:3000
で作業用サーバーが立ち上がります。ターミナル画面にその旨が表示されます。

作業終了

ターミナルでCtrl + C

ちなみにターミナルを停止させたいときはCtrl + C です。カーソルが明滅しながら表示されていれば、入力受け付け状態、それ以外は実行状態。実行状態を停止するには Ctrl + C。これを覚えておくとNuxt.jsの開発時だけでなくいろいろと応用が利いて便利です。

何かうまく動かないとき

最近のターミナルはけっこう親切で、うまく動かないときも表示されているメッセージを読むとそのものずばりな解決方法が提示されてたりするんですが、そうでない場合も多いですし初心者はとくにうまく動かないときにパニックになってしまう気持ちもよくわかります。
うまく動かないときはまず次の点を再確認してみましょう。

Nuxt.jsのプロジェクトフォルダで作業してるか（ls -lコマンドを打ったときにpackage.jsonとnuxt.config.jsは表示されるか）？

それでもうまくいかない場合、次の作業を試してみます。

1. [ node_modules ]フォルダをまるごとゴミ箱に入れる
2. そのあと、次のコマンドを実行

npm install

これは、プロジェクトに使ってるパッケージのいずれかに問題がある可能性を疑っていて、どれがその問題のパッケージなのか探り当てるのも作業コストがかかりすぎるのでそれならば一旦全部削除して、もういちど最初からパッケージのインストールを試みています。
この操作はたまに行うことになるかもしれませんので、覚えておくと良いです。
ターミナル作業に慣れてくると、このような複雑な作業もコマンド一発で再現できるようになるので、その便利な恩恵を活用しています。

それでもうまく動かない場合、npm（とNode.js）のアップデートを試みます。
次のコマンドを実行してみます。

nodebrew install-binary stable

続けて次のコマンドを実行します。

nodebrew use stable

納品時、仮アップ時

納品ファイルや仮アップファイルを作るには次のコマンドを実行します。

npm run generate

distというフォルダが出来るので（おそらくディストリビュートの略）、できあがったこのdistフォルダの中身が納品物一式です。

参考までに

「なんのコマンド打ったらいいんだっけ？」と忘れるたびに、このページを開けばいいのですが、作業中のコマンドにはある程度覚えやすい法則があります。

完全に習得する必要はありませんが、頭の片隅に置いておくと、いずれ役に立つかも知れません。

npm run 何々、で作業中はコマンドを実行させてる

題の通りですが、作業中はnpm run に続けて、何かしらのコマンドを打つことが多いです。このことさえ覚えておくだけでもだいぶスムーズになるかもしれません。

では、npm run のあとに続く何々のコマンドはどうなってるのか、と言いますと、一連の記事で何度も出てくる[ package.json ]に書かれてあります。

{
  "name": "test_project",
  "version": "1.0.0",
  "description": "My wonderful Nuxt.js project",
  "author": "Masamune",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "nuxt": "^2.0.0",
    "bootstrap-vue": "^2.0.0-rc.11",
    "bootstrap": "^4.1.3",
    "@nuxtjs/axios": "^5.3.6"
  },
  "devDependencies": {}
}

[ package.json ]を開くとこんな感じで書かれてあると思いますが（中が多少違ってても大丈夫です。むしろ全然違う場合もありえます。後述しますが部分的にあってればこのまま説明を読み進められます）、注目するのは次の部分です。

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

この、”scripts”に入ってある値が、何々の部分になります。
詳しく書くと、npmにある“コマンドのエイリアス機能”なんですが、つまりは本来複雑な入力をしないとうまく動かないコマンドを、package.jsonの”script”部分で設定しておけば、[ npm run ]のあとに続いて別名で実行できる機能になります。何のことやらわからなくても、とりあえずこれを見れば、[ npm run ]のあとに続けて [ dev ] と入力したり、 [ generate ] と入力したりすれば良いのかーという手がかりすることができます。

日常でつかうコマンドなどをマスターすれば、あとは初心者としてのとっかかりを伝えていきます。