Mac向けローカル開発環境のおすすめ構築手順の紹介

# はじめに

こんにちは。今回は、はじめてMac端末へSalesforce開発に必要なツール群をインストールしていく手順を公開します。

:::note info
こちらの記事の姉妹記事です。Windowsのかたはこちら：
[Windows向けローカル開発環境のおすすめ構築手順の紹介](https://qiita.com/takahito0508/items/809b278cd01bd1981219)
:::

## ポイント

Homebrewを使います。

## 原理原則

私の独自見解ですが、ローカル開発環境構築作業における原理原則は3つです。

### 1. 作業ミスが発生しにくい手順であること

- サイトにアクセスして、インストーラーをダウンロードして、... というマニュアル作業はとにかく減らしたい
- インストーラーだとすごく深い階層に勝手にインストールされるなど、どこにインストールされたのか分からなくなるのを避けたい
- 作業手順書を作成・メンテするためにたくさんスクリーンショットを取得しなくてもいいようにしたい

### 2. 再現性・再利用性のある手順であること

- コマンドラインで実行するだけ、にすればとても簡単
- タイプミスだけ気にすれば良い
- やり直したい時にすぐ元に戻せるとすごく嬉しい

### 3. 手順は一度作って終わりではなく、常に見直すこと

- 1年経てばツール界隈は様変わりする
- もっといいツール、もっといい手順に組み替えられるかもしれない
- ツールのLTSバージョンの更新情報にアンテナをはる
    - 例： https://nodejs.org/ja

よろしいでしょうか。それでは、いってみましょう！

# 各種ツールをインストール

ターミナルを使用して、何も考えず、以下のコマンドを1行ずつ実行し続けましょう。バッチファイルにまとめて一括実行してもOKです。

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

brew install git

brew install visual-studio-code

brew install nvm

mkdir $HOME/.nvm

# 次のメッセージを探す：　
## Add the following to your shell profile e.g. ~/.profile or ~/.zshrc:

# そのメッセージの下に記載されているコマンドをメモ帳に保存しておく
# 例:
## export NVM_DIR="$HOME/.nvm"
## [ -s "/usr/local/opt/nvm/nvm.sh" ] && \. "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
## [ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/usr/local/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

nvm install 20.15.1

nvm use 20.15.1

npm install -g @salesforce/cli@latest

sf plugins install @salesforce/sfdx-scanner

brew tap homebrew/cask-versions

brew install zulu17
```

:::note info
Node.jsのバージョンを **20.15.1** に指定しています。Node.jsのバージョンアップに合わせて、ご自由に変更ください。
:::

## 内訳

上記の手順を分解して、何をインストールしているのかを明記してます。不要な方はスキップしてください。

### Homebrew

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

### Git

```sh
brew install git
```

### Visual Studio Code

```sh
brew install visual-studio-code
```

### Node Version Manager

```sh
brew install nvm

mkdir $HOME/.nvm
```

### Node.js

```sh
nvm install 20.15.1

nvm use 20.15.1
```

### Salesforce CLI

```sh
npm install -g @salesforce/cli@latest
```

### Salesforce Code Analyzer

```sh
sf plugins install @salesforce/sfdx-scanner
```

### Java 17

```sh
brew tap homebrew/cask-versions

brew install zulu17
```

## Node.jsを永続的に設定する

ターミナルの初期読み込みファイル (.profile または .zshrc など) を開き、先ほどメモ帳に保存しておいたコマンドを最下部にコピペします。
そうすることで、ターミナルを起動するたびにNode Version Managerを自動で読み込見込むことができ、Node.jsが使えるようになります。

```sh
# 例:　.zshrcを開く場合
code $HOME/.zshrc
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212555/5fcca31b-f07a-92e9-1933-4705fec0c073.png)

# Visual Studio Code拡張機能をインストール

ここはコマンドラインではなく、１つずつ手動でインストールしていきます。

1. 下記URLから対象のVisual Studio Marketplaceページへアクセス
1. Visual Studio Marketplaceページ内のInstallボタンをクリック
1. VS Codeの拡張機能の画面に自動で遷移する
1. VS Code内のInstallボタンをクリック
1. インストールが完了したら、次の拡張機能へ進む

## Codey's in bed by 10

https://marketplace.visualstudio.com/items?itemName=salesforce.codey-s-in-bed-by-10

## Trailing Spaces

https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces

## Prettier - Code formatter

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

## ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

## Salesforce Extension Pack

https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode

## Einstein for Developers

https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-einstein-gpt

## Salesforce Code Analyzer

https://marketplace.visualstudio.com/items?itemName=salesforce.sfdx-code-analyzer-vscode

:::note info
このほかにもおすすめな拡張機能はたくさんありますが、最小構成としたいのでここでは割愛します。
:::

# Visual Studio CodeのSettingsを修正

VS Code拡張機能を有効活用するためには、Settingsを調整する必要があります。

1. VS Codeを開いた状態で、「Command」キー + 「,」キーを押下
1. Settingsが開く
1. タブの右端にある「Open Settings (JSON)」アイコンをクリック
1. settings.jsonが開く
1. 次の設定値で上書き

```json
{
  "editor.renderWhitespace": "all",
  "extensions.ignoreRecommendations": true,
  "workbench.colorTheme": "Codey's in bed by 10",
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
```
:::note info
このほかにもおすすめな設定値はたくさんありますが、最小構成としたいのでここでは割愛します。
:::

:::note info
Einstein for Developers を利用したい場合、機能の有効化などの追加設定が必要です。詳しくは公式ドキュメント [Einstein for Developers (Beta)](https://developer.salesforce.com/tools/vscode/ja/einstein/einstein-overview) をご覧ください。
:::

以上で準備万端です。Happy Coding!!

# さいごに

今後も予告なく内容を修正します。最終更新日をご参考にしてください。