この記事に書いていること
Salesforceが提供する学習プラットフォームTrailheadにおけるハンズオンChallengeのうち、フロントエンド分野のLightning Web コンポーネント（LWC）開発課題をクリアするまでの取り組み方について、参考サイトを踏襲しつつ躓きポイントを追加して解説しています。
また開発環境としてVSCodeを使用する前提で記載しています。
学習者だけでなく、Salesforce資格（特にJavaScriptデベロッパー資格）保有者にとっても、年にいちどの資格更新モジュールに取り組む際の参考になると幸いです。
対象読者
- Salesforce資格保有者で更新課題に取り組む方
- Trailheadのフロントエンド課題に取り組む方
以下のリソースも参考になります。
- 資格更新について
https://tandc.salesforce.com/release-exam - 資格更新モジュール一覧
https://trailhead.salesforce.com/ja/content/learn/trails/maintain-your-salesforce-certifications - 認定資格の更新 ハンズオンチャレンジの準備~実施
https://quip.com/gSoUA2D2etnP
更新情報の確認
Salesforce資格保有者の方はプロファイルにログインして更新状況を確認しておきましょう。
ハンズオンChallenge概要
Trailheadの課題には選択式とハンズオンChallengeがあります。
ハンズオンChallengeでは実際にコンポーネントを実装し、リリースして、課題のテストをクリアする必要があり、ややハードルが高くなっています。
ざっくりした流れは
- Trailheadでハンズオン組織の作成
- VSCodeで
- プロジェクト作成
- プロジェクトとハンズオン組織の紐づけ
- LWCコンポーネント開発
- プロジェクトをハンズオン組織にリリース
- ハンズオン組織でLWCコンポーネントを配置
- Trailheadで課題の「Challengeを確認してxxxポイントを獲得」をクリック
となっており、以降のセクションで準備編と開発編に分けて説明しています。
準備編：VSCode開発環境構築～ハンズオン組織作成
◇VSCode（Visual Studio Code）に開発環境を構築
このセクションではCLIインストールとVSCodeをセットアップしてSFDX: Create Project などのコマンドで作業できる環境を構築します。
-
コマンドラインインターフェース (CLI) をインストールします。
- Salesforce CLI からOSに合わせて CLI をインストールします。
- コマンドラインから次のコマンド
sf updateを実行して、CLI が適切にインストールされていて最新バージョンであることを確認します。
（インストール手順の詳細は、『Salesforce CLI Setup Guide (Salesforce CLI 設定ガイド)』で、macOS または Windows の説明をそれぞれ参照してください。）
-
Salesforce Extension Pack をインストールします。
- VSCodeを起動します。
- 左のツールバーで、[Extensions (拡張機能)] をクリックします。
- 検索項目に Salesforce Extension Pack と入力し、表示された拡張機能をインストール、再起動します。
◇ハンズオン組織（Trailhead Playground）の作成
このセクションでは最終的にハンズオン組織のログイン情報（ユーザー名とパスワード）を取得します。このログイン情報は課題に取り組む際にVSCodeとハンズオン組織組織を紐づけるために必要になります。
- ハンズオンChallengeの課題、もしくは以下の課題を表示します。
-
赤枠で示したハンズオン組織の選択をクリックします。
-
Playgroundを作成をクリックします。
-
任意の名前で作成します。
-
作成が完了したら、起動をクリックします。
-
Welcomeページが表示されるので、Get Your Login Credentialタブをクリックします。
-
ログイン情報となるユーザー名をテキストファイルなどにメモし、Reset My Passwordをクリックしてパスワードを再設定してこれもメモしておきます。
-
※Reset My Passwordの送信先の変更
パスワードリセットのURLは記載されているメールアドレスに送信されますが、表示されているメールアドレスが普段使用しているものと違う場合は以下の手順で変更してください-
プレイグラウンドを開き、ユーザーセットアップに移動します。
-
メールアドレスを変更し、ページ下にあるsaveをクリックします。
-
確認ダイアログでOKをクリックします。
-
メールアドレスを確認するためのメール通知が届きます。
-
メールの確認用URLをクリックすると完了です。
-
◇ハンズオン組織（Trailhead Playground）の言語設定
課題に取り組む前に必ず言語設定を英語に変更する必要があります。
-
言語設定を変更するためユーザーセットアップに移動します。
-
Language & Time Zoneを選択し、以下に設定してsaveをクリックします。
-
Local→English(United States)
-
Langage→English
開発編：プロジェクト作成、LWC開発、リリース、配置
開発環境およびハンズオン組織が未作成の方は先に準備編：VSCode開発環境構築～ハンズオン組織作成を実施してください。
◇VSCodeでプロジェクト作成
- Ctrl + Shift + P キー (Windows) または Cmd + Shift + P キー (macOS) を押して、コマンドパレットを表示します。
-
SFDX: Create Projectと入力します。 - [SFDX: Create Project (SFDX: プロジェクトを作成)] を選択します。
- [Standard (標準)] を選択します。
- プロジェクト名に
MyComponent（任意の名前）と入力して、Enter キーを押します。 - エクスプローラーが開くので任意の場所に作成します。
久しぶりの開発で予期しないエラーを避けるため、sf updateを実行して最新バージョンで作業することをお勧めします。
◇ハンズオン組織の紐づけ
プロジェクトとハンズオン組織を紐づけることで実装したコンポーネントをリリースできます。イメージ的にはGitHubにgit pushするイメージで、ハンズオン組織にSFDX: Deploy This Source to Orgが実行できるようにします。
- Ctrl + Shift + P キー (Windows) または Cmd + Shift + P キー (macOS) を押して、コマンドパレットを表示します。
-
SFDX: Authorize an Orgと入力します。 - [SFDX: Authorize an Org (SFDX: 組織を承認)] を選択します。
- [Project Default] を選択します。
- 「組織のエイリアスを入力またはデフォルトのエイリアスを使用」で入力待ち状態になるので、ハンズオン組織のURLからxxxxx.trailblazeの部分をコピーし、それを入力します。
URL構造：https://xxxxx.trailblaze.lightning.force.com/lightning/page/home
例）https://aa-bb-cc-dd-ee.trailblaze.lightning.force.com/lightning/page/home
→「aa-bb-cc-dd-ee.trailblaze」を入力
- 正しく入力するとブラウザーでSalesforce ログインウィンドウが開きます。
前のステップで取得した ハンズオン組織のユーザー名とパスワードを使用してハンズオン組織にログインします。 - 接続アプリケーションへのアクセスを許可するか確認されたら、[Allow (許可)] をクリックします。
- ブラウザーウィンドウを閉じます。
- トランザクションが完了すると、コマンドラインターミナルウィンドウに成功メッセージが表示されます。
- 試しに
SFDX: Open Default Orgを実行するとハンズオン組織のホーム画面がブラウザで表示されます。
◇Lightning Web コンポーネントを作成する
- VSCodeで、Ctrl+Shift+P (Windows) または Cmd+Shift+P (macOS) を押して、コマンドパレットを開きます。
-
SFDX: Create Lightning Web Componentと入力します。 - [SFDX: Create Lightning Web Component (SFDX: Lightning Web コンポーネントを作成)] を選択します。
- 新しいコンポーネントの名前として
helloWorld（任意の名前）と入力してEnter キーを押します。 - デフォルトの
force-app/main/default/lwcのままEnter キーを押します。 - lwcディレクトリ配下にコンポーネントベースが作成されます。
- これをベースにコンポーネントのHTMLやJavaScriptを実装します。作成するコンポーネントは課題に合わせてください。
◇ハンズオン組織にリリースする
-
force-app/mainの下にあるdefaultフォルダーを右クリックします。 - [SFDX: Deploy This Source to Org (SFDX: 組織にソースをリリース)] をクリックします。
- 実行結果はOUTPUTタブで確認できます。
ハンズオン組織に接続できていないとLWCデプロイに失敗して、コンソールにThe org cannot be foundと表示されます。
◇ハンズオン組織にコンポーネントを配置する
-
VSCode で、Ctrl+Shift+P (Windows) または Cmd+Shift+P (macOS) を押して、コマンドパレットを開きます。
-
SFDX: Open Default Orgと入力します。 -
[SFDX: Open Default Org (SFDX: デフォルトの組織を開く)] を選択します。
別のブラウザーでハンズオン組織が開きます。 -
[Setup (設定)] を選択します。
-
[Quick Find (クイック検索)] ボックスに Home (ホーム) と入力し、[Feature Settings (機能設定)] セクションで [Home (ホーム)] を選択します。
-
[Advanced Seller Home (高度な営業ホーム)] で、設定を [Inactive (無効)] に切り替えます。
-
アプリケーションランチャー [Sales (セールス)] を見つけて選択します。
-
[Edit Page (編集ページ)] を選択します。
※先ほどの[Advanced Seller Home (高度な営業ホーム)] で、設定を [Inactive (無効)] に切り替えないと [Edit Page (編集ページ)] リンクが表示されません。
- Lightning コンポーネントのリストの [Custom (カスタム)] 領域から
helloWorldLightning Web コンポーネントをページキャンバスの上部にドラッグします。
コンポーネントが表示されない場合はxxx.js-meta.xmlを確認してください。
-
isExposedがTrueになっているか
xxx.js-meta.xmlのisExposedがfalseになっている可能性があるので、trueにして再デプロイしてください。 -
targetsで配置する場所を指定できているか
今回はホームに表示するので<target>lightning__HomePage</target>を設定しています。
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>61.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
-
[Save (保存)] をクリックします。
-
[Activate (有効化)] をクリックします。
-
[Assign as Org Default (組織のデフォルトとして割り当て)] をクリックします。
-
[Save (保存)] をクリックします。
-
もう一度 [Save (保存)] をクリックしてから、アプリ内の左矢印をクリックしページに戻ります。
-
ページを更新すると、新しいコンポーネントが表示されます。
ハンズオンChallengeを完了させる
最後に課題の緑のボタン「Challengeを確認してXXXポイントを獲得」をクリックして合格すれば完了です。
以上、LWCの開発からリリースまでがSalesforceの仕様上かなり特殊なものなので、公式を参考にしつつ躓きポイントを交えながら説明させていただきました。
参考になれば幸いです。