Salesforce Trailhead LWC開発ハンズオンChallengeの取り組み方-

## この記事に書いていること

Salesforceが提供する学習プラットフォーム[Trailhead](https://trailhead.salesforce.com/ja/today)におけるハンズオンChallengeのうち、**フロントエンド分野のLightning Web コンポーネント（LWC）開発課題**をクリアするまでの取り組み方について、参考サイトを踏襲しつつ躓きポイントを追加して解説しています。
また開発環境としてVSCodeを使用する前提で記載しています。

学習者だけでなく、Salesforce資格（特に[JavaScriptデベロッパー資格](https://trailhead.salesforce.com/ja/credentials/javascriptdeveloperi)）保有者にとっても、年にいちどの資格更新モジュールに取り組む際の参考になると幸いです。

:::note info
対象読者
- Salesforce資格保有者で更新課題に取り組む方
- Trailheadのフロントエンド課題に取り組む方
:::

以下のリソースも参考になります。

:::note info
- 資格更新について
https://tandc.salesforce.com/release-exam
- 資格更新モジュール一覧
https://trailhead.salesforce.com/ja/content/learn/trails/maintain-your-salesforce-certifications
- 認定資格の更新 ハンズオンチャレンジの準備~実施
https://quip.com/gSoUA2D2etnP
:::

## 更新情報の確認

Salesforce資格保有者の方はプロファイルにログインして更新状況を確認しておきましょう。

- https://www.salesforce.com/trailblazer/profile
- 資格の更新状況を確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/c28b2b00-4483-01b2-5e36-ac5e7fd5ef2d.png)

## **ハンズオンChallenge概要**

Trailheadの課題には**選択式**と**ハンズオンChallenge**があります。

ハンズオンChallengeでは実際に**コンポーネントを実装し、リリースして、課題のテストをクリアする**必要があり、ややハードルが高くなっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/c9ce17fb-26ee-c3d5-8dcd-c8e07d4d6a82.png)

ざっくりした流れは

1. Trailheadでハンズオン組織の作成
2. VSCodeで
    1. プロジェクト作成
    2. プロジェクトとハンズオン組織の紐づけ
    3. LWCコンポーネント開発
    4. プロジェクトをハンズオン組織にリリース
3. ハンズオン組織でLWCコンポーネントを配置
4. Trailheadで課題の「Challengeを確認してxxxポイントを獲得」をクリック

となっており、以降のセクションで準備編と開発編に分けて説明しています。

## 準備編：VSCode開発環境構築～ハンズオン組織作成

### ◇VSCode（Visual Studio Code）に開発環境を構築

このセクションではCLIインストールとVSCodeをセットアップして`SFDX: Create Project` などのコマンドで作業できる環境を構築します。

:::note info
参考：https://trailhead.salesforce.com/ja/content/learn/projects/quickstart-vscode-salesforce/vscode-salesforce-ready
:::

- コマンドラインインターフェース (CLI) をインストールします。
    1. [Salesforce CLI](https://developer.salesforce.com/ja/tools/salesforcecli?_ga=2.61922735.2017255606.1720846929-1710282814.1676901062) からOSに合わせて CLI をインストールします。
    2. コマンドラインから次のコマンド`sf update`を実行して、CLI が適切にインストールされていて最新バージョンであることを確認します。
（インストール手順の詳細は、[『Salesforce CLI Setup Guide (Salesforce CLI 設定ガイド)』](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup?_ga=2.91438233.2017255606.1720846929-1710282814.1676901062)で、[macOS](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_install_cli.htm#sfdx_setup_install_cli_macos) または [Windows](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_install_cli.htm?&_ga=2.54131243.2017255606.1720846929-1710282814.1676901062#sfdx_setup_install_cli_windows) の説明をそれぞれ参照してください。）

- Salesforce Extension Pack をインストールします。
    1. VSCodeを起動します。
    2. 左のツールバーで、[Extensions (拡張機能)] をクリックします。
    3. 検索項目に Salesforce Extension Pack と入力し、表示された拡張機能をインストール、再起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/b4c4d2ec-869e-fe9d-e827-7c400d60ff17.png)
        > 引用元：https://trailhead.salesforce.com/ja/content/learn/projects/quickstart-vscode-salesforce/vscode-salesforce-ready

### ◇ハンズオン組織（Trailhead Playground）の作成

このセクションでは最終的にハンズオン組織のログイン情報（ユーザー名とパスワード）を取得します。このログイン情報は課題に取り組む際にVSCodeとハンズオン組織組織を紐づけるために必要になります。

- ハンズオンChallengeの課題、もしくは以下の課題を表示します。

:::note info
https://trailhead.salesforce.com/ja/content/learn/projects/quickstart-vscode-salesforce/vscode-salesforce-ready
:::

- 赤枠で示したハンズオン組織の選択をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/0bc9f934-df3c-2e4e-8b72-548db6556365.png)

- Playgroundを作成をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/65481e13-523d-01bf-c5ce-e90f410e01ca.png)

- 任意の名前で作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/e0e08d36-a6db-0eab-f150-87b14072241b.png)

- 作成が完了したら、起動をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/d8c19b29-c59a-18c6-fcb9-2537891ebd8e.png)

- Welcomeページが表示されるので、**Get Your Login Credential**タブをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/6f0baab5-5898-61c3-702b-46c2c43820d7.png)

- ログイン情報となる**ユーザー名をテキストファイルなどにメモ**し、Reset My Passwordをクリックしてパスワードを再設定してこれもメモしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/6cf7c64b-fc6d-65eb-a693-83164e11a687.png)

- **※Reset My Passwordの送信先の変更**
パスワードリセットのURLは記載されているメールアドレスに送信されますが、表示されているメールアドレスが普段使用しているものと違う場合は以下の手順で変更してください

  - プレイグラウンドを開き、ユーザーセットアップに移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/1fc313e1-888b-bbae-8d4e-f173da55cc97.png)

  - メールアドレスを変更し、ページ下にあるsaveをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/efb844b8-c7a6-01cc-21d8-0bdf641f8c9a.png)

  - 確認ダイアログでOKをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/35a4aecb-ee02-1dff-c548-14cf37ce2a08.png)

  - メールアドレスを確認するためのメール通知が届きます。
  - メールの確認用URLをクリックすると完了です。

:::note info
参考：https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000A8qLzSAJ
:::

### ◇ハンズオン組織（Trailhead Playground）の言語設定

課題に取り組む前に必ず言語設定を英語に変更する必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/df21be5b-927a-c509-465a-5db7a3aeee70.png)

- 言語設定を変更するためユーザーセットアップに移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/3e46e270-8cd4-16e0-68a9-5858a816565b.png)

- Language & Time Zoneを選択し、以下に設定してsaveをクリックします。
- Local→**English(United States)**
- Langage→**English**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/927a729d-638c-dcec-a015-19c6bec2af03.png)

## 開発編：プロジェクト作成、LWC開発、リリース、配置

開発環境およびハンズオン組織が未作成の方は先に[準備編：VSCode開発環境構築～ハンズオン組織作成](#準備編：VSCode開発環境構築～ハンズオン組織作成)を実施してください。

### ◇VSCodeでプロジェクト作成

- **Ctrl + Shift + P** キー (Windows) または **Cmd + Shift + P** キー (macOS) を押して、コマンドパレットを表示します。
- `SFDX: Create Project` と入力します。
- **[SFDX: Create Project (SFDX: プロジェクトを作成)]** を選択します。
- **[Standard (標準)]** を選択します。
- プロジェクト名に `MyComponent` （任意の名前）と入力して、**Enter** キーを押します。
- エクスプローラーが開くので任意の場所に作成します。

:::note info
久しぶりの開発で予期しないエラーを避けるため、`sf update`を実行して最新バージョンで作業することをお勧めします。
以前のコマンドは`sfdx update`でしたが、sf (v2)が推奨されているため、`sfdx version`を実行して表示されたバージョンが `sfdx-cli/7`で始まる場合、以下のサイトに従ってsf (v2)に移行してから`sf update`を実行してみてください。
[sfdx (v7) から sf (v2) への移行](https://developer.salesforce.com/docs/atlas.ja-jp.252.0.sfdx_setup.meta/sfdx_setup/sfdx_setup_move_to_sf_v2.htm)
> sf (v2) は、2023 年 7 月 12 日に正式リリースされました。その時点で、sfdx (v7) と sf (v1) の更新の公開が打ち切られました。Salesforce CLI の新機能やバグ修正を利用するには、sf (v2) を使用する必要があります。
:::

### ◇ハンズオン組織の紐づけ

プロジェクトとハンズオン組織を紐づけることで実装したコンポーネントをリリースできます。イメージ的には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**の部分をコピーし、それを入力します。

:::note info
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 コンポーネントを作成する

:::note info
参考：https://trailhead.salesforce.com/ja/content/learn/projects/quick-start-lightning-web-components/create-a-hello-world-lightning-web-component
:::
- 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を実装します。作成するコンポーネントは課題に合わせてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/9d150786-7b09-95bd-f858-e0248c337ba5.png)

### ◇ハンズオン組織にリリースする

- `force-app/main` の下にある `default` フォルダーを右クリックします。
- **[SFDX: Deploy This Source to Org (SFDX: 組織にソースをリリース)]** をクリックします。
- 実行結果はOUTPUTタブで確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/9891a615-663d-76a0-4b3b-43afecefe15e.png)

:::note warn
ハンズオン組織に接続できていないと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 (設定)] を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/11e4e63f-143e-55f5-051b-3220af0f3d9d.png)

- [Quick Find (クイック検索)] ボックスに Home (ホーム) と入力し、[Feature Settings (機能設定)] セクションで [Home (ホーム)] を選択します。
- [Advanced Seller Home (高度な営業ホーム)] で、設定を [Inactive (無効)] に切り替えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/00c29f3a-2896-58df-d490-e04144881466.png)

- アプリケーションランチャー **[Sales (セールス)]** を見つけて選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/ab66ea5b-ecb3-ca03-a26a-63cf9dcb9870.png)

- **[Edit Page (編集ページ)]** を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/7abb7833-0dcf-2eeb-c512-00eaf4a281fe.png)

:::note warn
※先ほどの[Advanced Seller Home (高度な営業ホーム)] で、設定を [Inactive (無効)] に切り替えないと **[Edit Page (編集ページ)]** リンクが表示されません。
:::

- Lightning コンポーネントのリストの [Custom (カスタム)] 領域から `helloWorld` Lightning Web コンポーネントをページキャンバスの上部にドラッグします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/ca75f24e-3208-45de-9bed-9ffe023f409b.png)

:::note warn
コンポーネントが表示されない場合は`xxx.js-meta.xml`を確認してください。

- **isExposedがTrueになっているか**
`xxx.js-meta.xml`の`isExposed`が`false`になっている可能性があるので、`true`にして再デプロイしてください。
- **targetsで配置する場所を指定できているか**
今回はホームに表示するので`<target>lightning__HomePage</target>`を設定しています。

```xml
<?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>
```
参考：https://sfdctechsite.com/2022/02/06/lwc_isexported/
:::

- **[Save (保存)]** をクリックします。
- **[Activate (有効化)]** をクリックします。
- **[Assign as Org Default (組織のデフォルトとして割り当て)]** をクリックします。
- **[Save (保存)]** をクリックします。
- もう一度 **[Save (保存)]** をクリックしてから、アプリ内の左矢印をクリックしページに戻ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/574edc82-8c21-2892-c91f-2c4c8e2c39de.png)

- ページを更新すると、新しいコンポーネントが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/4e026ee7-f058-7632-7e06-71e129a4189a.png)

## ハンズオンChallengeを完了させる

最後に課題の緑のボタン「Challengeを確認してXXXポイントを獲得」をクリックして合格すれば完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218989/5a0c2ca0-30ab-c442-d577-479601b41f26.png)

以上、LWCの開発からリリースまでがSalesforceの仕様上かなり特殊なものなので、公式を参考にしつつ躓きポイントを交えながら説明させていただきました。
参考になれば幸いです。