初めての Lightning Web コンポーネント開発で OCI を操作してみる（lwc開発方法編）

※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。


Salesforce には [Omni Channel Inventory](https://resources.docs.salesforce.com/latest/latest/en-us/sfdc/pdf/salesforce_omnichannel_inventory_implementation_guide.pdf#page=5&zoom=100,76,553)（OCI）というさまざまなストアフロントや注文管理システムを連携してリアルタイムの在庫管理ができる機能があります。


私自身Lightning Web Component（lwc）を利用するのが初めてであったため、lwcの開発で利用した開発方法や困った点や気づいた点を３つの記事に分けてまとめました。

* [初めての Lightning Web コンポーネント開発でOCIを操作してみる（開発方法編）](https://qiita.com/syunyama/items/8c591c9fbe89731204a0)
* [初めての Lightning Web コンポーネント開発でOCIを操作してみる（開発内容編）](https://qiita.com/syunyama/items/863be1541d77957936ec)
* [初めての Lightning Web コンポーネント開発でOCIを操作してみる（気づき・困った編）](https://qiita.com/syunyama/items/3c68fa8f3163ee599d08)


今回は開発方法編ということでVS Codeや SFDX コマンドを使ってどのように開発したのかをまとめてみました。

## 前提
- DebHub 組織として [Developer Edition](https://developer.salesforce.com/jpblogs/2016/04/developer-edition-signup/) を利用しました。


## VS Codeでの開発準備

VS Codeでの開発については「[Salesforce Extensions for Visual Studio Code](https://developer.salesforce.com/tools/vscode/ja)」のドキュメントがよくまとまっています。
下記の記載は[VS Code](https://code.visualstudio.com/)と[SFDXコマンド](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_install_cli.htm#sfdx_setup_install_cli_macos)はインストールされている前提です。

### VS Code のプラグイン

VS Codeに入れたプラグインは下記の２つです

* [Salesforce Extension Pack](https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode)
* [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
* [XML](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-xml)
* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
* [Salesforce Package.xml Generator Extension for VS Code](https://marketplace.visualstudio.com/items?itemName=VignaeshRamA.sfdx-package-xml-generator)

その他おすすめのプラグインは[こちらのページ](https://developer.salesforce.com/tools/vscode/ja/vscode-desktop/recommended-extensions)に記載があります。


### その他プラグイン・ライブラリ

またVS Codeコードのプラグイン以外にもローカルでコンポーネントをプレビューするために下記コマンドでsfdxのプラグインもインストールします。

```sh
sfdx plugins:install @salesforce/lwc-dev-server
```

さらにApexクラスのフォーマットをするためのライブラリをPCにインストールします。
※ このプラグインはJAVAバージョン8だと動きませんでした。筆者はJAVA11で動作を確認できました。

```sh
npm install --global prettier prettier-plugin-apex
```






## VS Codeでの開発方法

### 手順

[1. プロジェクトの作成](#1-プロジェクトの作成)
[2. 組織の設定](#2-組織の設定)
[3. （Platform上に実装がある場合）retrieve](#3platform上に実装がある場合ソースの取得)
[4. lwc実装 & ローカルでプレビュー](#4-lwc実装--ローカルでプレビュー)
[5. 実装した内容をデプロイ](#5-実装した内容をデプロイ)
[6. Platform上で動作を確認](#6-platform上で動作を確認)
[7. （オプション）マニフェストの作成](#7-オプションマニフェストの作成)
[8. 未管理パッケージの作成](#8-未管理パッケージの作成)

### 1. プロジェクトの作成

:::note
**コマンドパレットについて**
VS Codeを開いた状態で「F1」キーまたは（Macの場合）「command + Shift + P」、（Windowsの場合）「Ctrl + Shift + P」でコマンドパレットを起動し、操作を選択します。

![image (37).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/44ee112e-f134-5529-9a50-bf0c5186f9ad.png)
:::

1. コマンドパレットから「**SFDX: Create Project with Manifest**」を選択。
1. テンプレート「標準」を選択
1. プロジェクト名を入力
1. プロジェクトを作成するフォルダを選択
    1. すると新しいVS Codeのウィンドウが表示され、テンプレートフォルダやファイルが表示されます。
    2. ※ 「**SFDX: Create Project**」というコマンドもありますが、後述する「マニフェストの作成」を行う場合は「**SFDX: Create Project with Manifest**」を選択してください。
1. その他のNode ライブラリもインストール
    ```sh
    npm install
    ```
1. 下記のようにsetting.jsonを設定します。XMLのバリーデーションでエラー回避やApexのフォーマッターの設定を行っています。下記の例では、`salesforcedx-vscode-core.push-or-deploy-on-save.enabled` が `false` となっているためファイル保存時に自動でPlatform上にデプロイされる設定にはなっていませんが、自動でデプロイさせるようにしたい場合は、`true` に変更してください。
    ```json:.vscode/settings.json
    {
      "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/.sfdx": true
      },
      "[apex]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
      },
      "salesforcedx-vscode-core.push-or-deploy-on-save.enabled": false,
      "xml.validation.enabled": false
    }
    ```




### 2. 組織の設定

今回は[スクラッチ環境](https://developer.salesforce.com/docs/atlas.ja-jp.sfdx_dev.meta/sfdx_dev/sfdx_dev_scratch_orgs.htm)を利用した組織の設定を紹介します。


1. Platform上で Dev Hub組織（スクラッチ組織を管理する組織）の設定
    1. Platformで **設定 > Dev Hub** に遷移する
    2. 「Dev Hub を有効化」を有効にする
    3. 「ロック解除済みパッケージと第二世代管理パッケージを有効化」を有効にする
2. VS Code から組織を認証する
    1. コマンドパレットから「**SFDX: Authorize a DevHub**」を選択。
    2. 自分が覚えやすいようなエイリアスを入力（例：TestOrg）
    3. ブラウザが開くのでDev Hubを 1. で有効にした組織でログイン
3. VS Codeで利用するデフォルトの組織を設定
    1. コマンドパレットから「**SFDX: Set a Default Org**」を選択。
    2. Dev Hub を有効にした組織（例：TestOrg）を選択
        1. VS Code の画面左下からも選択可能
        ![image (38).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/c675cd55-f797-7586-fc66-b7a9af4ab91e.png)

4. VS Codeからスクラッチ組織を作成。スクラッチ組織の設定（project-scratch-def.json）については「[Build Your Own Scratch Org Definition File](https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_scratch_orgs_def_file.htm)」を参照。
    1. コマンドパレットから「**SFDX: Create a Default Scratch Org**」を選択。
    2. 「config/project-scratch-def.json」を選択。
    3. 自分が覚えやすいようなエイリアスを入力（例：TestOrgScratch）
    4. 組織の存続期間を選択（最長30日間まで）
    5. コマンドで `sfdx config:set defaultusername={3.で入力したエイリアス 例：TestOrgScratch}`　を実行しておきましょう。 
5. （必要な場合）スクラッチ環境にデータを投入
    1. データ投入方法はさまざまです。（以下例）
        1. [組織間でのデータのエクスポートとインポート](https://developer.salesforce.com/docs/atlas.ja-jp.sfdx_dev.meta/sfdx_dev/sfdx_dev_test_data_example.htm)
        2. `sfdx force:apex:execute`コマンドを利用してApexで投入
        3. `sfdx force:data:bulk:upsert` コマンドでCSVから投入



### 3.（Platform上に実装がある場合）ソースの取得

* コマンドパレットから「**SFDX:Pull Source from Default Scratch Org**」を選択し手動で設定した内容をローカルのソースコードにダウンロードします



### 4. lwc実装 & ローカルでプレビュー

1. lwcまたはApexの作成
    1. `force-app/main/default/lwc` フォルダを右クリックして「**SFDX: Create Lightning Web Component**」を選択してlwcを作成。または `force-app/main/default/classes` フォルダを右クリックして「**SFDX: Create Apex Class**」を選択してApexクラスを作成するなどして開発を始める。
2. ローカルでのプレビュー
    1. `force-app/main/default/lwc` 配下にあるコンポーネントを右クリックして「**SFDX: Preview Component Locally**」をクリックしプレビューしながら開発を進める。
    1. 「Use Desktop Browser」をクリック
3. ※ もしモバイルでのプレビューをしたい場合は、[追加で設定](https://developer.salesforce.com/docs/component-library/documentation/ja-jp/55.0/lwc/lwc.mobile_extensions)が必要です。



### 5. 実装した内容をデプロイ

* コマンドパレットから「**SFDX:Push Source to Default Scratch Org**」を選択。



### 6. Platform上で動作を確認

1. コマンドパレットから「**SFDX: Open DefaultOrg**」を選択し、組織を開く
2. Lightning アプリケーションビルダーから任意のページに作成したコンポーネントを設置してみて動作を確認




### 7. （オプション）マニフェストの作成

pakaege.xml は必須ではありませんが作成しておくと、下記のコマンドで組織から実装対象のメタデータやソースコードを抽出することができます。

```sh
sfdx force:mdapi:retrieve -s -r {出力先フォルダ} -k ./manifest/package.xml
```

* コマンドパレットから「**SFDX Package.xml Generator: Choose Metadata Components**」を選択。
* 実装したメタデータを選択
* 右上の「UPDATE PACKAGE.XML」をクリック
    * ![image (39).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/a1e8ba6a-5760-9a3c-efb4-c6dc4b99efde.png)






### 8. 未管理パッケージの作成

1. 名前空間の作成
    1. （持っていなければ）[Developer Edition 組織を作成](https://developer.salesforce.com/jpblogs/2016/04/developer-edition-signup/)
    2. Developer Edition 組織で、[名前空間を作成](https://developer.salesforce.com/docs/atlas.ja-jp.234.0.sfdx_dev.meta/sfdx_dev/sfdx_dev_unlocked_pkg_create_namespace.htm)
    3. Dev Hub 組織に戻って、[名前空間をDev Hub 組織にリンク](https://help.salesforce.com/s/articleView?id=sf.sfdx_dev_reg_namespace.htm&type=5)
2. `sfdx-project.json` 内の `namespace` に設定した[名前空間を指定する](https://developer.salesforce.com/docs/atlas.ja-jp.230.0.sfdx_dev.meta/sfdx_dev/sfdx_dev_ws_config.htm)。
3. 下記コマンドでパッケージを作成
    1. `sfdx force:package:create -n {パッケージ名} -r force-app -t Unlocked -v {Dev Hub組織のエイリアス（例：TestOrg）}`
4. 下記コマンドでバージョンを作成
    1. `sfdx force:package:version:create --codecoverage -p {パッケージ名} -d force-app -k {インスール時のパスワード} --wait 20 -v {Dev Hub組織のエイリアス（例：TestOrg）} -f config/project-scratch-def.json`
    2. すると下記のようなフォーマットのURLが表示されるので、このURLにアクセスし、インストールしたい組織にログインし、上記で設定したパスワードを設定すると、インストールが始まります。
        1. `https://login.salesforce.com/packaging/installPackage.apexp?p0={`ID`}`
5. （オプション）下記コマンドでリリースバージョンを作成。（Apexコードカバー率が75%以上である必要がある。）
    1. `sfdx force:package:version:promote -p {バージョン名またはバージョンID = sfdx-project.json の packageAliases の中のどれか} -v {Dev Hub組織のエイリアス（例：TestOrg）}`


※ -vで指定するのはスクラッチ組織ではなく、Dev Hub組織なのでご注意を！！




## SFDX コマンド

前述の「VS Codeでの開発方法」ではコマンドパレットを利用して操作しましたが、それぞれの操作に対応するSFDXコマンドがあるのでそちらも紹介しておきます。下記引数は省略していますが、`--help` 引数をつけることで使い方を確認することができます。

* SFDX: Authorize an Org
    * `sfdx auth:web:login`
* SFDX: Set a Default Org
    * `sfdx config:set defaultusername={userid or alias}`
* SFDX: Create a Default Scratch Org
    * `sfdx force:org:create`
* SFDX:Push Source to Default Scratch Org
    * `sfdx force:source:push`
* SFDX:Pull Source from Default Scratch Org
    * `sfdx force:source:pull`
* SFDX: Open DefaultOrg
    * `sfdx force:org:open`
* SFDX: Create Lightning Web Component
    * `sfdx force:lightning:component:create`
* SFDX: Create Apex Class
    * `sfdx force:apex:class:create`


**Tips**

* その他のコマンドは「[Salesforce CLI Command Reference](https://developer.salesforce.com/docs/atlas.en-us.sfdx_cli_reference.meta/sfdx_cli_reference/cli_reference_top.htm)」から確認することができます。
* スクラッチ組織を使わない場合は `force:source:push` や  `force:source:pull` は利用できないので代わりに`force:source:deploy` や `force:source:retrieve` を利用してください。