Mac に Yarn をインストールする

101 DESIGN

イチマルイチデザインでフロントエンドを担当している河口です。

今回は Yarn を Mac にインストールする手順を紹介します。
Yarn は js のパッケージを管理できるパッケージマネージャーです。
Node.js をインストールした際に、自動でインストールされる npm と役割は同様になります。

Command Line Tools for Xcode をインストール

まずは、動作環境を整えます。
コンパイラが必要になるので、Command Line Toods for Xcode をインストールしてコンパイルできるようにします。
Xcode は、Appleのサイト からダウンロードします。（ AppleID が必要になります。）
ログインしたら、Command Line Toods for Xcode の最新版をダウンロードします。

Homebrew をインストール

続いては Homebrew をインストールします。
公式サイト の「Install Homebrew」に書かれているコマンドをコピーしてコマンドラインツールで実行します。

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

`Press RETURN to continue or any other key to abort`と表示された際は、enter キーを押してください。
`To proceed, enter your password`と表示された際は、管理者パスワードを入力してください。

動作確認

下記コマンドをコマンドラインツールで実行します。

$ brew doctor

結果として`Your system is ready to brew.`が返ってくれば、無事インストールが済んだことになります。

Volta をインストール

下記コマンドをコマンドラインツールで実行し、Volta をインストールします。
以前は node のバージョン管理に anyenv を使用してましたが、Volta は Rust 製でインストールも早く、package.json を共有すればプロジェクトメンバーで node のバージョンを統一できるのでおすすめです。

$ brew install volta

動作確認

コマンドラインツール再起動後に下記コマンドを実行します。

$ volta -v

Volta のバージョンが表示されれば、無事インストールが済んだことになります。

PATH の確認

zsh を使っているので ~/.zshrc を確認したところ、末尾に追加されていました。

export VOLTA_HOME="$HOME/.volta"
export PATH="$VOLTA_HOME/bin:$PATH"

SHELL の再起動をします。

$ exec $SHELL -l

Node.js をインストール

Node.js をインストールします。

# 安定版のインストール
$ volta install node

# 指定バージョンのインストール（14系をインストールする場合）
$ volta install node@14

動作確認

下記コマンドをコマンドラインツールで実行します。

$ node -v
v16.15.1

インストールしたバージョンが表示されれば、無事インストールが済んだことになります。

volta pin でバージョンを固定する

プロジェクト毎に volta pin を使用し、package.json ファイルを更新し、バージョンを固定します。

$ volta pin node@14

package.json ファイルの確認

package.json を確認したところ、末尾に追加されていました。

"volta": {
  "node": "14.19.3"
}

Yarn をインストール

下記コマンドを実行し、Yarn をインストールします。

$ volta install yarn

動作確認

下記コマンドをコマンドラインツールで実行します。

$ yarn -v
1.22.18

バージョンが表示されれば、無事インストールが済んだことになります。

volta pin でバージョンを固定する

先程と同じく volta pin を使用し、package.json ファイルを更新し、バージョンを固定します。

$ volta pin yarn

package.json ファイルの確認

先程の node の下に追加されています。

"volta": {
  "node": "14.19.3",
  "yarn": "1.22.18"
}

まとめ

新しく Mac を買い替えた、もしくは何かの不具合によってやむを得ず初期化してしまった場合など、開発環境を一から構築する際に、自分用の備忘録も兼ねてこちらにまとめさせていただきました。

イチマルイチデザインでは、私たちと一緒に働くフロントエンドエンジニアの仲間を募集しています。
デザイナーやバックエンドエンジニアの方も募集をしておりますので、興味がある方はご連絡お待ちしております。

▼採用サイトはこちら
https://101de-sign.com/recruit