ハンズオン Challenge の準備をする

学習の目的:

この単元を完了すると、次のことができるようになります。

• メタデータとデータを搭載した Playground を準備して、単元 3 に lightning-record-picker を実装できるようにする。
  

メモ

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

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

このハンズオン Challenge では、「LWC スペシャリスト」Superbadge のシナリオを使用します。関係者全員が、あなたがデリバリーしたアプリケーションに感動しています。あなたは lightning-record-picker について知ったとき、それを使えばお客様がボートの在庫を検索する新たな方法を設定できるのではないかと思わずにはいられませんでした。そこで、自分の Playground で概念実証を構築し、次回のミーティングで発表して、完全なアプリケーションに統合するようチームを説得するというプランを立てました。

ではここで新しい Trailhead Playground を作成して、このモジュールの手順を実行してみましょう。ページの最下部までスクロールし、Playground 名をクリックして、[Create Playground (Playground を作成)] を選択します。Trailhead Playground が作成されるまで通常 3 ～ 4 分かかります。

必ず新しい Trailhead Playground を使用してください。既存の組織や Playground を使用すると、Challenge に取り組んでいるときに問題が発生することがあります。

ハンズオン Challenge に使用する組織を起動して、次の手順を実行します。

1. Superbadge で使用したものと同じロック解除済みパッケージ (04t6g000008ateoAAA) をインストールします。このパッケージには、概念実証の構築に必要なスキーマが付属します。このロック解除済みパッケージをうまくインストールできない場合は、「Trailhead Playground の管理」の手順を実行します。
   
2. Lightning Web コンポーネントを作成します。
   
   1. Name (名前): boatPicker
   2. boatPicker.js の内容を以下のコードに置き換えます。このコードは、ワイヤーサービスを使用すると boatDetail プロパティに値が入力され、選択したボートの情報を簡単に表示できる getter が設定されています。ハンズオン Challenge でこのファイルを変更します。

      import { LightningElement, wire } from 'lwc'; import { getRecord, getFieldValue } from 'lightning/uiRecordApi'; import BOAT_PICTURE_FIELD from "@salesforce/schema/Boat__c.Picture__c"; import BOAT_NAME_FIELD from "@salesforce/schema/Boat__c.Name"; import BOAT_OWNER_FIELD from "@salesforce/schema/Boat__c.Contact__r.Name"; import BOAT_PRICE_FIELD from "@salesforce/schema/Boat__c.Price__c"; import BOAT_TYPE_FIELD from "@salesforce/schema/Boat__c.BoatType__r.Name"; const BOAT_FIELDS = [BOAT_PICTURE_FIELD, BOAT_NAME_FIELD,BOAT_OWNER_FIELD, BOAT_PRICE_FIELD, BOAT_TYPE_FIELD]; export default class Boats extends LightningElement { boatId; get showBoat() { return this.boatId != null; } @wire(getRecord, { recordId: '$boatId', fields: BOAT_FIELDS }) boatDetail; // BEGIN GETTERS FOR BOAT FIELDS get boatPicture() { return getFieldValue(this.boatDetail.data, BOAT_PICTURE_FIELD); } get boatName() { return getFieldValue(this.boatDetail.data, BOAT_NAME_FIELD); } get boatOwner() { return getFieldValue(this.boatDetail.data, BOAT_OWNER_FIELD); } get boatPrice() { return getFieldValue(this.boatDetail.data, BOAT_PRICE_FIELD); } get boatType() { return getFieldValue(this.boatDetail.data, BOAT_TYPE_FIELD); } // END GETTERS FOR BOAT FIELDS get backgroundStyle() { if (!this.showBoat) { return ''; } else { return `background-image:url('${this.boatPicture}')`; } } }

   3. boatPicker.html の内容を次のコードに置き換えます。このコードに lightning-record-picker が含まれています。このピッカーは設定が完了していないため、ハンズオン Challenge でこのファイルを変更します。

      <template> <lightning-card title="Boat Browser"> <div class="slds-var-p-horizontal_medium"> <div class="slds-var-m-bottom_medium"> <lightning-record-picker label="Browse our inventory" placeholder="Search by boat name or type" > </lightning-record-picker> </div> <div lwc:if={showBoat}> <div class="tile slds-var-m-vertical_medium" > <div style={backgroundStyle} class="tile"></div> </div> <div class="slds-text-heading_medium slds-border_bottom slds-var-m-bottom_medium">{boatName}</div> <div>Captain: {boatOwner}</div> <p>Price: <lightning-formatted-number maximum-fraction-digits="0" value={boatPrice} format-style="currency" currency-code="USD"></lightning-formatted-number></p> <div>Type: {boatType}</div> </div> </div> </lightning-card> </template>

   4. boatPicker.css ファイルを作成して、コンポーネントにスタイルを設定します。

      .tile { width: 100%; height: 220px; padding: 1px !important; background-position: center; background-size: cover; border-radius: 5px; }