新しいMacでNode.jsのインストールからVue.js + nuxt.js + Vuetifyで開発環境手順(zsh対応版)

# 概要
macOS Catalina におけるフロントエンドの開発環境作成
Catalinaからbashからzshが標準になったため、zshでの環境構築方法を記載
※ バージョンは全て2020年6月30日時点のものです
  新しいものが入っていても基本的には問題ないはず


# brew
> Mac用のパッケージ管理ソフト

```Bash:インストール
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```

### coreutils
> GNUコマンドを使用する

```bash:インストール
$ brew install coreutils
```

### jq
> JSONを成形、絞り込みを行う

```bash:インストール
$ brew install jq
```

```bash:例
$ echo ‘[{“hoge”: “hoge”, “fuga”: “fuga"}]’ | jq
```

### xz
> 圧縮、解凍

```bash:インストール
$ brew install xz
```

```bash:例
$ xz -z hoge
$ xz -d hoge.xz
```

### wget
> ファイルのダウンロード

```bash:インストール
$ brew install wget
```

```bash:例
$ wget -r http://………/download.zip
```

### 確認
上記でインストールしたパッケージが表示されることを確認

```bash
$ brew list
```

# nvm
> Node.jsのバージョン管理ツール

nvmのGitHubを参照して最新バージョンをインストールする
https://github.com/nvm-sh/nvm#install-script


```bash:インストール
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
```


```bash:環境設定
$ vim ~/.zshrc
```

vimが起動するので~/.zhrcに下記を追加

```vim:~/.zshrc
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
```

ターミナルを再起動


```bash:バージョン確認
$ nvm --version
```

> 0.35.3


# Node.js
> JavaScript実行環境


```bash:インストール可能なバージョンを確認
$ nvm ls-remote --lts | grep Latest
```


> v4.9.1   (Latest LTS: Argon)
v6.17.1   (Latest LTS: Boron)
v8.17.0   (Latest LTS: Carbon)
v10.21.0   (Latest LTS: Dubnium)
v12.18.1   (Latest LTS: Erbium)

お好きなバージョンをインストール
基本的には最新で良いと思います。


```bash:インストール
$ nvm install v12.18.1
```
```bash:バージョン確認
$ node -v
```
> v12.18.1

# npm
> JavaScriptのパッケージ管理システム

### yarn
> npmと同じくパッケージ管理システム
今回はyarnを使用する

```bash:インストール
$ npm install -g yarn
```

### serverless
> Serverless Application(AWS, Azure, GCPなど)を構成管理デプロイするためのツール

```bash:インストール
$ npm install -g serverless
```

### npmのライブラリを確認
```bash:バージョン確認
$ npm ls --depth=0 -g
```
> /Users/[ユーザー名]/.nvm/versions/node/v12.18.1/lib
├── npm@6.14.5
├── serverless@1.74.1
└── yarn@1.22.4


# Nuxt.js
> vueのフレームワークの1つ
Routerの記述をする必要がなくなってめっちゃ便利

```bash:インストール
// プロジェクトを作成したいフォルダに移動
$ cd ***/*** 
$ yarn create nuxt-app <my-project>
```

上記コマンドを入力すると対話型のインストーラーが起動します
入力内容は下記を参考に自分に適したものを選択してください

```
? Project name: (my-project)

? Programming language: (Use arrow keys)
> TypeScript

? Package manager: (Use arrow keys)
> Yarn

? UI framework: (Use arrow keys)
> Vuetify.js

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Axios
 ◉ Progressive Web App (PWA)
 ◯ Content

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ ESLint
 ◉ Prettier
 ◯ Lint staged files
 ◯ StyleLint

? Testing framework: (Use arrow keys)
> None 

? Rendering mode: (Use arrow keys)
> Single Page App 

? Deployment target: (Use arrow keys)
> Server (Node.js hosting) 

? Development tools: 
 ◉ jsconfig.json (Recommended for VS Code)
 ◯ Semantic Pull Requests
```

インストールが完了したら下記のコマンドを実行

```bash
$ cd <my-project>
$ yarn dev

? Are you interested in participation? (Y/n) 
n
```

http://localhost:3000/
アクセスしてVueのアイコンが表示されれば構築完了

あとはかっこいいWebサイトを作ってください！