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

Last updated at 2024-02-20Posted at 2022-10-18

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

Salesforce には Omni Channel Inventory（OCI）というさまざまなストアフロントや注文管理システムを連携してリアルタイムの在庫管理ができる機能があります。

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

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

前提

DebHub 組織として Developer Edition を利用しました。

VS Codeでの開発準備

VS Codeでの開発については「Salesforce Extensions for Visual Studio Code」のドキュメントがよくまとまっています。
下記の記載はVS CodeとSFDXコマンドはインストールされている前提です。

VS Code のプラグイン

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

その他おすすめのプラグインはこちらのページに記載があります。

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

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

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

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

npm install --global prettier prettier-plugin-apex

VS Codeでの開発方法

手順

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

1. プロジェクトの作成

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

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

今回はスクラッチ環境を利用した組織の設定を紹介します。

Platform上で Dev Hub組織（スクラッチ組織を管理する組織）の設定
1. Platformで 設定 > Dev Hub に遷移する
2. 「Dev Hub を有効化」を有効にする
3. 「ロック解除済みパッケージと第二世代管理パッケージを有効化」を有効にする
VS Code から組織を認証する
1. コマンドパレットから「SFDX: Authorize a DevHub」を選択。
2. 自分が覚えやすいようなエイリアスを入力（例：TestOrg）
3. ブラウザが開くのでDev Hubを 1. で有効にした組織でログイン
VS Codeで利用するデフォルトの組織を設定
1. コマンドパレットから「SFDX: Set a Default Org」を選択。
2. Dev Hub を有効にした組織（例：TestOrg）を選択
  1. VS Code の画面左下からも選択可能
VS Codeからスクラッチ組織を作成。スクラッチ組織の設定（project-scratch-def.json）については「Build Your Own Scratch Org Definition File」を参照。
1. コマンドパレットから「SFDX: Create a Default Scratch Org」を選択。
2. 「config/project-scratch-def.json」を選択。
3. 自分が覚えやすいようなエイリアスを入力（例：TestOrgScratch）
4. 組織の存続期間を選択（最長30日間まで）
5. コマンドで sfdx config:set defaultusername={3.で入力したエイリアス例：TestOrgScratch}　を実行しておきましょう。
（必要な場合）スクラッチ環境にデータを投入
1. データ投入方法はさまざまです。（以下例）
  1. 組織間でのデータのエクスポートとインポート
  2. sfdx force:apex:executeコマンドを利用してApexで投入
  3. sfdx force:data:bulk:upsert コマンドでCSVから投入

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

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

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

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

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

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

6. Platform上で動作を確認

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

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

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

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

コマンドパレットから「SFDX Package.xml Generator: Choose Metadata Components」を選択。
実装したメタデータを選択
右上の「UPDATE PACKAGE.XML」をクリック

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

名前空間の作成
1. （持っていなければ）Developer Edition 組織を作成
2. Developer Edition 組織で、名前空間を作成
3. Dev Hub 組織に戻って、名前空間をDev Hub 組織にリンク
sfdx-project.json 内の namespace に設定した名前空間を指定する。
下記コマンドでパッケージを作成
1. sfdx force:package:create -n {パッケージ名} -r force-app -t Unlocked -v {Dev Hub組織のエイリアス（例：TestOrg）}
下記コマンドでバージョンを作成
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}
（オプション）下記コマンドでリリースバージョンを作成。（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」から確認することができます。
スクラッチ組織を使わない場合は force:source:push や force:source:pull は利用できないので代わりにforce:source:deploy や force:source:retrieve を利用してください。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up