レコードのリストの使用

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_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}/img/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 {
    		border: 1px solid #d2955d;
    		border-radius: .25rem;
    		display: block;
    }
    .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 (戻る)] をクリックしてホームページに戻り、作業内容を確認します。

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

ワイヤード 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}/img/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}/img/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. 更新したコードを組織にリリースし、検索が結果の有無に関わらず機能することを確認します。

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

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