レコードのリストの使用
メモ
日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。
翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。
Bear List (熊リスト) コンポーネントを作成する
パークレンジャーは、熊のディレクトリをホームページから直接参照したいと考えています。あなたはその熊リストの実装を任されました。
- VS Code で、
lwcフォルダーを右クリックして [SFDX: Create Lightning Web Component (SFDX: Lightning Web コンポーネントを作成)] をクリックします。 - コンポーネントに「
bearList」と名前を付けます。 -
bearList.js-meta.xmlファイルを編集して<isExposed>false</isExposed>を次の行に置き換えます。<isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets>
これで、Lightning アプリケーションビルダーであらゆる種別のページにコンポーネントを配置できます。 -
bearList.htmlの内容を次に置き換えます。<template> <lightning-card title="Bears" icon-name="utility:animal_and_nature"> <div class="slds-card__body slds-card__body_inner"> <!-- Start bear list --> <template if:true={bears}> <lightning-layout multiple-rows="true" pull-to-boundary="small"> <template for:each={bears} for:item="bear"> <lightning-layout-item key={bear.Id} size="3" class="slds-var-p-around_x-small"> <!-- Start bear tile --> <lightning-card title={bear.Name} class="bear-tile"> <div class="slds-var-p-horizontal_small bear-tile-body"> <div class="slds-media"> <div class="slds-media__figure"> <img src={appResources.bearSilhouette} alt="Bear profile" class="bear-silhouette"/> </div> <div class="slds-media__body"> <p class="slds-var-m-bottom_xx-small">{bear.Sex__c}</p> <p class="slds-var-m-bottom_xx-small">{bear.Age__c} years old</p> <p class="slds-var-m-bottom_xx-small">{bear.Height__c} cm</p> <p class="slds-var-m-bottom_xx-small">{bear.Weight__c} Kg</p> </div> </div> </div> </lightning-card> <!-- End bear tile --> </lightning-layout-item> </template> </lightning-layout> </template> <!-- End bear list --> <!-- Data failed to load --> <template if:true={error}> <div class="slds-text-color_error"> An error occurred while loading the bear list </div> </template> </div> </lightning-card> </template>コードのポイント:-
bearsレコードを反復処理するために、for:eachおよびfor:itemディレクティブを指定するtemplateタグが使用されています。各反復項目は、bearプロパティに渡されます。 - テンプレートの各反復は、特別な
key属性でマークされています。keyは反復のコンテキストで一意の値を持つ必要があります。このコンポーネントの場合は熊 ID になります。
-
-
bearList.jsの内容を次に置き換えます。import { LightningElement } from 'lwc'; import ursusResources from '@salesforce/resourceUrl/ursus_park'; /** BearController.getAllBears() Apex method */ import getAllBears from '@salesforce/apex/BearController.getAllBears'; export default class BearList extends LightningElement { bears; error; appResources = { bearSilhouette: `${ursusResources}/standing-bear-silhouette.png`, }; connectedCallback() { this.loadBears(); } loadBears() { getAllBears() .then(result => { this.bears = result; }) .catch(error => { this.error = error; }); } }コードのポイント:-
ursusResourcesアダプターをインポートします。これでアプリケーションに関連付けられた静的リソースにアクセスできます。このアダプターを使用して、テンプレートに熊のシルエット画像の URL を公開するappResourcesオブジェクトを作成します。 -
getAllBearsアダプターをインポートします。これでBearController.getAllBears()Apex メソッドを操作できます。BearControllerクラスは、このプロジェクトの始めにリリースしたコードにバンドルされています。getAllBearsメソッドは、すべての熊レコードを取得するクエリの結果を返します。 -
connectedCallback関数を実装します。これでコンポーネントが読み込まれた後にコードを実行できます。この関数を使用してloadBears関数をコールします。 -
loadBears関数はgetAllBearsアダプターをコールします。アダプターは Apex コードをコールし、JS promise を返します。この promise を使用して、返されたデータをbearsプロパティに保存するか、エラーを報告します。このアプローチによるデータの取得は、命令型 Apex と呼ばれます。
-
-
bearListディレクトリに新しいbearList.cssファイルを作成し、そのファイルに次のコードを貼り付けます。.bear-tile { display: block; border: 1px solid #d2955d; border-radius: .25rem; background-color: #fae8d2; } .bear-silhouette { height: 100px; }これらの CSS ルールは、熊カードに境界線を追加し、熊のシルエット画像の高さを設定します。 - 更新したコードを組織にリリースします。default フォルダーを右クリックして [SFDX: Deploy Source to Org (SFDX: 組織にソースをリリース)] をクリックします。
Bear List (熊リスト) コンポーネントをアプリケーションのホームページに追加する
新しいコンポーネントをアプリケーションのホームページに追加しましょう。
- 組織に戻り、アプリケーションランチャー (
) で、[Ursus Park] を見つけて選択します。 - [Setup (設定)] (
) をクリックして、[Edit Page (編集ページ)] を選択します。 - [Custom (カスタム)] コンポーネントで bearList コンポーネントを見つけ、ページの左上にドラッグします。
- [Save (保存)] をクリックしてから、[Back (戻る)] をクリックしてホームページに戻り、作業内容を確認します。
ワイヤード Apex を使用する
熊のリストを取得する新しいアプローチを見てみましょう。命令型 Apex の代わりに、ワイヤード Apex を使用します。
-
bearList.htmlを編集して、<template if:true={bears}>を<template if:true={bears.data}>に置き換えます。 -
<template for:each={bears} for:item="bear">を<template for:each={bears.data} for:item="bear">に置き換えます。 -
<template if:true={error}>を<template if:true={bears.error}>に置き換えます。この時点で、テンプレートは命令型 Apex 以外はほとんど同じです。単なるbearsの代わりにbears.dataをコールして熊のリストにアクセスし、単なるerrorの代わりにbears.errorをコールしてエラーを取得します。 -
bearList.jsの内容を次に置き換えます。import { LightningElement, wire } from 'lwc'; import ursusResources from '@salesforce/resourceUrl/ursus_park'; /** BearController.getAllBears() Apex method */ import getAllBears from '@salesforce/apex/BearController.getAllBears'; export default class BearList extends LightningElement { @wire(getAllBears) bears; appResources = { bearSilhouette: `${ursusResources}/standing-bear-silhouette.png`, }; }ワイヤード Apex でbearsプロパティをデコレートして、JS コードを大幅に簡略化しました。必要なデータはすべて、@wire(getAllBears) bears;の 1 行で取得されます。 - 更新したコードを組織にリリースし、命令型 Apex 以外は同じように動作をすることを確認します。
Apex コールにパラメーターを渡す
Ursus Park 内で生息する熊の数は増加してきています。レンジャーは、熊リストを絞り込み、熊を素早く検索できるようにする必要があります。その役に立つ検索バーを熊リストに追加しましょう。
-
bearList.htmlを編集して、<template if:true={bears.data}>タグの後に次のコードを追加します。<lightning-input type="search" onchange={handleSearchTermChange} variant="label-hidden" class="slds-var-m-bottom_small" label="Search" placeholder="Search for bears" value={searchTerm}> </lightning-input>これで検索入力項目が追加されます。値が変更されると、handleSearchTermChange関数をコールします。 - 次のコードを
</lightning-layout>終了タグの後に追加します。<!-- No bears found --> <template if:false={hasResults}> <div class="slds-align_absolute-center slds-var-m-vertical_small"> This is beary disturbing, we did not find results... </div> </template>これで、結果が見つからなかったことを示すメッセージが追加されます。このメッセージは、hasResults式が false の場合にのみ表示されます。 -
bearList.jsの内容を次に置き換えます。import { LightningElement, wire } from 'lwc'; import ursusResources from '@salesforce/resourceUrl/ursus_park'; /** BearController.searchBears(searchTerm) Apex method */ import searchBears from '@salesforce/apex/BearController.searchBears'; export default class BearList extends LightningElement { searchTerm = ''; @wire(searchBears, {searchTerm: '$searchTerm'}) bears; appResources = { bearSilhouette: `${ursusResources}/standing-bear-silhouette.png`, }; handleSearchTermChange(event) { // Debouncing this method: do not update the reactive property as // long as this function is being called within a delay of 300 ms. // This is to avoid a very large number of Apex method calls. window.clearTimeout(this.delayTimeout); const searchTerm = event.target.value; // eslint-disable-next-line @lwc/lwc/no-async-operation this.delayTimeout = setTimeout(() => { this.searchTerm = searchTerm; }, 300); } get hasResults() { return (this.bears.data.length > 0); } }コードのポイント:- リアクティブな
searchTermプロパティを追加し、それをワイヤード Apex のパラメーターとしてsearchBearsに渡します。 - 検索入力項目の値の変化に反応するために
handleSearchTermChange関数が使用されています。リアクティブなsearchTermプロパティを更新するときに、意図的に 300 ミリ秒の遅延を発生させます。更新が保留中の場合は、キャンセルして 300 ミリ秒後に新しい更新を再スケジュールします。ユーザーが単語を形成する文字を入力するときに、この遅延によって Apex コールの数が削減されます。1 文字ごとにhandleSearchTermChangeへのコールがトリガーされますが、理想的なのは、ユーザーが入力し終わったときにsearchBearsが 1 度だけコールされることです。この手法を「デバウンス」といいます。 -
hasResults式を公開して、検索で熊が返されたかどうかを確認します。
- リアクティブな
- 更新したコードを組織にリリースし、検索が結果の有無に関わらず機能することを確認します。
このステップはこれで完了です。命令型 Apex、次にワイヤード Apex を使用してレコードリストを処理する方法を確認し、Apex コールにパラメーターを渡す方法を学びました。その過程で大幅に増えてしまったコンポーネントのコードを、管理しやすいようにサブコンポーネントに分割しましょう。