子コンポーネントの作成と操作

メモ

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

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

前のステップで、コードベースが拡大しました。熊リストコンポーネントをいくつかの小さなコンポーネントにリファクタリングしましょう。熊タイルのコードを新しいコンポーネントに移動します。

Bear Tile (熊タイル) コンポーネントを作成する

1. VS Code で、lwc フォルダーを右クリックして [SFDX: Create Lightning Web Component (SFDX: Lightning Web コンポーネントを作成)] をクリックします。
2. コンポーネントに「bearTile」と名前を付けます。
3. bearList.html を開き、<!-- Start bear tile --> と <!-- End bear tile --> の間にあるコードをすべて切り取ります。
4. bearTile.html の template タグ内にコードを貼り付けます。完了したら、bearTile.html は次のようになります。

   <template>
   	<lightning-card title={bear.Name} class="bear-tile">
   		<div class="slds-var-p-horizontal_small">
   			<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>
   </template>

5. bearTile.js の内容を次に置き換えます。

   import { LightningElement, api } from 'lwc';
   import ursusResources from '@salesforce/resourceUrl/ursus_park';
   export default class BearTile extends LightningElement {
   	@api bear;
   	appResources = {
   		bearSilhouette: `${ursusResources}/standing-bear-silhouette.png`,
   	};
   }

   @api でデコレートされた bear プロパティを追加しました。これで、bear プロパティが任意の親コンポーネントに公開されます。
6. bearList.css を削除します。
7. bearTile ディレクトリに新しいbearTile.css ファイルを作成し、そのファイルに次のコードを貼り付けます。

   :host {
   	--sds-c-card-color-background: linear-gradient(180deg, rgba(255,255,255,1) 80%, #fae8d2 100%);
   }
   
   .bear-tile {
   	display: block;
   	border: 1px solid #d2955d;
   	border-radius: .25rem;
   	background-color: #fae8d2;
   }
   
   .bear-silhouette {
   	height: 100px;
   }

8. bearList.html を開き、<!-- Start bear tile --> コメントと <!-- End bear tile --> コメントの間のコンテンツを <c-bear-tile bear={bear}></c-bear-tile> に置き換えます。完了したら、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.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>
   				<lightning-layout multiple-rows="true" pull-to-boundary="small">
   					<template for:each={bears.data} for:item="bear">
   						<lightning-layout-item key={bear.Id} size="3" class="slds-var-p-around_x-small">
   							<c-bear-tile bear={bear}></c-bear-tile>
   						</lightning-layout-item>
   					</template>
   				</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>
   			</template>
   			<!-- End bear list -->
   			<!-- Data failed to load -->
   			<template if:true={bears.error}>
   				<div class="slds-text-color_error">
   					An error occurred while loading the bear list
   				</div>
   			</template>
   		</div>
   	</lightning-card>
   </template>

   これは、前のステップで定義した bear 属性を持つ熊タイルコンポーネントを参照します。コンポーネントフォルダーやファイルには bearTile という名前が付いていますが、追加したタグは c-bear-tile です。先頭の c はデフォルトの名前空間を表し、それにコンポーネント名が小文字で追加され、大文字だった部分がダッシュで区切られています。
9. 更新したコードを組織にリリースし、新しいリストコンポーネントをテストします。わずかに傾斜をつけると見た目が良くなります。

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

レンジャーは、ホームページから移動せずに、熊レコードをすばやく参照して編集できる機能を求めています。熊タイルをクリック可能にし、編集可能な熊レコードフォームを開きましょう。

1. bearTile.html を編集して、<lightning-card title={bear.Name} class="bear-tile"> タグの後に次のコードを追加します。

   <div slot="actions">
   	<lightning-button-icon
   		icon-name="utility:search"
   		icon-class="bear-tile-button"
   		variant="bare"
   		alternative-text="Open record"
   		onclick={handleOpenRecordClick}>
   	</lightning-button-icon>
   </div>

   handleOpenRecordClick 関数を起動する編集ボタンを追加しました。このボタンは、actions スロットを使用して Lightning カードに配置されます。スロットは、親コンポーネントがコンポーネントの body に渡すマークアップのプレースホルダーです。
2. bearTile.js を編集して、最後の終了ブラケットの前に次の関数を追加します。

   handleOpenRecordClick() {
   	const selectEvent = new CustomEvent('bearview', {
   		detail: this.bear.Id
   	});
   	this.dispatchEvent(selectEvent);
   }

   コードのポイント:
   • ユーザーが熊タイルのレコードを開くボタンをクリックすると、handleOpenRecordClick 関数がコールされます。
   • この関数は、熊レコード ID を保持する bearview カスタムイベントを作成して起動します。
3. bearList.html を編集して、onbearview={handleBearView} 属性を c-bear-tile タグに追加します。これで、タイルコンポーネントによって起動される bearview イベントを取得できます。このイベントは、handleBearView 関数で処理されます。
   

   <c-bear-tile bear={bear} onbearview={handleBearView}></c-bear-tile>

4. bearList.js の内容を次に置き換えます。

   import { NavigationMixin } from 'lightning/navigation';
   import { LightningElement, wire } from 'lwc';
   /** BearController.searchBears(searchTerm) Apex method */
   import searchBears from '@salesforce/apex/BearController.searchBears';
   export default class BearList extends NavigationMixin(LightningElement) {
   	searchTerm = '';
   	@wire(searchBears, {searchTerm: '$searchTerm'})
   	bears;
   	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);
   	}
   	handleBearView(event) {
   		// Get bear record id from bearview event
   		const bearId = event.detail;
   		// Navigate to bear record page
   		this[NavigationMixin.Navigate]({
   			type: 'standard__recordPage',
   			attributes: {
   				recordId: bearId,
   				objectApiName: 'Bear__c',
   				actionName: 'view',
   			},
   		});
   	}
   }

   コードのポイント:
   • ナビゲーションを処理するユーティリティ関数をバンドルするナビゲーション mixin をインポートします。mixin によって、拡張せずにクラスに機能を追加できます。これは、クラスがすでに親クラスを拡張している場合に便利です (クラスは 1 つの親しか拡張できません)。
   • クラスは LightningElement 基本クラスに適用されたナビゲーション Mixin を拡張します。
   • bearview イベントは handleBearView 関数で処理します。イベントの詳細から熊レコード ID を抽出し、ナビゲーション mixin を使用して熊レコードページに移動します。
5. 更新したコードを組織にリリースし、タイルにあるボタンアイコンを使って熊レコードに移動できることを確認します。

このステップはこれで完了です。コンポーネントを熊リストと熊タイルという 2 つの小さなコンポーネントにリファクタリングしました。@api デコレーターを使用して親リストコンポーネントから子タイルコンポーネントに通信する方法を確認しました。また、カスタムイベントを使用して子から親に通信する方法も確認しました。

次のステップでは、Lightning ページの他のコンポーネントを操作する方法を見ていきます。