レコードのリストの使用

メモ

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

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

Bear List (熊リスト) コンポーネントを作成する

パークレンジャーは、熊のディレクトリをホームページから直接参照したいと考えています。あなたはその熊リストの実装を任されました。

1. VS Code で、lwc フォルダーを右クリックして [SFDX: Create Lightning Web Component (SFDX: Lightning Web コンポーネントを作成)] をクリックします。
2. コンポーネントに「bearList」と名前を付けます。
3. 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 アプリケーションビルダーであらゆる種別のページにコンポーネントを配置できます。
4. 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 になります。
5. 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 と呼ばれます。
6. bearList ディレクトリに新しいbearList.css ファイルを作成し、そのファイルに次のコードを貼り付けます。

   .bear-tile {
   	display: block;
   	border: 1px solid #d2955d;
   	border-radius: .25rem;
   	background-color: #fae8d2;
   }
   .bear-silhouette {
   	height: 100px;
   }

   これらの CSS ルールは、熊カードに境界線を追加し、熊のシルエット画像の高さを設定します。
7. 更新したコードを組織にリリースします。default フォルダーを右クリックして [SFDX: Deploy Source to Org (SFDX: 組織にソースをリリース)] をクリックします。

Bear List (熊リスト) コンポーネントをアプリケーションのホームページに追加する

新しいコンポーネントをアプリケーションのホームページに追加しましょう。

1. 組織に戻り、アプリケーションランチャー () で、[Ursus Park] を見つけて選択します。
2. [Setup (設定)] () をクリックして、[Edit Page (編集ページ)] を選択します。
3. [Custom (カスタム)] コンポーネントで bearList コンポーネントを見つけ、ページの左上にドラッグします。
4. [Save (保存)] をクリックしてから、[Back (戻る)] をクリックしてホームページに戻り、作業内容を確認します。

ワイヤード Apex を使用する

熊のリストを取得する新しいアプローチを見てみましょう。命令型 Apex の代わりに、ワイヤード Apex を使用します。

1. bearList.html を編集して、<template if:true={bears}> を <template if:true={bears.data}> に置き換えます。
2. <template for:each={bears} for:item="bear"> を <template for:each={bears.data} for:item="bear"> に置き換えます。
3. <template if:true={error}> を <template if:true={bears.error}> に置き換えます。この時点で、テンプレートは命令型 Apex 以外はほとんど同じです。単なる bears の代わりに bears.data をコールして熊のリストにアクセスし、単なる error の代わりに bears.error をコールしてエラーを取得します。
4. 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 行で取得されます。
5. 更新したコードを組織にリリースし、命令型 Apex 以外は同じように動作をすることを確認します。

Apex コールにパラメーターを渡す

Ursus Park 内で生息する熊の数は増加してきています。レンジャーは、熊リストを絞り込み、熊を素早く検索できるようにする必要があります。その役に立つ検索バーを熊リストに追加しましょう。

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

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