Salesforce LWC開発環境構築（VSCode）

# これは何？
この記事は「[24日後に立派なSalesforceエンジニアになるWEBエンジニア Advent Calendar 2022](https://qiita.com/advent-calendar/2022/kakakaori)」の７日目の記事です。１8日後に立派なSalesforceエンジニアになるために今日からLightning Web Component (LWC)について学んでいくためにまずは開発環境を構築します！

# LWCとは？
元々SalesforceではAuraと呼ばれるプログラミングモデルでコンポーネントを作っていたが、Auraに代わるプログラミングモデルとして誕生したのがLWC。LWCが誕生した詳しい経緯は[Lightning Web Components はなぜ生まれたのか？](https://qiita.com/hrk623/items/70fe3bc161a30b54686d)に記載がありとても参考になった。
LWCは開発者コンソールから編集ができないので、SalesforceCLIを使う必要があるのでまずは開発環境の構築が必須。

# 開発環境構築
公式で[VSCodeを使った環境構築](https://trailhead.salesforce.com/ja/content/learn/projects/quickstart-vscode-salesforce)について詳しく記載があるので本記事でもそれに沿って進めていく。

## 1. VSCodeをインストール

## 2. Salesforce CLI をインストール
[こちら](https://developer.salesforce.com/docs/atlas.ja-jp.sfdx_setup.meta/sfdx_setup/sfdx_setup_install_cli.htm)にそれぞれの環境でのインストール手順が書かれているのでそれに従ってインストールを行う。
以下のコマンドでSalesforce CLI のインストールが正しく行われていることを確認する。
```
sfdx --version
sfdx-cli/7.144.0 darwin-x64 node-v16.14.2
```

## 3. VSCodeを起動して”Salesforce Extension Pack”をインストール
![スクリーンショット 2022-12-03 21.51.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/1a723e50-a92d-81eb-9b5f-70eee29d2263.png)

## 4. ローカルにプロジェクトを作成

`Ctrl+Shift+P`または`Cmd+Shift+P`でコマンドパレットを開き、`SFDX: プロジェクトを作成`を選択
![スクリーンショット 2022-12-03 21.55.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/cc7b2382-4592-c984-eecb-b6b1437a0685.png)

プロジェクトのテンプレートを聞かれるので「標準」を選択。
![スクリーンショット 2022-12-03 21.56.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/70c9aa1e-f67d-18a2-368b-275fb83c57ee.png)

プロジェクト名は好きなものを入れたら
![スクリーンショット 2022-12-03 21.56.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/094751d7-a278-496c-1213-d535e6f1f117.png)

完成。
![スクリーンショット 2022-12-03 21.57.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/7f2ffc47-7ec8-9b20-0bb9-e96703961087.png)

## 5. Salesforce組織に接続
`Ctrl+Shift+P`または`Cmd+Shift+P`でコマンドパレットを開き、`SFDX: 組織を認証 `を選択
![スクリーンショット 2022-12-03 22.02.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/8ee56562-b1de-2710-553c-bc806dbf0c71.png)

接続したい組織の種類を選択。今回はSandboxに接続することとする。
![スクリーンショット 2022-12-03 22.03.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/386bbb5b-8beb-fa1b-31b0-faa12eef9734.png)

エイリアスを入力。自分がわかればなんでもいい。
![スクリーンショット 2022-12-03 22.04.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/8a89c2eb-823b-56f6-8d60-139a3f10a6cd.png)

これでエンターを押すとブラウザが起動してSalesforceのログイン画面が立ち上がるのでログインをすると組織の接続が完了する。無事に接続ができていると以下のような内容が表示される。
```
開始しています: SFDX: 組織を認証

22:04:31.117 sfdx force:auth:web:login --setalias test --instanceurl https://test.salesforce.com --setdefaultusername
Successfully authorized xxxx@example.com with org ID xxxxxxxxxxxxxx
22:13:39.957 sfdx force:auth:web:login --setalias test --instanceurl https://test.salesforce.com --setdefaultusername

 が終了コード 0 で終了しました。
```

これでローカルで開発してそれを指定したSandboxに反映したり、Salesforce組織にある情報をローカルに落としてきたりすることができる。
今回は何も処理を書いてないLWCを作って組織に上げてみる。

# LWCを新規作成
lwcのフォルダを右クリック > SFDX : Lightning Web コンポーネントを作成 をクリック。作成するファイル名を聞かれるので好きなものを入れる。
![スクリーンショット 2022-12-03 22.16.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/83b7d2a0-71d8-0823-3e97-bdc4c60771ba.png)

できた。
![スクリーンショット 2022-12-03 22.20.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/3253e755-10bc-c942-8c72-937cda3d3a32.png)

# ローカル　→ Salesforce組織
今作成したLWCを右クリック > SFDX: 組織へソースをデプロイ を選択。
![スクリーンショット 2022-12-03 22.21.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/a682f068-e377-b7ca-1e04-d1df06fd4952.png)
こんなのが出てきたら無事にSalesforce組織にアップできている。

```
22:22:20.907 開始しています: SFDX: 組織へソースをデプロイ

=== Deployed Source
STATE    FULL NAME  TYPE                      PROJECT PATH                                    
───────  ─────────  ────────────────────────  ────────────────────────────────────────────────
Created  test       LightningComponentBundle  force-app/main/default/lwc/test/test.html       
Created  test       LightningComponentBundle  force-app/main/default/lwc/test/test.js         
Created  test       LightningComponentBundle  force-app/main/default/lwc/test/test.js-meta.xml

22:22:24.759 が終了しました。 SFDX: 組織へソースをデプロイ
```
# Salesforce組織　→ ローカル
逆に組織にあるファイルをローカルに落としてくる場合は、雲のアイコンをクリックして落としてきたいファイルを右クリック > 組織からソースの取得　
![スクリーンショット 2022-12-03 22.26.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/8bc52501-8d1e-a090-f2bd-431d5586ca6b.png)
うまくいくとこんな感じになる。
```
22:27:41.798 開始しています: SFDX: 組織からソースを取得

=== Retrieved Source
FULL NAME    TYPE     PROJECT PATH                                                
───────────  ───────  ────────────────────────────────────────────────────────────
AppSwitcher  AppMenu  force-app/main/default/appMenus/AppSwitcher.appMenu-meta.xml

22:27:43.964 が終了しました。 SFDX: 組織からソースを取得
```

# 小ネタ
たまにVSCodeから組織にデプロイしようとすると
```
Error authenticating with the refresh token due to: expired access/refresh token
```
というエラーが突然現れることがある。
そんなときは
1. 組織を再認証する
1. それでもダメならVSCode再起動する
1. それでもダメなら `.sfdx` のフォルダを削除する

あたりを試すと接続できるようになる。

# 最後に
これで開発環境もできたのでようやく明日からLWCを触ることができそう。
と言うわけで明日は実際にLWCを使ってコンポーネント開発をやって見たいと思います！