# 新しいMacBook Proを購入して移行するときにやること｜コーディングに必要な開発環境を整える

URL: https://webrandum.net/mac-setup-2022-5/
公開日: 2022-02-07
更新日: 2022-02-07
カテゴリー: 作業環境整備
出典: Webrandum（著者: サイトウ マサカズ）

前回の記事は下記になります。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2022/02/eyecatch-1.jpg)新しいMacBook Proを購入して移行するときにやること｜Macの細かい部分設定編https://webrandum.net/mac-setup-2022-4前回の記事は下記になります。やることリスト 基本的なMacのセットアップ Homebrew Caskでアプリを一括インストール 最低限のアプリ設定 ユーティリティ系アプリの設定 自分の使いやすいようにMacの細かい部分設定 コーディングに必要な開発環境を整えるユーティリティ系アプリの設定も終わってかなり使いやすくなったので、ここから自分の好みに合わせてさらに細かい設定を行います。ファンクションキーの設定［システム環境設定］→［キーボード］の［キーボード］タブで真ん中辺りにファンクションキーの設定ができます。自分の場合...](https://webrandum.net/mac-setup-2022-4)

## やることリスト

1. [基本的なMacのセットアップ](https://webrandum.net/mac-setup-2022-1/)
2. [Homebrew Caskでアプリを一括インストール](https://webrandum.net/mac-setup-2022-1/)
3. [最低限のアプリ設定](https://webrandum.net/mac-setup-2022-2/)
4. [ユーティリティ系アプリの設定](https://webrandum.net/mac-setup-2022-3/)
5. [自分の使いやすいようにMacの細かい部分設定](https://webrandum.net/mac-setup-2022-4/)
6. コーディングに必要な開発環境を整える

最後にコーディングに必要な開発環境を整えます。

## Homebrewのインストール

Homebrewは最初の基本的なセットアップのときにインストールしているので、既にインストールしている場合はスキップします。

ターミナルで`brew -v`コマンドを入力して、バージョンが返ってこなかったらインストールされていないので下記手順でインストールしましょう。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2019/01/eyecatch-15.jpg)macOS用パッケージ管理システムのHomebrewの概要とインストール方法https://webrandum.net/homebrew-install今回はmacOS用のパッケージ管理システムである「Homebrew」に関してまとめてみます。HomebrewでツールのインストールができるHomebrewはmacOSのコマンドライン上で動作するパッケージ管理システムです。パッケージは今回の場合ツールだと思って差し支えありません。つまり、Homebrewを使うことでコマンドラインでツールのインストールと管理が出来るようになります。ちなみにHomebrewは英語で「自家醸造」という意味です。ツールのインストールを、ビールを醸造することに見立ててこの名前が付けられたようです。そのため、Homebrewで...](https://webrandum.net/homebrew-install)

[Homebrewの公式サイト](https://brew.sh/index_ja.html)へ移動して、「インストール」と書かれたコマンドをターミナル.appで実行します。

「Password:」と表示されたら、MacBook Proログイン時のパスワードを入力してenterを押します（キー入力しても画面に反映されませんが、ちゃんと認識されています）。

![Homebrewのインストール](https://webrandum.net/mskz/wp-content/uploads/2022/01/image_3-1.png)

「Press RETURN to continue or any other key to abort:」と出てきたらreturn（enter）を押します。

![「Press RETURN to continue or any other key to abort:」](https://webrandum.net/mskz/wp-content/uploads/2022/01/image_4-1.png)

コマンドが入力できる表示になったらインストール完了です。

「Warning」と出ていますが、これは「Next steps」に書かれてあるコマンドを実行してパスを通せばOKです。

実行するコマンドは下記の2つ。やっていることは`.zprofile`というzshの設定ファイルにHomebrewの設定ファイルがどこにあるかのパス設定を追加しているだけです。

![Homebrewのパスを通す](https://webrandum.net/mskz/wp-content/uploads/2022/01/image_7-1.png)

実行したら`brew -v`コマンドを入力して、「Homebrew　○○（バージョン名）」と出てきたらインストール完了です。

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

フロントエンドの開発環境に欠かせない「Node.js」をインストールします。

ただ、普通にNode.jsをインストールしてしまうと、あとからNode.jsのバージョンを切り替えたり、「このプロジェクトではこのNode.jsバージョン、でも別のプロジェクトではこのバージョン」という風にプロジェクトごとに別のバージョンを使うのが面倒になってしまいます。

そこで「nodenv」をインストールしておくと、nodenvからNode.jsをインストールしておいて、あとからバージョンを簡単に切り替えたり「.node-version」というファイルを見て、そのファイルがあるディレクトリ以下でバージョンを自動で切り替えたりしてくれます。

「じゃあnodenvをインストールしよう！」となりますが、ここでNode.jsに限らず、「○○env」という形でいろんなパッケージ管理用のパッケージが世の中にたくさんあります。

それらを毎回必要に応じてインストールして回るのは面倒なので、「○○env」系を管理してくれる「anyenv」があるので、これをインストールします。

1. anyenvをインストールしてnodenvを管理
2. anyenv経由でnodenvをインストール（これでnodenvのバージョン管理がラクになる）
3. nodenv経由でNode.jsをインストール（これでNode.jsのバージョン管理がラクになる）

あと、「パスを通す」作業がanyenvの1行で済むのもメリットの1つです。

### anyenvのインストール

[![](https://www.google.com/s2/favicons?domain=github.com)GitHub![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/d3944b11882587eebc6bacfbfe7e2130111a326673d650a3b0e1fe80539932be.webp)anyenv/anyenvhttps://github.com/anyenv/anyenvAll in one for **env. Contribute to anyenv/anyenv development by creating an account on GitHub.](https://github.com/anyenv/anyenv)

まずはanyenvをインストールします。

（念のため手順は書いておきますが、情報が古くなっている可能性もあるため、[公式サイトのマニュアル](https://github.com/anyenv/anyenv)を見るのを推奨します）

Homebrewでanyenvのインストール。

```
brew install anyenv
```

あとは下記コマンドでanyenvの設定ファイルが作成されます。

```
anyenv init
```

あとはターミナル上に書かれた指示に従って設定します（パスを通す作業）。

インストール完了後はターミナルを再起動すると反映されます。

下記コマンドを実行すると、anyenvでインストールできる○○env系が一覧で表示されます。

```
anyenv install -l
```

### nodenvのインストール

次はanyenv経由でnodenvをインストールしましょう。

下記コマンドを実行するだけで、nodenvがインストールされます。

```
anyenv install nodenv
```

下記コマンドを実行すると、nodenvでインストールできるNode.jsのバージョンが一覧で表示されます。

```
nodenv install -l
```

#### Node.jsの確認

最後にnodenv経由でNode.jsをインストールします。

ちなみに、M1が正式サポートされてあるはNode.js 16.0.0以降です。

インストールするときは注意しましょう。

下記のようにバージョン名を指定してインストールします。

```
nodenv install 16.0.0
```

インストール後は、下記の`global`コマンドを実行すれば指定したバージョンをグローバルに設定できます。

```
nodenv global 16.0.0
```

特定のディレクトリ以下のNode.jsバージョンを指定したい場合は`local`コマンドを使用します。

```
nodenv local 16.0.0
```

実行後は、下記のrehashを実行すると、設定が反映されます。

```
nodenv rehash
```

#### Node.js 16.0.0以前のバージョンをインストールする場合

プロジェクトによっては、古いNode.jsのバージョンを使っていることもあります。

できることならバージョンを上げた方がいいのですが、そういうわけにもいかない場合や、ちょっとした修正のためにバージョンを上げてそれに伴う設定も変えて回るのが面倒な場合はターミナルで下記コマンドを実行します。

```
arch -x86_64 /bin/zsh
```

このコマンドを実行した後であれば、16.0.0より前のバージョンでもインストールができました。

16.0.0以降に戻しても問題なく動作したので、ひとまずは安心です。

## yarnのインストール

Node.jsをインストールしてnpmが使えるようになりましたが、yarnもインストールしてどちらも使えるようにしておきます。

```
brew install yarn
```

## Visual Studio Codeのcodeコマンドを使えるようにする

自分の場合、あまり使わないのでやってもやらなくてもいいのですが、念のためターミナル上で`code`コマンドが実行できるようにしておきます。

Visual Studio Codeを起動してshift + command + Pでコマンドパレットを開いて「>shell」と入力します。

「Shell Command: Install ‘code’ command in PATH」を選択すれば、ターミナルで`code`コマンドが実行できるようになります。

そこまで手間ではないので、これも忘れないようにやってしまいます。