条件付きディレクティブと ref を使ってみる
学習の目的
この単元を完了すると、次のことができるようになります。
- 改良された条件付きディレクティブを使用する。
- ref を使用して DOM 要素を照会する。
メモ
日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。
翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。
ハンズオン Challenge の準備をする
このハンズオン Challenge では、コードを簡素化して、既存の Lightning Web コンポーネントを刷新します。最新のベストプラクティスに従って条件付きディレクティブを更新し、セレクターを使わずに DOM 要素を見つけます。
ではここで新しい Trailhead Playground を作成し、このモジュールの手順を実行してみましょう。ページの最下部までスクロールし、Playground 名をクリックして、[Playground を作成] を選択します。Trailhead Playground が作成されるまで通常 3 ～ 4 分かかります。
必ず新しい Trailhead Playground を使用してください。既存の組織または Playground を使用すると、Challenge を行うときに問題が発生することがあります。
ハンズオン Challenge に使用する組織を起動して、次の手順を実行します。
- Lightning Web コンポーネントを作成します。
- 名前:
child -
child.jsのコンテンツを次のコードに置換します。このコードは、Summer '22 で導入された LightningAlert 基本コンポーネントを使用したアラートを表示します。
- 名前:
import { LightningElement, api } from "lwc";
import LightningAlert from "lightning/alert";
export default class Child extends LightningElement {
@api
async sayHi() {
await LightningAlert.open({
message: "Hello Trailblazer!",
theme: "success",
label: "Greetings"
});
console.log("Alert modal has been closed");
}
}
2.Lightning Web コンポーネントを作成します。
- 名前:
parent -
parent.jsのコンテンツを次のコードに置換します。このコードは、Lightning データサービスを使用して取引先オブジェクトを照会します。
import { LightningElement, api, wire } from "lwc";
import { getRecord, getFieldValue } from "lightning/uiRecordApi";
import FIELD_NAME from "@salesforce/schema/Account.Name";
import FIELD_OWNER_NAME from "@salesforce/schema/Account.Owner.Name";
import FIELD_PHONE from "@salesforce/schema/Account.Phone";
import FIELD_INDUSTRY from "@salesforce/schema/Account.Industry";
export default class Parent extends LightningElement {
@api recordId;
@wire(getRecord, { recordId: "$recordId", fields: [FIELD_NAME, FIELD_INDUSTRY], optionalFields: [FIELD_PHONE, FIELD_OWNER_NAME] })
account;
get name() {
return getFieldValue(this.account.data, FIELD_NAME);
}
get phone() {
return getFieldValue(this.account.data, FIELD_PHONE);
}
get industry() {
return getFieldValue(this.account.data, FIELD_INDUSTRY);
}
get owner() {
return getFieldValue(this.account.data, FIELD_OWNER_NAME);
}
sayHi() {
let cmp = this.template.querySelector("c-child");
cmp.sayHi();
}
}
c. parent.js-meta.xml のコンテンツを次のコードに置換します。このコードにより、取引先のレコード詳細ページでこのコンポーネントを使用可能になります。
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>58.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<objects>
<object>Account</object>
</objects>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
d. parent.html のコンテンツを次のコードに置換します。このコードは、条件に応じて取引先情報かエラーのいずれかを表示します。
<template>
<lightning-card title="Summer '23 Maintenance">
<lightning-button slot="actions" label="Say Hi" onclick={sayHi}></lightning-button>
<template if:true={account.data}>
<div class="slds-m-around_medium">
<p>Account Name: {name}</p>
<p>Industry: {industry}</p>
<p>Phone: {phone}</p>
<p>Owner: {owner}</p>
</div>
</template>
<template if:false={account.data}>
<div class="slds-m-around_medium slds-text-color_destructive">An error occurred while retrieving data</div>
</template>
<c-child></c-child>
</lightning-card>
</template>
3.child と parent の Lightning web コンポーネントをリリースします。
4.レコード詳細ページの右側にある [取引先] 列に parent コンポーネントを追加します。カスタムページを保存し、デスクトップフォーム要素の組織のデフォルトとして有効にします。
5.取引先を開き、次のように表示されることを確認します。
