Apex/VisualForce開発環境構築

Visual Studio Codeを使用してApex, VisualForce開発環境を構築する方法の個人的まとめ

<font color="Red">**※EclipseのForce.com IDEプラグインのサポートが2019年10月12日に終了したため、Eclipseの使用は非推奨**</font>
参考：[Salesforce Spring '19 リリースノート](https://releasenotes.docs.salesforce.com/ja-jp/spring19/release-notes/rn_vscode_forcecom_ide_retirement.htm)

## Ⅰ.　準備
　以下の外部サイトを参照しながら、必要なツールをインストールする
　1.　[必要なツールのインストール](https://base.terrasky.co.jp/articles/5f2tk) ※「開発環境を構築する」以降の内容は、下でもまとめています
　2.　[Diff機能のエクステンションをインストール](https://base.terrasky.co.jp/articles/2NoKM) ※リンク先の「Diff機能」の節
## Ⅱ.　開発環境の構築
######アウトライン
1. 　ローカルPCに作業用プロジェクトを作成
2. 　Salesforce組織の認証を行う
3. 　接続先の組織からソースを一気に取得する

---
#### (ⅰ) ローカルPCに作業用プロジェクトを作成
1. VSCode画面でコマンドパレットを開く　**※Ctrl + Shift + P**  
<img width="959" alt="pic1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335488/adf30875-7c29-e71b-bc83-0e860fa62c69.png">
2. コマンドパレットに"create project"と入力　> 「SFDX: Create Project with Manifest」を選択  
<img width="961" alt="pic2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335488/b062fc1c-fba3-a946-cabf-30beccb8c76d.png">
3. 「標準」を選択  
<img width="960" alt="pic3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335488/1a9f6519-6e92-2e34-1d13-c974e4964a2e.png">
4. 作業用プロジェクトの名前を入力 (画像では例として「SampleProject」と入力)　>　Enter  
<img width="959" alt="pic4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335488/6909fbe4-fb9f-1f91-6277-8e6327854541.png">
5. フォルダ選択ダイアログが表示されるので、プロジェクトを作成するフォルダを選択 > 「プロジェクトを作成」をクリック  
※画像では例として「VSCode_Salesforce_Project」を選択  
<img width="958" alt="pic5_修正版.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335488/865e3e05-2d3a-d9e5-d099-d4ea3ba86d44.png">  
6. 少し待つと手順5で選択したフォルダ内にプロジェクトが生成される。  
VSCodeの画面は自動で以下の画像のように切り替わる。  
<img width="961" alt="pic6-1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335488/aed35393-0215-6739-8010-1be839d1888c.png">  

---
#### (ⅱ) Salesforce組織の認証を行う
1. sfdx-project.jsonファイルを開く　>　接続するSalesforce環境に応じて、変数"sfdcLoginUrl"の値を編集する　>　保存  
<img width="960" alt="pic7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335488/c29542b4-71e5-f5c2-c2df-3e6ad9405177.png">

| 接続環境 | 変数"sfdcLoginUrl"の値 |
|:-:|:-:|
| 本番 | https://login.salesforce.com |
| Sandbox | https://test.salesforce.com |  

2. コマンドパレットを開く(Ctrl + Shift + P)　>　テキストボックスに "Auth" と入力　>　「SFDX: Authorize an Org」を選択  
<img width="959" alt="pic7.5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335488/b8005275-527d-a1fc-d196-5fa88927a833.png">
3. 「プロジェクトのデフォルト」を選択　　※手順2で設定したsfdcLoginUrlへと接続される  
<img width="961" alt="pic9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335488/3de3139b-b011-b54d-726d-b5c738102e19.png">
4. 接続する組織をローカルPC で管理するための alias 名を入力  
※ここで設定したaliasは、画像のオレンジ色の枠の部分に表示されるようになる。  
接続している組織を識別するために設定する。  
<img width="960" alt="pic9.5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335488/52a1f7d0-c0f1-ae97-6274-91f729b31fa9.png">
5. ブラウザが起動するので、ユーザ名とパスワードを入力して組織にログインする  
<img width="248" alt="pic10.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335488/96a20918-abbf-98cd-e102-7ac2a4da82ca.png">
6. ログインが成功すると、VSCodeの画面下に認証が成功した旨の通知が出る  
※画像のオレンジ色の枠の部分に手順4で設定したaliasが表示される  
<img width="960" alt="pic11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335488/515a7ad8-a8d7-7002-8e17-03e65860c998.png">  

---
#### (ⅲ) 接続先の組織からソースを一気に取得する
1. エクスプローラー　>　プロジェクトフォルダ　>　manifest　>　package.xml を右クリック　>　「SFDX : マニフェストファイルのソースを組織から取得」を選択  
<img width="961" alt="pic13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335488/ca382ca6-45bc-05ad-bf82-027ef20f9198.png">
2. 取得が正常に完了すると、VSCodeの画面下にその旨の通知が出る  
<img width="961" alt="pic15_修正版.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335488/bbc428b8-3b77-6625-027a-ea5aa855ff6c.png">
3. 「force-app/main/default」フォルダ下の各フォルダに、ソースとメタデータファイルが格納されているのを確認する  
<img width="958" alt="pic16_修正版.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335488/51170fff-a0fe-fc76-2a7f-c43f5f088739.png">

## Ⅲ.　基本操作
- **各ファイル新規作成**  
対応するファイルを右クリック > 「SFDX: 〇〇〇を作成」を選択  
<img width="960" alt="pic20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335488/8aa7c0e2-e141-e3ff-3211-079f16b40032.png">
- **既存ソースの削除・更新, 組織へソースをデプロイ, 組織ファイルとのDiff**  
対応する既存のファイルを右クリック > それぞれ選択  
<img width="959" alt="pic21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335488/31be20ce-74e1-a544-339b-7ee639c0ca75.png">  
- **組織からソースを取得（一つづつ取得する場合）**  
画面左の雲マークをクリック > 接続している組織内のソース一覧が表示されるので、取得したいソースにカーソルを合わせると出てくるダウンロードマークをクリック  
<img width="960" alt="pic23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335488/bde62c21-77bd-6399-c9ac-c7333f5e2c6d.png">
- **接続組織の変更**  
エイリアスが表示されている部分をクリック(画像①) > 登録済みの別のエイリアスを選択(画像②)または新規に認証  
<img width="959" alt="pic22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335488/52f2745e-34f8-c09f-02cc-bbf0ed8fef8b.png">

## Ⅳ.　資料
- [package.xmlについて](https://developer.salesforce.com/docs/atlas.ja-jp.api_meta.meta/api_meta/manifest_samples.htm)
- [sfdx-project.jsonについて](https://developer.salesforce.com/docs/atlas.ja-jp.sfdx_dev.meta/sfdx_dev/sfdx_dev_ws_config.htm)
- [Salesforce DX 開発者ガイド](https://developer.salesforce.com/docs/atlas.ja-jp.sfdx_dev.meta/sfdx_dev/sfdx_dev_intro.htm) ... 構築した環境を最大限に活用する為に
- [Salesforce CLI Command Reference](https://developer.salesforce.com/docs/atlas.en-us.sfdx_cli_reference.meta/sfdx_cli_reference/cli_reference.htm) ... 「出力」の内容の理解に/「ターミナル」でコマンド使う参考に