Visual Studio Code で Salesforce の開発環境を構築する

Visual Studio Code (VS Code)の Salesforce 拡張機能は、オープンソースでありオフィシャルのプロジェクトで、ローカルでの Salesforce 開発ツールのデファクトスタンダードとなっています。この記事では、VS Code と公式の拡張機能を用いた開発環境の構築手順と基本的な操作方法を紹介します。なお、VS Code 自体はインストール済みの前提です。また、[Remote Container を使用して開発を行う](https://developer.salesforce.com/tools/vscode/en/user-guide/remote-development/)こともできますが、この記事では解説は割愛します。

## 設定手順
### 1. Salesforce CLIをインストール
[設定ガイド](https://developer.salesforce.com/docs/atlas.ja-jp.sfdx_setup.meta/sfdx_setup/sfdx_setup_install_cli.htm)に従って Salesforce CLI をインストールします。`sf` コマンドが実行できることを確認してください。

```
sf --version
```
``@salesforce/cli/2.29.5 darwin-x64 node-v18.12.1`` のように出力されていればOKです。(※出力内容はOSやバージョンにより異なります)

### 2. VS Codeに拡張機能のインストール
[Salesforce Extensions for VS Code](https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode-expanded) をインストールします。

### 3. ローカルにプロジェクトを作成する
コマンドパレットを開き(Ctrl+Shift+P/Cmd+Shift+P)、`SFDX: プロジェクトを作成 (Create Project)` を選択します。
<img width="600" alt="SFDX Create Project" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184624/ed0a73f1-b935-1ab4-3239-f1ba7bfd0d77.png">

続いてテンプレートを選択します。これは初期作成されるフォルダの構成を決めるものですが、最初は `標準 (Standard)` を選択してOKです。
<img width="599" alt="SFDX Create Project (select template) " src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184624/06367bfc-1cff-a693-fc37-06401a836c14.png">

プロジェクト名を入力後、保存先のフォルダを選択しプロジェクトを作成すると、入力したプロジェクト名で以下の通りディレクトリ・ファイルが生成されます。ちなみに、`SFDX: マニフェストファイルを使用してプロジェクトを作成` を使用すると、`manifest` フォルダと `package.xml ` が作成されます。既にある `package.xml` を使用してプロジェクトを移行する場合はそれで置き換えてください。

```
your-project-name
├── .forceignore
├── .sfdx
├── .vscode
│   └── settings.json
├── README.md
├── config
│   └── project-scratch-def.json
├── force-app
│   └── main
│       └── default
│           ├── applications (アプリケーション)
│           ├── aura (Aura コンポーネント)
│           ├── classes (Apex クラス)
│           ├── contentassets (アセットファイル)
│           ├── flexipages (Lightning ページ)
│           ├── layouts (ページレイアウト)
│           ├── lwc (Lightning Web コンポーネント)
│           ├── objects (オブジェクト定義)
│           ├── permissionsets (権限セット)
│           ├── staticresourses (静的リソース)
│           ├── tabs (タブ)
│           └── triggers (Apex トリガ)
├── scripts
│   ├── apex
│   │   └── hello.apex (匿名実行のサンプル)
│   └── soql
│       └── account.soql (SOQLのサンプル. 開発者コンソールのクエリエディタの代替)
├── .forceignore
├── .gitignore
├── .prettierignore
├── .prettierrc
├── README.md
└── sfdx-project.json

```

### 4. 組織に接続
コマンドパレットから、``SFDX: 組織を認証 (Authorize an Org)`` を選択し、組織の名称を入力(任意の名前でOK)します。
<img width="596" alt="SFDX authorize an org" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184624/4b05f1c8-2814-640a-2d4b-e4cb57cec137.png">

続いて、接続したい組織の種別を選択します。
<img width="596" alt="login url" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184624/faf1238b-fbe4-79a7-00ab-ca3560ecf0a2.png">

直後にブラウザが起動しますのでその組織にログインします。VS Code で以下のように出力されていれば接続できています。

```
Successfully authorized xxxx@exmaple.com with org ID 00DXXXXXXXXXXXXXXX
You may now close the browser
```

### 5. メタデータの取得とデプロイ
#### Org Browser (組織のブラウザ)
Sandbox や Developer Edition の場合 (スクラッチ組織ではない場合)、サイドバーの雲のアイコンから、接続された組織上にあるメタデータの一覧を確認し、ローカルにダウンロードすることができます。
<img width="620" alt="Org Browser" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184624/e6ff4bd3-9a5a-86dc-d259-26b2d10b82d3.png">

#### エクスプローラ
エクスプローラで対象のフォルダやファイルを右クリックすると``SFDX: 組織からソースを取得 (Retrieve Source from Org)`` と``SFDX: 組織へソースをデプロイ (Deploy Source to Org)``が利用できるようになっているはずです。
<img width="447" alt="スクリーンショット 2019-12-21 16.19.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184624/c70e9fb3-6e8d-e6ad-e0d9-12007ad2c099.png">

## 知っておくと便利な機能
### ファイル保存時の自動デプロイを有効化する
設定の Salesforce Feature Previews から、Push-or-deploy-on-save を Enabled にすると、ファイル保存時に自動的に接続先の組織にソースコードがデプロイ(プッシュ)されます。デプロイ結果は手動実行時と同様に [出力] タブで確認できます。
<img width="701" alt="スクリーンショット 2019-12-22 15.41.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184624/e1ad919a-4fe7-0c7c-108a-97f92f437e91.png">

あるいは、 ``.vscode/settings.json`` を直接編集して ``"salesforcedx-vscode-core.push-or-deploy-on-save.enabled": true`` を追加しても構いません。

### 接続先の組織を追加する・切り替える
<img width="231" alt="Default org picker" src="https://qiita-image-store.s3.amazonaws.com/0/184624/8b8a2aec-6adb-0f7f-d9b0-b29ab6639a86.png">
接続先の組織のエイリアスがフッターに表示されますので、これをクリックすると、コマンドパレットに登録済みの組織が一覧表示されます。一覧で選択した組織がそのプロジェクトでのデフォルト組織に切り替わります。``+SFDX: 組織を認証 (Authorize an Org)`` から新しく組織を登録することもできます。

### 接続先の組織をブラウザで開く
フッターのウィンドウアイコンをクリックするか、コマンドパレットから `SFDX: デフォルトの組織を開く (Open Default Org)` を実行すると、ブラウザでデフォルトの組織を開きます。
![スクリーンショット 2020-04-27 22.49.33（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184624/9179f46d-e744-efcf-5002-5f46f0250613.png)


### リファクタリング
* 変数、メソッド等にカーソルを合わせた状態で`F2`または右クリック→`シンボルの名前変更 (Rename Symbol) `でリネームできます。
* リテラル値にカーソルを合わせた状態で行頭に表示されるQuick Fixウィジェット(💡)をクリックして、`Extranct Constant`を選択すると選択したリテラルを定数(`public static final`)に変換できます。

## トラブルシューティング
### 組織を認証する際にブラウザが起動しない
Windows + Google Chrome の場合にブラウザが起動しない[既知の不具合](https://github.com/forcedotcom/cli/issues/371)があります。解消されるまでは Chrome 以外のブラウザをデフォルトにする必要がありそうです。

### Apex Code Editor が上手く動作しない
Java 8 または 11 が必要になりますので、最新版のJavaを利用されている方は、以下の記事を参考に``salesforcedx-vscode-apex.java.home``にJava 8または11のパスを設定してください。
https://qiita.com/maratto/items/2d8b09da80fa5051c551#salesforce%E6%8B%A1%E5%BC%B5%E3%81%AE%E8%A8%AD%E5%AE%9A

### 移行時にメタデータがうまく取得されない
`package.xml` の記載が正しいかを再確認し、初回取得時は `package.xml` を右クリックして``SFDX: Retrieve Source in Manifest from Org``を実行してください。

### メタデータ取得時に UNSUPPORTED_API_VERSION のエラーが表示される
`package.xml` のAPIバージョンが組織のAPIバージョンを上回っていないか確認してみてください。スクラッチ組織の場合は ``sfdx-project.json`` の ``sourceApiVersion`` を確認してください。

### コマンドが見つからないもしくは command 'sfdx.force.auth.web.login' not found のように表示される
開いているフォルダの直下に`sfdx-project.json`があることを確認してください。プロジェクトを作成した直後や、VS Codeを起動した直後は拡張機能が読み込まれるまでに少し時間がかかりますので、数十秒待ってから再実行してみてください。

## おわりに
* Salesforce Extensions for VS Code は単にメタデータの取得・デプロイが出来る拡張機能ではなく、Salesforce CLI の多くのコマンドを統合するパッケージ (Salesforce CLI Integration for VS Code) を含んでおり、SOQL の実行や Apexの テスト実行・匿名実行などが可能です。VS Code から実行可能な Salesforce CLI のコマンドについては[こちら](https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode-core)から確認してください。
* Apex テストの実行方法やデバッグ方法については、「[Visual Studio CodeでSalesforceのApexテストを実行・デバッグする](https://qiita.com/shunkosa/items/98f107dd532166e8d4a6)」も参考にしてください。
* お好みで[キーボードショートカット](https://vscode-doc-jp.github.io/docs/getstarted/keybindings.html)の設定もどうぞ。

## 参考リンク
* [Trailhead - Quick Start: Visual Studio Code for Salesforce Development](https://trailhead.salesforce.com/ja/content/learn/projects/quickstart-vscode-salesforce)
* [Salesforce Extensions for Visual Studio Code (公式ガイド)](https://forcedotcom.github.io/salesforcedx-vscode/)