レコードのリストの使用

メモ

日本語で受講されている方へ
このバッジの Trailhead ハンズオン Challenge は英語で受講していただく必要があります。英語の意味についてはかっこ内の翻訳をご参照ください。必ず英語の値をコピーして貼り付けてから、Trailhead Playground の言語を [English] に、ロケールを [United States] に切り替えてください。こちらの指示に従ってください。

翻訳版の 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 (戻る)] をクリックしてホームページに戻り、作業内容を確認します。

Ursus Park ホームページの熊リスト

ワイヤード 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> 終了タグの後に追加します。
```

<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 式を公開して、検索で熊が返されたかどうかを確認します。
更新したコードを組織にリリースし、検索が結果の有無に関わらず機能することを確認します。

Ursus Park ホームページの絞り込まれた熊リスト

このステップはこれで完了です。命令型 Apex、次にワイヤード Apex を使用してレコードリストを処理する方法を確認し、Apex コールにパラメーターを渡す方法を学びました。その過程で大幅に増えてしまったコンポーネントのコードを、管理しやすいようにサブコンポーネントに分割しましょう。