SFDC：Lightning Web Components 開発者ガイドを読んでLWC開発を試してみました

Lightning Web Components 開発者ガイドを読んでLWC開発を試してみました。

Lightning Web Components 開発者ガイド

試してみた内容

Part 1からPart 15となりました。いくつかのページはスキップしましたが、開発者ガイドの内容はだいたい目を通せたと思います。

Lightning Web ComponentとTrailhead

LWCの詳細について確認するのは「Lightning Web Components 開発者ガイド」を読むべきですが、とりあえず動かしてみたい、雰囲気を確認したいという場合はTrailheadがおすすめ。

Github

Lightning Web Components 開発者ガイドのサンプルコードやその他の参考情報を見ながら試したLWCのサンプルコードはこちら。

今回はSalesforce DX プロジェクトのルールにあわせる形で進めてみました。なのでSalesforce CLIを使ってスクラッチ組織の作成→ソースをデプロイ→権限セットの割り当て等を行うことで実際に動かせるようになっていると思います。

// git cloneでソースコード一式をダウンロード
git clone ... (Githubリポジトリを参照)

// スクラッチ組織作成
sf org create scratch -v <DevHub組織名> -f config/project-scratch-def.json -d -y 7 -a <スクラッチ組織名>

// スクラッチ組織作成処理でタイムアウト発生時の再実行
sf org resume scratch --job-id <JOB ID>

// スクラッチ組織にソースをデプロイ
sf project deploy start -o <スクラッチ組織名>

// スクラッチ組織のシステム管理者ユーザに権限セットを割り当て
sf org assign permset -n Trailblazers

// スクラッチ組織にテストデータをインポート
sf data import tree -p data/accounts-data-plan.json

// スクラッチ組織をChromeブラウザで開く
sf org open -o ScratchOrg -b chrome

スクラッチ組織にアクセスした後は、アプリケーションランチャーから「Trailblazers」アプリケーションを選択。これで作成したLWCのサンプルアプリのタブが表示されます。