初心者向け　Node.jsの導入からVue CLI3でプロジェクトを立てるまで(Mac)

#記事を書いた理由
プログラミング学習歴三ヶ月程度の超初心者です。Vue CLI3を導入するためにあちこちで参照した知識を備忘録的にひとつにまとめた記事です。同じような初心者の学習の助けになれば幸いです。

# 全体の流れ
1.homebrewをインストール
2.homebrewを使ってnodebrewをインストール
3.nodebrewを使ってNode.jsをインストール
4.Vue CLI3をインストール
5.Vue CLI3でプロジェクトを立てる

Node.jsはそのまま公式ホームページからインストールしてもいいんですがnodebrewというバージョン管理システムを導入した上でインストールした方が後々便利です。そしてそのnodebrewは、homebrewというパッケージ管理システムを導入した上でインストールした方が後々便利です。

パッケージとは、実行ファイルや設定ファイルなど様々なファイルを一つのファイルとしてまとめたものです。パッケージ管理システムを使えばパッケージのインストール（アンインストール）作業を簡単に行えます。また、パッケージ管理システムを導入することでインストールしたパッケージやライブラリの依存関係などが管理できて便利です。
Node.jsのバージョンを管理できるツールであるnodebrewを、homebrewによって導入します。

# homebrewの導入
ここから先はほとんどコマンドを入力することでMacを操作することになります。コマンドとはMacに対して呪文を唱えるようなもので、ソフトのインストールや編集などが全て文字の入力だけで操作できます。以下のような記事を読んだり、調べてみたりしてください。
[Macでコマンドラインを使おう（超初心者向け）](https://qiita.com/KeitaNakamura/items/89d4e8916964f0af5714)

まずはhomebrewの導入の仕方を説明します。
先ほど説明しましたがhomebrewとはパッケージ管理システムです。何ができるのかというと、このhomebrewから様々なパッケージをコマンド一つでインストールやアンインストールでき、インストールしたものを一元的に管理できます。

以下のコマンドをターミナルに入力することでインストールできます。

```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```
最新のコマンドは[Homebrew](https://brew.sh/index_ja.html)で確認してください。

インストールが終了したらちゃんとインストールできたか確認しましょう。

```
brew doctor
```
とコマンドを入力し、

```
Your system is ready to brew.
```
と出てくればインストールは成功です。

# nodebrewの導入
さきほど入れたhomebrewを使ってnodebrewをインストールしましょう。
homebrewは```brew install パッケージ名```というコマンドでパッケージをインストールできます。

```
brew install nodebrew
```

インストールが終了したら確認しましょう。一番手軽な確認方法はバージョン情報を確認することです。

```
nodebrew -v
```
バージョン情報が出てきたらインストールは成功です。次にパスを通しましょう。
###パスを通す

「パスを通す」とは、Macに実行ファイルの場所を教えてあげる事です。 パスを通すことで、コマンドが実行できます。ファイルにパスを通すための情報を書き加えることで、パスが通ります。ここで使用するファイルは```.bash_profile```というファイルです。このファイルはホームディレクトリ直下にありますが普段は見えないように隠されています。存在していない場合もあるので、その場合はファイルを作成する必要があります。

まずは```.bash_profile```ファイルがあるかどうかの確認です。
ホームディレクリをカレントディレクトリにしたうえで、

```
ls -a
```
というコマンドを打ちます。これでホームディレクトリ直下のファイルが普段は見えないように隠されているものも含めてすべて表示されます。このなかに```.bash_profile```ファイルがあれば問題はないですが、ない場合は自分で作る必要があります。
以下のコマンドを打つことで```.bash_profile```ファイルを作成できます。
もちろんホームディレクトリをカレントディレクトリにした状態で作りましょう。

```
touch .bash_profile
```
コマンドを入力したあと、もう一度先ほどの```ls -a```を打つことでファイルが作成できたか確認できます。作成が成功したらそのファイルにパスを通します。

パスを通すための具体的な方法は、ファイルに情報を書き加えることです。```.bash_profile```に情報を書き加える必要があります。そのためのコマンドが以下です。

```
vi ~/.bash_profile
```

　```vi```コマンドと呼ばれるこのコマンドを入力することで```.bash_profile```に情報を書き加えられる編集状態になります。
注意するべきは、この```vi```コマンドを入力することで、画面がファイルの編集画面へ移動することです。```vi```コマンドによるファイルの編集はターミナルでのコマンドとは勝手が違うため、以下のリファレンスなどを参考にしながら編集してください。
[viコマンド（vimコマンド）リファレンス](https://qiita.com/TD3P/items/0510bee10bcfd88afeee)

パスを通すためのコマンドは以下の通りです。コピペして書き加えてください。

```
export PATH=$HOME/.nodebrew/current/bin:$PATH
```
以上を入力すればパスの追加は完了です。画面を元に戻すために、```:wq```と入力しましょう。この```:wq```も```vi```コマンドの一種です。
この後、bash_profileを更新して先ほど入力した設定を反映させる必要があります。
以下を入力することで反映します。

```
source ~/.bash_profile
```
ここまでできたらパスを通すことまで完了です。

```
nodebrew setup
```
以上のコマンドを押してnodebrewのセットアップをします。これによってNode.jsのインストールに進めます。

# Node.jsのインストール
nodebrewでインストールできるNode.jsのバージョンは以下のコマンドで確認できます。

```
nodebrew ls-all
```
大量のバージョンが画面に表記されたと思います。この中から好きなバージョンを選んでインストールして、また不具合が起きるなど気に入らなくなったら別のものをインストールして使用できます。これがnodebrewというバージョン管理システムを使う利点の一つです。
確認したらインストールしましょう。例えばバージョン10.1.0がインストールしたい場合は以下のコマンドです。

```
nodebrew install-binaly v10.1.0
```

その時点での安定版がインストールしたければバージョン情報を```stable```に、最新版がインストールしたければ```latest```を指定します。

```
nodebrew install-binaly stable
```
```
nodebrew install-binaly latest
```

インストールが終わったら、どのバージョンを使用するか以下のように宣言しましょう。これをしないと使用できません。

```
nodebrew use stable
```

使いたいバージョンが指定できてるか確認しましょう。
以下のコマンドでcurrentが指定したバージョンになっていればOKです。

```
nodebrew ls
```
最後の確認をしておきましょう。

```
node -v
```
バージョンが表示されたらNode.jsのインストールは完了です。Node.jsをインストールすることでnpmも同時にインストールされています。```npm -v```とコマンドを打つことでバージョンを確認できます。

#Vue CLI3のインストール
ここまでできたらようやくVue CLI3のインストールに進みます。
以下のコマンドでインストールできます。

```
sudo npm install -g vue-cli
```
先頭の```sudo```とは管理者権限を表すコマンドです。上記のコマンドはシステム全体としてインストールされるものなので、管理者としてコマンドを入力する必要があります。パスワードを聞かれますが、Macを設定する際に決めたパスワードを入力することでインストールが開始されます。
バージョンを確認します。

```
vue --version
```
正しいバージョンが出たら、Vue CLI3のインストールはこれで終わりです。

#　プロジェクトを作成する
Vue CLI3では、アプリケーションの開発はプロジェクトという単位で行われます。
プロジェクトの作成は```vue create プロジェクト名```で作成できます。
例えばmyprojectというプロジェクトを作成したい場合は以下の通りです。

```
vue create myproject
```
このとき、

```
?Please pick a preset: default 
(babel, eslint)
```
と質問されます。これはbabelというトランスパイラ、ESlintというJavaScriptの検証ツールを使うかどうかの質問です。そのほかの細かい設定も選択できますが、このまま```Enter```キーを押して特に問題ないです。

これでプロジェクトの作成が始まりますが、npm側の問題によって```permission denied```と書かれたエラーが起きる場合があります。
これはさきほど```sudo```コマンドでシステム全体にインストールしたことによって起きた管理者権限の問題です。

```
sudo chown -R whoami ~/.npm
```
上記のコマンドの```whoami```を```ホームディレクトリ名```に変えて打ち込んでください（そのままコピペしてはダメです）。これでもう一度プロジェクトを作成してもエラーは出ないと思います。
それでも```permission denied```エラーが出る場合、こちらの記事が助けになるかもしれません。
[npmでpermission deniedになった時の対処法[mac]](https://qiita.com/okohs/items/ced3c3de30af1035242d)

次に作成されたプロジェクトを実行します。

```
npm run serve
```
上記のコマンドでプロジェクトが実行されます。```DONE  Compiled successfully```と出たら成功です。Node.jsの開発用Webサーバでプロジェクトが動作されています。Webブラウザで```http://localhost:8080/```にアクセスするとVue CLI3によって作成されたサンプルのWebページが表示されます。```ctr```+```c```キーで終了できます。

```
npm run build
```
終了した状態で上記のコマンドを打つと、公開用のファイルが作成されます。


#　最後に
これでVue CLI3を使ったVueアプリケーションの開発ができるようになりました。Vue CLI3を使うとWebブラウザベースのGUI管理ツールが使えるようになります。
最後にGUI管理ツールの起動コマンドを載せておきます。

```
vue ui
```
Vueプロジェクトマネージャの画面が表示され、Webブラウザでプロジェクトが管理できて便利です。プラグインの画面から```Vue Router```や```Vuex```の追加なども簡単に行えます。

######　参考リンク・文献
[NodebrewでNodeをインストールする](https://qiita.com/mame_daifuku/items/373daf5f49ee585ea498)
[nodebrewでNode.jsをインストールする。](https://qiita.com/yukibe/items/bae442fa6314bd8f9d7a)
[VueCLI3をmacで使用するまで](https://qiita.com/IGOH/items/43adfee4cf1498ee5b4c)
[Vue.js を vue-cli を使ってシンプルにはじめてみる](https://qiita.com/567000/items/dde495d6a8ad1c25fa43)
[Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート)](https://qiita.com/Junpei_Takagi/items/603d44f7885bd6519de2)
[Node.jsをMacにインストール！（Homebrew→Nodebrew→Node.js順にインストール）](http://mmorley.hatenablog.com/entry/2016/11/22/233034#Nodebrew%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)
[node.jsをインストール　nodebrewを使って管理する](http://5log.jp/blog/nodebrew/)
[MacでPATHを通す（ユーザー単位 or 全ユーザー）](http://5log.jp/blog/path/)
[.bash_profileと.bashrcのまとめ](https://qiita.com/takutoki/items/021b804b9957fe65e093)
[OS X のディレクトリ構成](https://qiita.com/takasianpride/items/00cfb7bd80b6f26fd4ed)
[viコマンド（vimコマンド）リファレンス](https://qiita.com/TD3P/items/0510bee10bcfd88afeee)
[PATHを通すために環境変数の設定を理解する (Mac OS X)](https://qiita.com/soarflat/items/d5015bec37f8a8254380)
[ターミナルの設定ファイル.bash_profileを設置する](http://webdev.jp.net/create-bash_profile/)
[nodebrewでnodeのバージョンを切り替える方法](https://qiita.com/kuriya/items/36ae29366df0b7c95dec)
[Unhandled Rejection Errors](https://npm.community/t/unhandled-rejection-errors/5296)
[npmでpermission deniedになった時の対処法[mac]](https://qiita.com/okohs/items/ced3c3de30af1035242d)
[いまさら聞けない！npmのこれだけは知っておきたい基礎知識](https://www.webprofessional.jp/beginners-guide-node-package-manager/)
[ファイルの所有者を現在のユーザーに変更する](https://qiita.com/katsukii/items/c730c0b7d74535abd536)
[homebrewとは何者か。仕組みについて調べてみた](https://qiita.com/omega999/items/6f65217b81ad3fffe7e6)
[いちばんやさしい Vue.js 入門教室 ](https://www.amazon.co.jp/%E3%81%84%E3%81%A1%E3%81%B0%E3%82%93%E3%82%84%E3%81%95%E3%81%97%E3%81%84-Vue-js-%E5%85%A5%E9%96%80%E6%95%99%E5%AE%A4-%E5%A4%A7%E6%B4%A5-%E7%9C%9F/dp/4800712351)