進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

Lightning Web コンポーネントへのスタイルとデータの追加

学習の目的

この単元を完了すると、次のことができるようになります。
  • コンポーネントに CSS と Lightning Design System を使用する。
  • Salesforce 組織からデータを取得する。
  • アプリケーションを組織にリリースしてテストする。

コンポーネントの適応

Lightning Web コンポーネントの概要も残りわずかですが、ここでは、コンポーネントの外観を制御する方法と、ライブデータを取得する方法を試してみましょう。コンポーネントのデザインを Lightning 環境に適応させ、組織のライブデータを取得することができます。この単元では、いくつかのテキストの外観を色鮮やかにし、組織のレコードから動的に取引先名を描画します。

CSS とコンポーネントのスタイル設定

Lightning Web コンポーネントの CSS の実装は、W3C 標準に準拠しています。スタイルシートを CSS ファイル内に作成でき、それが自動的に対応する HTML ファイルに適用されます。

Lightning Web コンポーネントモデルは、コンポーネントのスタイルと要素の完全なカプセル化を提供して、HTML、JS、CSS をグローバル DOM と分離します。これを Shadow DOM というメカニズムで実行します。Shadow DOM は、DOM の「サブツリー」にコンポーネントの要素を保持できるようにする一般的な実装です (詳細は「リソース」セクションの Shadow DOM に関するリンク先を参照してください)。コンポーネントは、その外観と動作を他のアプリケーション内か、別のコンポーネントの子として保持できます。コンポーネントがスタイルと動作をページまたは親から継承するように設計することもできます。

例として、自転車の価格を緑色の太字で表示するように設定してみましょう。次の .price エントリを detail.css ファイルに追加します。

ebody{
  margin: 0;
} 
.price {
  color: green;
  font-weight: bold;
}

ファイルをリリースします。CLI は、前のコマンドを記憶しているため、上矢印キーを使用してその deploy コマンドを再表示できます。

ヒント

ヒント

新しいファイルを保持するフォルダを指定でき、プロジェクト全体のリリースまで待たずにすみます。次に例を示します。

sfdx force:source:deploy -p force-app/main/default/lwc -u <username>

ページがキャッシュされている場合、組織でその変更を表示するのにページの更新が必要になることがあります。その後、自転車を選択すると、価格が緑色の太字になります。

価格のスタイルによってテキストが緑色の太字になります。

Lightning Design System のスタイルの適用

Salesforce Lightning Design System (SLDS) は、Lightning Experience と一貫性があるデザインを提供する CSS フレームワークです。Lightning Experience または Salesforce モバイルアプリケーション内にある Lightning Web コンポーネントは、import ステートメントや静的リソースなしで SLDS を使用できます。

たとえば、SLDS の見出しスタイルを使用して detail コンポーネントのテキストを Lightning の標準のテキストのような外観にすることができます。detail.html ファイルを更新して、slds-text-heading_small および slds-text-heading_medium フォント設定を次のように使用します。

<template>
    <template if:true={product}>
    <div class="container">
        <div class="slds-text-heading_small">{product.fields.Name.value}</div>
        <div class="price">{product.fields.MSRP__c.displayValue}</div>
        <div class="description">{product.fields.Description__c.value}</div>
        <img class="product-img" src={product.fields.Picture_URL__c.value}></img>
        <p>
            <lightning-badge label={product.fields.Material__c.value}></lightning-badge>
            <lightning-badge label={product.fields.Level__c.value}></lightning-badge>
        </p>
        <p>
            <lightning-badge label={product.fields.Category__c.value}></lightning-badge>
        </p>
    </div>
    </template>
    <template if:false={product}>
    <div class="slds-text-heading_medium">Select a bike</div>
    </template>
</template>

ファイルをリリースします。

組織でコンポーネントを試し、違いを確認してください (ページの更新が必要になります)。

SLDS 見出しフォント処理が適用されました。

良いですね! これで、このデザインを使用できるようになりました。ただし、これまでは data コンポーネントから取得した静的データを使用してきました。もう 1 つ画期的なものをページに追加しましょう。動的データです。

Salesforce データの取得

結局のところ、これは Salesforce アプリケーションであり、本当にやりたいことは Salesforce 組織から動的データを取得できるようにすることです。Lightning Web コンポーネントは、Lightning データサービス上に構築されているリアクティブな wire サービスを使用します。取引先名を動的に取得する例を手順に従って確認しましょう。

wire サービスでデータをアプリケーションに取得

wire サービスはプラットフォームの一部で、データのストリームを配信します。@wire デコレータ (前に簡単に言及) が、アプリケーション用の wire サービスを実装します。wire サービスを使用するには、次の手順を実行します。

  1. JavaScript ファイルで wire アダプタをインポートします。
  2. @wire デコレータでプロパティまたは関数をデコレートします。

構文は次のとおりです。

import { adapterId } from 'adapter-module';
@wire(adapterId, adapterConfig)
propertyOrFunction;
  • adapterId (ID) — wire アダプタの ID。
  • adapter-module (文字列) — wire アダプタ関数が含まれるモジュールの ID。
  • adapterConfig (オブジェクト) — wire アダプタ固有の設定オブジェクト。
  • propertyOrFunction — wire サービスからデータのストリームを受信する非公開のプロパティまたは関数。プロパティが @wire でデコレートされている場合、結果はそのプロパティの data プロパティまたは error プロパティに返されます。関数が @wire でデコレートされている場合、結果は data プロパティと error プロパティを持つオブジェクトで返されます。
それをこれまで作業してきたプロジェクトの selector.js ファイルに次のように追加して、組織から現在のユーザの名前を取得します。
import { LightningElement, track, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import Id from '@salesforce/user/Id';
import NAME_FIELD from '@salesforce/schema/User.Name';

const fields = [NAME_FIELD];


export default class Selector extends LightningElement {
    @track selectedProductId;

    handleProductSelected(evt) {
        this.selectedProductId = evt.detail;
    }

    userId = Id;

    @wire(getRecord, { recordId: '$userId', fields })
    user;

    get name() {
        return getFieldValue(this.user.data, NAME_FIELD);
    }
}
selector.html ファイルを編集し、name を追加して試すこともできます。次に例を示します。
<template>
    <div class="wrapper">
    <header class="header">Available Bikes for {name}</header>
    <section class="content">
        <div class="columns">
        <main class="main" >
            <c-list onproductselected={handleProductSelected}></c-list>
        </main>
        <aside class="sidebar-second">
            <c-detail product-id={selectedProductId}></c-detail>
        </aside>
        </div>
    </section>
    </div>
</template>

selector コンポーネントファイルを組織にリリースすると (リリースに selector ファイルが含まれていることを確認してください)、次のようになります (Mary Jones が自分の名前に変わります)。ページの更新が必要になることがあります。

UI に動的に読み込まれたユーザ名。

結論

これは始まりにすぎません。Lightning Web コンポーネントモデルでは多くのことができます。このモデルには、テスト、セキュリティ、Apex インテグレーションなどのサポートが含まれています。常に探索し、新しいことを試し、開発を続けてください。W3C Web コンポーネント標準が進化すると、このモデルも進化します。

Lightning Web コンポーネントの未来へと続く道。