【Salesforce】【VSCode】VSCodeでSalesforce開発

SalesforceのカスタムコードをVSCodeで作成・編集できるようにするまでのながれを書いていきます。
かなり初歩的な内容です。

# 目次

- VSCodeをダウンロードする
- CLIをインストールする
- Salesforce拡張をインストールする
- プロジェクトを作成する
- Salesforce組織と接続する
- Salesforce組織からソースを取得する
- Salesforce組織へデプロイする

# １．VSCodeをダウンロードする
VSCodeをダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/461e0f86-809e-3119-3b95-189d5863e647.png)

拡張機能で日本語の言語パックも入れます。（英語の画面でも問題ない方は不要です。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/29d24bec-8926-dc1a-30af-5b5674963454.png)


# ２．CLIをインストールする
[Trailhead](https://trailhead.salesforce.com/ja/content/learn/projects/quickstart-vscode-salesforce/vscode-salesforce-ready)のページでCLIをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/b9d4b491-d057-fd30-2f77-ca1ae1678dfb.png)

# ３．Salesforce拡張をインストールする
拡張機能で Salesforce Extension Pack を検索しインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/f5da311e-58e2-72f4-8818-58f3ba50be90.png)
インストール後にVSCodeを再起動します。

# ４．プロジェクトを作成する
Ctrl ＋ Shift + P を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/36b78f3d-9df0-9eba-7a04-32ecccf13cac.png)

SFDX:マニフェストファイルを使用してプロジェクトを作成 を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/1c9d8e64-2f7c-0902-1639-4695a71bbef0.png)

標準 を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/e9ef25f8-fd29-8a99-ecb0-a69c40a12077.png)

任意のプロジェクト名を入力して Enter を押します。
フォルダダイアログが表示されるのでプロジェクトを配置するフォルダを選択します。
プロジェクトがされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/2cb268e6-99e9-dca8-5062-e81d85cb72b8.png)


# ５．Salesforce組織と接続する
Ctrl ＋ Shift + P を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/3f79d2f8-c2b0-b797-4ffb-c8776a85421e.png)

SFDX:組織を認証 を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/8fbb039a-291a-965d-c500-98c0af414f84.png)

接続したい環境を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/58c1ea7f-4901-f3b2-f060-4f95e92a4ab4.png)

何も入力せず Enter を押すと、ブラウザが開きSalesforceのログイン画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/b8e7ba4e-3c2e-a788-1a2f-ff41860c382d.png)

アカウントを選択または入力してSalesforceにログインが完了すると
VSCodeの画面右下に「SFDX:組織を認証 が正常に実行されました。」というメッセージが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/b2416056-160e-422e-5839-2d3ea355cb4e.png)


# ６．Salesforce組織からソースを取得する
まだプロジェクトの中身は空なので、接続組織からコードを取得します。

エクスプローラーの manifest の下の package.xml を右クリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/05979b24-eea2-5743-3f97-7caeae18afeb.png)

SFDX:マニフェストファイルのソースを組織から取得 を選択します。
成功すると画面右下に 「successfully ran」 が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/a611993c-f161-6964-97d0-c04a591346c8.png)

エクスプローラーの force-app\main\default (または force-app と表示されている)下にソースコードが取得されます。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/05b8aa06-a254-c3af-0105-7bf15c6941b0.png)

# ７．Salesforce組織へデプロイする
VSCodeでソースコードの修正やファイル（ApexクラスやVFページ）の追加が完了したら
接続組織にあげなければなりません。

デプロイしたいファイルやフォルダを右クリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/7a4cc160-6934-32be-c169-8e810f7d8298.png)

SFDX:組織へソースをデプロイ を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/b73768f6-87f8-0f90-bfd8-44161759ecf2.png)

デプロイが失敗する場合はソースコードの問題箇所を修正しましょう。
成功すると画面右下に 「successfully ran」 が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/11f47779-dd48-2961-167b-3f29d15ed9a6.png)

# おまけ　VSCodeでデバッグ
VSCodeでのデバッグ機能のセットアップは下記記事をご参考ください(^^)/

https://qiita.com/piepie1231/items/b2e2ca1153ed0857df97

# 参考
https://trailhead.salesforce.com/ja/content/learn/projects/quickstart-vscode-salesforce