Macのターミナルで【Vue.js(Vue CLI 3系)】のvue コマンドを使えるようにするまでの話


#そもそもなんでVue.js?

現在、WEBサイトのフロントエンド開発を主に仕事でしているのですが、フロントエンドエンジニアとしてJavaScriptのフレームワークのひとつぐらいまともにプログラミングできないとまずいよな〜と思ったのがきっかけです。
日本語のドキュメントもあり、フレームワークを調べてるときに比較的学習コストが少ないということで今回Vue.jsを選択しました。
現在は様々な機能が使えるVueCLIを使って開発するのがトレンドらしく、とりあえず触ってみよう的な試みです。

#Vue.jsについてはこちらの記事に詳しく書いてありました。

>[Vue.js概要？](https://qiita.com/asip2k25/items/bd4bdccd5201d542953c)

#環境セットアップのための予備知識

| OS環境 | Mac OS 10.13.6(High Sierra) |
|:-----------------|------------------:|:------------------:|

VueCLI 3系をインストールするにあたり、以下のようなサイトを参考にしました。

>[10分で始めるVue.js(基本編)
](https://qiita.com/hikarut/items/a71f065feaa3f5bca5e3)
>[Vue CLI 3 をインストールしプロジェクトを作成する方法
](https://upd.world/vue-cli-3-install/#_Nodejs)
[Homebrewからnodebrewをインストールして、Node.jsをインストールするまで](https://qiita.com/limonene/items/a10c2755dd2784357c43)

、、、。

いきなり、なじみのない言葉が、、、npm、homebrew、nodebrew、Node.js？？？？

ということで調べて自分なりの解釈でざっくりと以下のように理解しました。

##Node.js

WEBブラウザ以外でjsを動かすための環境のひとつ。
サーバサイドで動くJavaScriptのことでサーバサイドJavaScriptと呼ばれることもある。
従来のjavascriptととの違いは実行環境(内部的に構築されてるみたい)とライブラリからなっている(最初の時点である程度のモジュールが組み込まれているらしい)

##Homebrew

Macのターミナル用の**※パッケージ管理システム**

**※パッケージ管理システムとは**
ターミナル用のAppleストアやgoogleストア的なもの。それらが目的に応じていろいろ用意されている。
Ruby→gem/PHP→compser/など

##npm

タスクランナー/モジュール(webpackやbrowserifyなど)などの開発環境系のパッケージ管理するためのもの

##nodebrew

node.jsのversion管理するためのパッケージ管理システム

パッケージはそれぞれ、依存関係にあり、Vue.jsをインストールするための流れはざっくりこんな感じ

HomebrewをインストールするためにX codeをインストール

↓

nodebrewをインストールするため、Homebrewをインストール

↓

Node.jsとnpmをインストールするため、nodebrewをインストール

↓

VueCLIをインストールするため、Node.jsとnpmをインストール
(node.jsをインストールする際にnpmをインストールされる)

↓

ようやく、VueCLIをインストール

#セットアップ

それではいきましょうw

##X codeをインストール

[App storeからXcodeをインストール](https://itunes.apple.com/jp/app/xcode/id497799835?mt=12&ign-mpt=uo%3D4)

##コマンドライン・デベロッパーツールをインストール

ターミナルから$ xcode-select --installコマンドを発行すると
以下のようにインストールを要求されて

```ターミナル
$ xcode-select --install
xcode-select: note: install requested for command line developer tools
```
同時にポップアップが出てくるので"インストール"を選択し利用規約に同意します。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3137343238332f61356335323066322d383938372d353435322d653039382d6164343934363935613039652e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409259/0b12ab53-7a00-9eb0-4c3b-010538341884.png)

##Homebrewをインストール

Homebrewの[公式サイト](https://brew.sh/index_ja.html)からコードをコピペしてEnterを押します。
途中でEnterの入力/インストールユーザのOSパスワードの入力を求められるので入力して進んでください。

```ターミナル
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

```

インストールが確認するには以下のコマンドを実行できればインストールされたことになります。

```ターミナル
$ brew doctor
```
##nodebrewのインストール

```ターミナル
$ brew install nodebrew
```
インストールを確認するには

```ターミナル
$ nodebrew -v
```

情報が表示されたらインストールされてます！！

##Node.jsとnpmのインストール

Node.jsの最新版をインストール

```ターミナル
$ nodebrew install latest
```

Node.jsを有効にします。

```
nodebrew use 先程インストールしたNode.jsのver
```

nodeコマンドを使用するため、パスを通します。

```
#zshの場合は
echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> ~/.zshrc

#bashの場合は
echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> ~/.bashrc
```

先程追加したパスが動くようになり、nodeコマンドが使えるようになります。

```
#zshの場合は
$ source ~/.zshrc

#bashの場合は
$ source ~/.bashrc
```

npmはNode.jsとともにインストールされます。

npmがインストールしたか確認

```ターミナル
$ npm -v
```

Node.jsがインストールしたか確認

```ターミナル
$ node -v
```

バージョンが表示されればOKです！！

##Vue CLI(Vue.js)のインストール

```ターミナル
npm install -g @vue/cli
```

vueコマンドを使うためのパスを確認

```ターミナル
npm bin -g
#/Users/xxxxxxx/npm/bin
```

###vue コマンドを使用するためにパスを通す

```ターミナル
$ export PATH=/Users/xxxxxxx/npm/bin:$PATH
```

vueのインストールを確認

```ターミナル
$ vue --version
```
バージョンが表示されればOKです！！

#おしまい

とりあえず、Vueを動かす環境づくりはこんな感じでした。