新しい Mac に Git と Node.js の環境を作る

# どうでも良い前置き

5 年ぶりぐらいに Mac を買い替えました。
今までの買い替えの際には移行アシスタントを使って環境をそのまんま移行していましたけれども、これまでも Mac 買い替えのたびに前の端末から移行を繰り返して来ており、もはや不要な設定やソフトも沢山ある状態でした。
と言うわけで今回は、昨日までの弱虫だった自分を脱ぎ捨てて新しいワタシに生まれ変わろうと言う趣旨で、移行アシスタントに頼らずゼロから環境を作ることにしました。
データの大部分を iCloud に置く運用にしていたので端末固有の情報に対する依存性が下がって来ているのもその決断を後押ししています。

とは言え、ローカルの開発環境はローカルに作らなければなりません。
と言うわけで、新しい Mac に開発環境を作る流れの記録です。

# この記事でやること

- `Xcoce コマンドラインツール`のインストール
- `Homebrew` のインストール
- `Git` のインストール
- `Node.js` のインストール
- `Visual Studio Code` のインストール
- その他、細々したもの

開発環境構築と言っときながら `Xcode` とか `eclipse` とか `Xamarin` の話はしないのかよとおっしゃる向きもあるかも知れませんが、当方 JS 大好き人間ですので（←）、そこらへんはどうかご容赦いただければ。

# OS 環境と前提

導入時の OS は `macOS Catalina` です。
Mac 購入時点ではちょうど OS の入れ替わりのタイミングで、初期導入 OS は `Mojave` でしたが直ぐに `Catalina` にアップデートしました。
`Catalina` からデフォルトシェルが `zsh` に変わりましたけれども、前バージョンからのアップデートだと引き続き `bash` がデフォルトシェルとして使用され続けます。
この記事では `bash` 前提なので、`zsh` の方は適宜読み替えていただければと思います。

また、この記事は **2019 年 11 月時点** の内容に基づいています。
将来的にはここで記されている通りには行かなくなるかも知れません。

# 環境構築

## Xcode コマンドラインツール と Homebrew をインストールする

一連の流れで同時にできます。
[Homebrew の公式サイト](https://brew.sh/index_ja)の手順に従います。

ターミナルを立ち上げて、公式サイトで記されている以下のスクリプトを実行します。

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

こう言うのをインストールしますよとかこう言うディレクトリを自動的に作成しますよなど情報が出ます。
<img width="962" alt="01-001-homebrew.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162138/b1593544-6531-3dee-7186-cff2231550aa.png">


ここで、最後の方に記述がある

```bash
==> The Xcode Command Line Tools will be installed.
```

に注目してください。
`Xcode コマンドラインツール`は `Xcode` 導入後にメニューからインストールすることもできますが、重量級の開発環境である `Xcode`をインストールしなくともコマンドラインツールだけ個別で入れることができます。便利ですね！

ともかく、Enter キーを押下。

パスワードの入力を求められますので入力。言わずもがなですが管理者権限が必要です。

バックグラウンドで`Xcode コマンドラインツール`のダウンロードとインストールが実行されます。

そのまま待っていれば `Homebrew` もインストールされます。
<img width="962" alt="01-002-homebrew-installed.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162138/0befa8fc-29a8-67c8-fa7c-b50be62761f1.png">

バージョンを確認してみます。

```bash
$ brew --version
Homebrew 2.1.16
Homebrew/homebrew-core (git revision 268c; last commit 2019-11-17)
```

## Git をインストールする

`macOS` には標準で `Git` がインストール済みです。

```bash
$ git --version
git version 2.21.0 (Apple Git-122.2)
```

これで事足りると言えば事足りるわけですが、せっかくなので `Homebrew` で `Git` をインストールします。

```bash
$ brew install git
```

依存モジュールとともにインストールされます。
<img width="962" alt="02-001-git-installed.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162138/86a0279f-e240-72dc-f6a8-176286f00f44.png">

ただ、これだけだと依然として `git` コマンドは Apple 謹製のものを参照し続けます。
今インストールしたものを利用するよう設定します。

```bash
echo 'export PATH="/usr/local/Cellar/git/2.24.1_0/bin:$PATH"' >> ~/.bash_profile
```

バージョンのところは適宜インストールされたバージョンに読み替えてください。
`zsh` の人は最後は `>> ~/.zshrc` にすれば良いかと思います。

これで、新しくターミナルウィンドウを立ち上げるか `source ~/.bash_profile` すれば `Homebrew` でインストールした `Git` が有効になります。

```bash
$ git --version
git version 2.24.0
```

## Node.js をインストールする

お次は `Node.js` です。これも `Homebrew` でインストールします。
まずはバージョンマネージャーの `Nodebrew` から。
`nvm` でも別に良いと思いますので、何を選ぶかはお好みで。

```bash
$ brew install nodebrew
```
<img width="962" alt="03-001-nodebrew.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162138/d4e3d929-04d7-d39f-326e-1b19935ca85f.png">

バージョンを確認しておきます。

```bash
$ nodebrew --version
nodebrew 1.0.1

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backword compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4
```

インストール可能な `Node.js` のバージョンを確認します。

```bash
$ nodebrew ls-remote
v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6    

(省略)

v13.0.0   v13.0.1   v13.1.0   

io@v1.0.0 io@v1.0.1 io@v1.0.2 io@v1.0.3 io@v1.0.4 io@v1.1.0 io@v1.2.0 io@v1.3.0
io@v1.4.1 io@v1.4.2 io@v1.4.3 io@v1.5.0 io@v1.5.1 io@v1.6.0 io@v1.6.1 io@v1.6.2
io@v1.6.3 io@v1.6.4 io@v1.7.1 io@v1.8.1 io@v1.8.2 io@v1.8.3 io@v1.8.4 

io@v2.0.0 io@v2.0.1 io@v2.0.2 io@v2.1.0 io@v2.2.0 io@v2.2.1 io@v2.3.0 io@v2.3.1
io@v2.3.2 io@v2.3.3 io@v2.3.4 io@v2.4.0 io@v2.5.0 

io@v3.0.0 io@v3.1.0 io@v3.2.0 io@v3.3.0 io@v3.3.1 
```

欲しいバージョンを指定して `Node.js` をインストールします。
ここでは最新の `v13.1.0` をインストールしてみます。

```bash
$ nodebrew install v13.1.0
```

以前使われていたサブコマンド `install-binary` は `install` のエイリアスになっているようです。

コマンド実行時に以下のようなエラーが出た場合は、

```bash
Fetching: https://nodejs.org/dist/v13.1.0/node-v13.1.0-darwin-x64.tar.gz
Warning: Failed to create the file                                                                                     
Warning: /Users/********/.nodebrew/src/v13.1.0/node-v13.1.0-darwin-x64.tar.gz: 
Warning: No such file or directory
                                                                                                                    0.0%
curl: (23) Failed writing body (0 != 1028)
download failed: https://nodejs.org/dist/v13.1.0/node-v13.1.0-darwin-x64.tar.gz
```

ディレクトリを切っておけば解決します。

```bash
$ mkdir -p ~/.nodebrew/src
```

インストールした `Node.js` を有効にします。

```bash
nodebrew use v13.1.0
```

パスを通します。
これも `bash` 以外の人はよしなにお願いします。

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

これで `Node.js` のインストールは終わりです。

```bash
$ node --version
v13.1.0
```

## Visual Studio Code をインストールする

コードエディタは人によって色々お好みとか宗派があるでしょうが個人的には `VS Code` がお好みです。

[公式サイト](https://code.visualstudio.com/)より ZIP ファイルをダウンロードして、解凍し、程良いところに配置します。
Windows ではユーザーのディレクトリにインストールするのが常道になっていますので、その流儀に則れば自分のホームディレクトリにしかるべきディレクトリを切って実行ファイルを配置すれば良いでしょう。
けれども従来通りアプリケーションフォルダに放り込んでも別に良いと思います。
<img width="1119" alt="04-001-vscode.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162138/fe0f57ad-fc23-2dee-c221-a49e3f82f95c.png">


おすすめの機能拡張は色々ありますが、まずは最低限以下のものを。

- [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
- [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
- [Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
- [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)
- [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

## その他諸々

### フォント指定

コーディングフォントは [Ricty Diminished Discord](https://github.com/edihbrandon/RictyDiminished) が見易くて好きです。
インストールしたら、 `VS Code` の `settings.json` で以下のようにすれば反映されます。
また、5K の画面に 12px のフォントは小さすぎて疲れ目が促進されるので少し大きくしておきます。

```json
{
  "editor.fontFamily": "Ricty Diminished Discord",
  "editor.fontSize": 14
}
```

### マークダウンのプレビューの改行

`VS Code` デフォルトのプレビュー機能を利用する場合、末尾に半角スペース２つを置かなければプレビュー上改行されませんが、以下の設定を入れればただの改行だけでプレビュー上でも改行して表示されます。

```json
{
  "markdown.preview.breaks": true
}
```

### 指定文字数の位置にルーラーを表示する

こう言うコーディング規約は割と一般的ですよね？

```json
{
  "editor.rulers": [80, 100]
}
```

配列で渡すと複数のルーラーを置けます。

### デフォルトシェルを zsh に切り替える

`bash` を使い続けているとターミナルを起動するたびに毎度毎度 Catalina 様にお小言を頂戴する羽目になります。

```
The default interactive shell is now zsh.
To update your account to use zsh, please run `chsh -s /bin/zsh`.
For more details, please visit https://support.apple.com/kb/HT208050.
```

お小言を黙らせる手段もきっとあるのでしょうが、Catalina 様の思し召しのままにデフォルトシェルを `zsh` に切り替えてみます。

```bash
$ chsh -s /bin/zsh
```

実行にはパスワードの入力が求められます。


これだけだとパスとかの設定をやり直しになりますので、


```bash
% ln -s ~/.bash_profile ~/.zshrc
```


として両刀遣いを気取ります。


`.zshrc` に対応するのは `.bashrc` だろうとか、そもそも `ln` ではなく `cp` しなさいよとか色々ご意見はありましょうが、`zsh` 特有の設定変更を行いたくなった時にちゃんとすれば良いかと思います。 


**→追記**

ちゃんと[公式のサポート](https://support.apple.com/kb/HT208050)見なさいよって話ですね。
きちんと記述がありました。

> .zprofile は .bash_profile に相当し、ログイン時 (SSH ログインも含む) に実行されます。
> .zshrc は .bashrc に相当し、新しいターミナルセッションごとに実行されます。

ちゃんとするならこうなりますね。

```bash
% cp -a ~/.bash_profile ~/.zprofile
```

また、`bash` を使い続けても Catalina 様に叱られずに済ます方法も書かれていました。

```bash
$ echo 'export BASH_SILENCE_DEPRECATION_WARNING=1' >> ~/.bash_profile
```
とすれば良さそうです。 

他にも色々あると思いますけれども、まずはここまで。

# 参考

[macOS用パッケージマネージャー — Homebrew](https://brew.sh/index_ja)
[HomebrewでGitをインストールする](https://qiita.com/micheleno13/items/133aee005ae37c28960e)
[MacにNode.jsをインストール](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)