Skip to main content

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

メモ

メモ

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

翻訳版の 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. 更新したコードを組織にリリースし、新しいリストコンポーネントをテストします。わずかに傾斜をつけると見た目が良くなります。

Ursus Park ホームページのカスタムスタイルを使用した熊リスト

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 ページの他のコンポーネントを操作する方法を見ていきます。

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップ ログイン
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる
今はしない