Lightning Web コンポーネントを使用して再利用可能な UI コンポーネントを作成する

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

Trail Together の動画

エキスパートの説明を見ながらこのステップを進めて行きたい場合は、 Trail Together シリーズの一部である、こちらの動画をご覧ください。

(巻き戻して最初から見直したい場合、このクリップは 46:56 分から開始されます。)

はじめに

Lightning Web コンポーネントは、<<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" rel="noreferrer noopener" target="_blank">>Web コンポーネント</<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" rel="noreferrer noopener" target="_blank">>標準を使用するカスタム HTML 要素で、HTML と最新の JavaScript を使用して作成されます。Lightning Web コンポーネント (LWC) はブラウザーでネイティブに実行され、開発者は標準のユーザーインターフェースをカスタマイズできます。

Lightning Web コンポーネントを作成してリリースする

force-app/main/default の下にある <>lwc</> フォルダーを右クリックし、<>[SFDX: Create Lightning Web Component (SFDX: Lightning Web コンポーネントを作成)]</> を選択します。
Lightning Web コンポーネントに <<code>>housingMap</<code>> と名前を付け、コンポーネントの種類に <>[JavaScript]</> を選択します。
HTML ファイル、JavaScript ファイル、メタデータ XML ファイル、test.js ファイルが表示されます。
housingMap.html という HTML ファイルに、次のコードをコピーして貼り付けます。

  <template>
  <lightning-card title="Housing Map">
    <!-- Explore all the base components via Base component library
    (https://developer.salesforce.com/docs/component-library/overview/components)-->
      <lightning-map map-markers={mapMarkers}> </lightning-map>
  </lightning-card>
</template>

Lightning 基本コンポーネントである <>lightning-map</> を使用して、データセットを地図上に示します。基本コンポーネントには多くの機能がまとまっています。この例では、地図の UI を生成するために HTML マークアップを記述したり、Google マップと統合するために JavaScript をそれほどコーディングしたりする必要はありませんでした。

ファイルを保存します。
housingMap.js という JavaScript ファイルに、次のコードをコピーして貼り付けます。

import { LightningElement, wire } from "lwc";
import getHouses from "@salesforce/apex/HouseService.getRecords";
export default class HousingMap extends LightningElement {
    mapMarkers;
    error;
    @wire(getHouses)
    wiredHouses({ error, data }) {
        if (data) {
        console.log(data);
    }
  }
}

Lightning Web コンポーネントは、前のセクションで記述した Apex クラスの HouseService を呼び出してデータを取得します。このコードは、<>@wire</> <<a href="https://developer.salesforce.com/docs/component-library/documentation/en/lwc/reference_decorators" rel="noreferrer noopener" target="_blank">>デコレーター</<a href="https://developer.salesforce.com/docs/component-library/documentation/en/lwc/reference_decorators" rel="noreferrer noopener" target="_blank">>を使用して Apex メソッドを呼び出してデータを取得する方法を示しています。

LWC で Apex メソッドを使用できるようにするには、<>@AuraEnabled</> アノテーションを付加します。<>@AuraEnabled</> メソッドを関数として LWC にインポートできます (2 行目を参照)。<>@wire</> デコレーターと一緒に使用すると (8 行目)、コンポーネントはメソッドを介してデータを取得します。

次に、<<a href="https://developer.salesforce.com/docs/component-library/bundle/lightning-map/documentation" rel="noreferrer noopener" target="_blank">>lightning-map</<a href="https://developer.salesforce.com/docs/component-library/bundle/lightning-map/documentation" rel="noreferrer noopener" target="_blank">> 基本コンポーネントの必要に応じてデータを変換するコードを追加しましょう。<<code>>if (data) {</<code>> の後のコードを次の行に置き換えます。

// Use JavaScript Map function to transform the Apex method response wired to the component into the format required by lightning-map
          this.mapMarkers = data.map((element) => {
                return {
                    location: {
                        Street: element.Address__c,
                        City: element.City__c,
                        State: element.State__c
                    },
                    title: element.Name
                };
            });
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.mapMarkers = undefined;

housingMap.js ファイルの最終的なコードは次のようになります。

import { LightningElement, wire } from "lwc";
import getHouses from "@salesforce/apex/HouseService.getRecords";
export default class HousingMap extends LightningElement {
    mapMarkers;
    error;
    @wire(getHouses)
    wiredHouses({ error, data }) {
        if (data) {
         // Use JavaScript Map function to transform the Apex method response wired to the component into the format required by lightning-map
          this.mapMarkers = data.map((element) => {
                return {
                    location: {
                        Street: element.Address__c,
                        City: element.City__c,
                        State: element.State__c
                    },
                    title: element.Name
                };
            });
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.mapMarkers = undefined;
        }
    }
}

ファイルを保存します。

housingMap.js-meta.xml という XML ファイルで、4 行目から 7 行目と一致するようにコードを変更します。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
 <apiVersion>59.0</apiVersion>
 <isExposed>true</isExposed>
  <targets>
 <target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>

target 属性は <>lightning__HomePage</> に設定されています。つまり、管理者はコンポーネントをホームページにドロップできます。コンポーネントを Salesforce UI の別の部分で公開するために、他にもここに追加できる <<a href="https://developer.salesforce.com/docs/component-library/documentation/en/lwc/reference_configuration_tags" rel="noreferrer noopener" target="_blank">>targets</<a href="https://developer.salesforce.com/docs/component-library/documentation/en/lwc/reference_configuration_tags" rel="noreferrer noopener" target="_blank">> があります。コンポーネントの target には、入力データなどの追加のコンテキストが含まれる場合があります。その良い例が、レコードページのレコード ID 値です。ここで指定した targets により、コンポーネントでこうしたさまざまなコンテキストを使用できるかどうかが決まります。「リソース」セクションで、別の種類の target の動作を参照してください。

ファイルを保存します。
右クリックして <>[SFDX: Deploy This Source to Org (SFDX: 組織にこのソースをリリース)]</> を選択します。

コンポーネントをアプリケーションホームに追加する

Visual Studio Code で、<>Ctrl+Shift+P</> (Windows) または <>Cmd+Shift+P</> (macOS/Linux) を押して、コマンドパレットを開きます。
<<code>>SFDX</<code>> と入力します。
<>[SFDX: Open Default Org (SFDX: デフォルト組織を開く)]</> を選択します。
これにより、Trailhead Playground が別のブラウザーで開きます。
<img alt="App Launcher" class="image" src="images/kix.1hf56fg8pw83.jpg" width="31.5"/> をクリックし、<>[Dreamhouse]</> を検索して選択します。
[Home (ホーム)] タブに移動します。上部のナビゲーションメニューで [Home (ホーム)] をクリックします。
<img alt="Setup" class="image" src="images/kix.iatvqhipilze.jpg" width="26.820053100585938"/> をクリックして、<>[Edit Page (編集ページ)]</> を選択します。
Lightning コンポーネントのリストの [Custom (カスタム)] 領域から <>housingMap</> Lightning Web コンポーネントをページキャンバスの上部にドラッグします。
<>[Save (保存)]</> をクリックします。
<>[Activate (有効化)]</> をクリックします。
<>[Assign as Org Default (組織のデフォルトとして割り当て)]</> をクリックします。
<>[Save (保存)]</> をクリックします。
もう一度 <>[Save (保存)]</> をクリックしてから、<img alt="Back" class="image" src="images/kix.bnc114cd4e6.jpg" width="31.06024169921875"/> をクリックしページに戻ります。
ページを更新すると、新しいコンポーネントが表示されます。

Salesforce 管理ランタイムで Lightning Web コンポーネントを使用して構築すると、次の理由により作業時間が短縮されます。

記述するコードが少なくて済み、多数の Lightning 基本コンポーネントにアクセスしてより多くのことを実現できます (Housing Map コンポーネントの lightning-map と lightning-card は、前述のコードで使用した基本コンポーネントの例です)。
クライアント側とバックエンド Apex データサービスの接続は、JavaScript デコレーター (前述のコードで使用した <>@wire</> デコレーターなど) と組み込みモジュール (<>@salesforce/apex</>) で簡易化されます。

これは非常に単純な LWC の例です。より高度な Lightning Web コンポーネントの例をご覧になりたい方は、 Trailhead モジュール<<a href="https://trailhead.salesforce.com/content/learn/projects/quick-start-dreamhouse-sample-app" rel="noreferrer noopener" target="_blank">>「Quick Start: Explore the Dreamhouse Sample App (クイックスタート: Dreamhouse サンプルアプリケーションの操作)」</<a href="https://trailhead.salesforce.com/content/learn/projects/quick-start-dreamhouse-sample-app" rel="noreferrer noopener" target="_blank">>の「Get to Know the Sample App (サンプルアプリケーションについて知る)」単元の [Property Explorer] ページの作成に伴う<<a href="https://github.com/trailheadapps/dreamhouse-lwc" rel="noreferrer noopener" target="_blank">>コンポーネント</<a href="https://github.com/trailheadapps/dreamhouse-lwc" rel="noreferrer noopener" target="_blank">>を確認してください。ここでは、Lightning Web コンポーネントを使用して、アプリケーションのユーザーエクスペリエンスを完全にカスタマイズしています。

または、 Salesforce Platform でのエンドツーエンドアプリケーションの作成について詳しく学ぶには、完全な Dreamhouse <<a href="https://github.com/trailheadapps/dreamhouse-lwc" rel="noreferrer noopener" target="_blank">>サンプルアプリケーション</<a href="https://github.com/trailheadapps/dreamhouse-lwc" rel="noreferrer noopener" target="_blank">>をインストールして操作してみてください。

次のステップ

このプロジェクトでは、開発者が LWC や Apex などの Salesforce Platform 機能をどのように使用するかについて概要を説明しました。ただし、開発者ができることはそれだけではありません!

Heroku は、開発者がアプリケーションリソースの水平拡張と垂直拡張を完全に制御する必要がある場合に使用できるもう 1 つの製品です。また、Salesforce <<a href="https://developer.salesforce.com/developer-centers" rel="noreferrer noopener" target="_blank">>製品</<a href="https://developer.salesforce.com/developer-centers" rel="noreferrer noopener" target="_blank">>スイートと <<a href="https://agentexchange.salesforce.com/" rel="noreferrer noopener" target="_blank">>Salesforce AgentExchange</<a href="https://agentexchange.salesforce.com/" rel="noreferrer noopener" target="_blank">> を利用すれば、学習の機会は無限に広がります。

学習ジャーニーでは、あなたは独りではありません。<<a href="https://trailhead.salesforce.com/en/trailblazer-community/groups/0F93A000000DJbJSAW?tab=discussion&sort=LAST_MODIFIED_DATE_DESC" rel="noreferrer noopener" target="_blank">>Salesforce Trailblazer Community</<a href="https://trailhead.salesforce.com/en/trailblazer-community/groups/0F93A000000DJbJSAW?tab=discussion&sort=LAST_MODIFIED_DATE_DESC" rel="noreferrer noopener" target="_blank">> の「Salesforce Developers」グループで、世界中の開発者とのコラボレーションやネットワーキングを通じて人脈を構築したり、Salesforce 開発についての知識を深めたりすることができます。

予想時間

トピック

ヘルプをお探しですか?

Headless 360 Platform のリソース

Lightning Web コンポーネントを使用して再利用可能な UI コンポーネントを作成する

メモ

Trail Together の動画

はじめに

Lightning Web コンポーネントを作成してリリースする

コンポーネントをアプリケーションホームに追加する

次のステップ

リソース