Nuxt.jsをつかおう：環境構築編

サイト制作にNuxt.jsを取り入れると何がいいのか、というと、公式ページのトップにかかれてある言葉がそのまま一言一句同意できます。

Nuxt.js は Vue.js アプリケーションの開発を楽しくするために必要なすべての設定が揃っています。

https://ja.nuxtjs.org/

とはいえ、いきなり「Nuxt.jsはいいぞ」と言われてもナンノコッチャかわからん上にどうしたらいいかも迷うと思いますので、ここではNuxt.jとは何か、何が便利なのか、にはできるだけ触れずに、Nuxt.jsを導入してサイト制作を便利に進めるための準備について書いていきます。
全三回、次のような構成になっています。

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

VSCodeのインストール

Nuxt.jsとは直接関係ないですが、VSCode(Visual Studio Code)をインストールしておくととても便利なので（特にターミナル画面に心理的抵抗のある人は、プロジェクトフォルダからターミナル開けるだけでも安心感やばいはず）先にインストールしておきます。

1. このページから必要ファイルをダウンロード
2. ダウンロードしたファイルは圧縮されてるので解凍
3. 解凍してできたファイル（Visual Studio Code.app）を「アプリケーション」フォルダに移動
4. アプリケーションを立ち上げる。初回だけ実行許可を問われるので問題なければ「開くボタン」（ないし肯定するボタン）を押す

VSCodeをコマンドから開けるようにしておく

これもNuxt.jsとは直接関係ないのですが、ターミナルでの操作はどうしても多少増えますのでターミナルからVSCodeを立ち上げるコマンドも入れておいたほうがあとあと便利です。

ちなみに、「おれこの作業してたっけな？（ターミナルからVSCodeを立ち上げるコマンドを入れてたっけな？」と不安に思ったら、ターミナルに次のコマンドを打ち込むとすでにインストールされているかされていないかが結果によってわかります。

code -v

次のように、バージョン情報が表示されたら、コマンドはすでにインストールされていると考えられます。

$ code -v
1.37.1
f06011ac164ae4dc8e753a3fe7f9549844d15e35
x64

すでにインストールされている場合は以下の作業は必要ありません。

1. こちらのページを参考に、まずVSCodeを起動します
2. (Ctrl+Shift+P) を押して出てきた入力欄に次の文字を打ち込みます（途中まで打ち込むと、候補が出てくるので、それを選ぶと楽かと思います）
3. Shell Command: Install ‘code’ command in PATH
4. VSCodeを再起動します。

Gitのインストール

これも直接はNuxt.jsと関係ないのですが、プロジェクト進行中に複数人数でファイルのやり取りをする場合に大変便利なので先にインストールしておくことをおすすめします。
そう、「バージョン管理とか難しそうだし自分には特に必要ないかなー」と思ってる方も、多少の追加作業でファイルのやり取りがとても便利になるので gitはインストールしておいたほうがいいのです。
手順は以下のとおりです。

1. すでにgitがインストールされてるかチェック
2. されていない場合、homebrewがインストールされているかチェック
3. されていない場合、まずXcodeとhomebrewをインストール
4. gitをインストール

こちらのページが大変わかりやすくまとまっています。
Git のインストール 〜Git をMacにインストールしよう〜 | バージョン管理システム入門(初心者向け)

すでにGitがインストールされてるかチェック

次のコマンドをコピペして実行してください。

git --version

git version 2.17.1

上記のようにバージョン情報が表示されればすでにGitがインストールされています。
表示されない場合、先にHomebrewをインストールします。

Homebrewがインストールされているかチェック

次のコマンドをコピペして実行してください。

brew doctor

Your system is ready to brew.

上記のような表示が出ればすでにインストールされています。
表示されない場合、XcodeとHomebrewをインストールします。

Homebrewをインストール

HomebrewはMacのパッケージ管理ソフトです。これをインストールしておくと、Gitに限らず今後いろいろとインストールしたりバージョンアップしたりするときに便利なので先にインストールしておきます。Homebrewをインストールする前に、まずXcodeをインストールします。
次のコマンドをコピペして実行してください。

xcode-select --install

しばらくしてXcodeがインストールされたら、次に以下のコマンドを実行してHomebrewをインストールします。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

最新の情報はHomebrewの公式サイトを参考にしてください。

Gitをインストール

Homebrewがインストールされていれば、まず最初に次のコマンドを実行してください。

brew update

しばらくして、アップデートチェックが完了したら次はこのコマンドを実行します。

brew install git

これでGitのインストールは完了です。

Node.jsとnpmをインストール

Node.jsとは：ウェブ開発環境において事実上のデファクトスタンダードになりつつある、Javascript実行環境。

npmとは：上記Node.jsのライブラリなどを扱うパッケージマネージャー。Node.jsをインストールすると一緒にインストールされる。

なんのことやらわからないかもしれませんが、ウェブ開発のややこしいことをいろいろしてくれるお助けアプリみたいなものです。え？Node.jsそのものがややこしいって？そうは言っても、Node.jsが無いともっとややこしくなったことを、Node.jsがだいぶラクにしてくれてるんです。これでも。
というわけでインストールしていきましょう。

1. Node.jsがすでにインストールされているかチェック
2. されていなければNode.jsのバージョン管理ソフトであるnodebrewをインストール
3. Node.jsをインストール

Node.jsがすでにインストールされているかチェック

次のコマンドを実行して、バージョンが表示されればインストールされています。

node -v

v11.16.3

上記のようにバージョン情報が表示されればすでにインストールされています。表示されなければ次の手順を実行していきます。

Node.jsのバージョン管理ソフト、nodebrewをまずはインストール

次のコマンドを実行してnodebrewをインストールしてください。

brew install nodebrew

念のため、インストールするディレクトリをあらかじめ作成しておきます。

mkdir -p ~/.nodebrew/src

nodebrewを使って、Node.jsの安定バージョンをインストールします。

nodebrew install-binary stable

おそらくこれが終わった時点でインストールされた安定版が使用されますが、念の為「安定版のNode.jsを使う」というコマンドも実行しておきます。

nodebrew use stable

次のコマンドを実行して、パスを通します。

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

今おこなった設定を反映させます。

source ~/.bash_profile 

さいごに念の為、次のnodeコマンドを実行してバージョン情報が表示されればインストール成功です。

node -v

これにて環境構築編は終了です。
PCを新たな環境にしない限り、この記事の作業は一回ですみます。
続いてプロジェクト構築編に進みます。