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

Lightning Web コンポーネントの作成

学習の目的

この単元を完了すると、次のことができるようになります。
  • 各コンポーネントファイルの内容を説明する。
  • Lightning Web コンポーネントの JavaScript メソッドを作成する。
  • コンポーネント JavaScript でライフサイクルフックを使用する。

Playground で試す

Salesforce の特定のオブジェクトとは関係なく、データ表示要素を作成するとします。ぴったりの例が、ebikes サンプルリポジトリにある productCard component です。そのカードコンポーネントを調べ、独自のバージョンをゼロから作成して、どうすればそれが本格的な Lightning Web コンポーネントに進化するのかを確認しましょう。Lightning Web Components Playground でコンポーネントの各部を構築し、他のサンプルを見て回ることで、すぐに基本を習得できます。

コンポーネントに必要なのは、同じ名前を持つフォルダとファイルのみです。それらは名前と場所で自動的にリンクされます。

フォルダ内のコンポーネントファイル

すべての Lightning Web コンポーネントには名前空間があり、フォルダ名とはハイフンで区切られます。たとえば、デフォルト名前空間 c 内にあるフォルダ名 app の Lightning Web コンポーネントのマークアップは <c-app> です。これは、Lightning Web Components Playground の main.js 内で確認できます。

ただし、Salesforce Platform では、コンポーネントのフォルダ名やファイル名にハイフンの使用は許可されません。では、コンポーネント名が「mycomponent」のように複数の単語でできている場合はどうすればよいでしょうか? フォルダとファイルに my-component という名前を付けることはできませんが、便利な解決策があります。

キャメルケースを使用してコンポーネント名を myComponent にします。キャメルケースのコンポーネントフォルダ名をマークアップのケバブケース (ハイフンで結合された単語) に対応付けます。マークアップでフォルダ名 myComponent のコンポーネントを参照するには、<c-my-component> を使用します。

たとえば、LWC サンプルリポジトリには、viewSource コンポーネントのファイルが含まれる viewSource フォルダがあります。hello コンポーネント が HTML で viewSource コンポーネントを参照するときは、c-view-source を使用します。

HTML ファイルの中身

Lightning Web コンポーネントの HTML ファイルのすべてに、template タグが含まれます。template タグには、コンポーネントの構造を定義する HTML が含まれます。ebikes リポジトリにある productCard コンポーネントの簡易バージョンの HTML を見てみましょう

以下の例を Lightning Web Components Playground に貼り付けていきます。次のコードを app.html に貼り付けます (ファイル内の既存の HTML を置き換えます)。

<template>
    <div>
        <div>Name: {name}</div>
        <div>Description: {description}</div>
        <div>Category: {category}</div>
        <div>Material: {material}</div>
        <div>Price: {price}</div>
        <div><img src={pictureUrl}/></div>
    </div>
</template>

中括弧 {} で囲まれた識別子は、対応する JavaScript クラス内の同じ名前のプロパティにバインドされます。

以下は、この HTML をサポートするための JavaScript ファイルです。これを app.js に貼り付けます。
import { LightningElement } from 'lwc';

export default class App extends LightningElement {
   name = 'Electra X4';
   description = 'A sweet bike built for comfort.';
   category = 'Mountain';
   material = 'Steel';
   price = '$2,700';
   pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
}

[Run (実行)] をクリックして、自転車と詳細を表示します。

たとえば、データを表示するのに、読み込みに少し時間がかかることがわかっているとします。何かあったのかとユーザを心配させたくありません。テンプレート内で if:false および if:true 条件付きディレクティブを使用して、どの視覚要素が表示されているかを判別できます。

"display" div タグ内のコンテンツは、HTML ファイルの ready の値が true になるまで表示されません。

<template>
    <div id="waiting" if:false={ready}>Loading…</div>
    <div id="display" if:true={ready}>
        <div>Name: {name}</div>
        <div>Description: {description}</div>
        <div>Category: {category}</div>
        <div>Material: {material}</div>
        <div>Price: {price}</div>
        <div><img src={pictureUrl}/></div>
    </div>
</template>

以下の JavaScript を使用して、Playground でテストします。ここではデータ値が保持され、3 秒のタイマーが設定されます。3 秒後に、コンテンツは表示されるはずです(もちろん、これはテストのみが目的です)。

import { LightningElement, track } from 'lwc';
export default class App extends LightningElement {
   name = 'Electra X4';
   description = 'A sweet bike built for comfort.';
   category = 'Mountain';
   material = 'Steel';
   price = '$2,700';
   pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
 
   @track
   ready = false;

   connectedCallback() {
       setTimeout(() => {
           this.ready = true;
       }, 3000);
   }
}

[Run (実行)] をクリックして、条件付きディレクティブの動作を確認します。

標準 Lightning Web コンポーネント

すべてのコンポーネントをゼロから作成したくはないでしょう。そこで、基本 Lightning Web コンポーネントを使用することを検討します。当然、データ型、表示コントローラ、ナビゲーション項目など、多くのコンポーネントがあります。そのすべては、コンポーネントライブラリにリストされています。

自転車の詳細が目立つようにしましょう。そのためには、最後の例の materialcategory の div タグを lightning-badge コンポーネントに置き換えます。HTML は次のようになります。

<template>
    <div id="waiting" if:false={ready}>Loading…</div>
    <div id="display" if:true={ready}>
        <div>Name: {name}</div>
        <div>Description: {description}</div>
        <lightning-badge label={material}></lightning-badge>
        <lightning-badge label={category}></lightning-badge>
        <div>Price: {price}</div>
        <div><img src={pictureUrl}/></div>
    </div>
</template>

SteelMountain という語が lightning バッジとして表示されます。非常にシンプルです。

Lightning バッジを使用

次は、JavaScript を見てみましょう。

JavaScript の処理

ここで実際の処理が行われます。これまで見てきたように、JavaScript メソッドは、入力、データ、イベント、状態への変更などの処理を定義して、コンポーネントを動作させます。Lightning Web コンポーネントでは、一般的な JavaScript ECMAScript 8 のメソッドと構文を使用します。

Lightning Web コンポーネントの JavaScript ファイルには、少なくとも次のコードを含める必要があります。MyComponent は、コンポーネントクラスに割り当てる名前になります。

import { LightningElement } from 'lwc';
export default class MyComponent extends LightningElement {

}

export ステートメントで、LightningElement クラスを拡張するクラスを定義します。ベストプラクティスとして、クラスの名前は通常、JavaScript クラスのファイル名と同じにしますが、必須ではありません。

LWC モジュール

Lightning Web コンポーネントモデルでは、モジュール (ECMAScript 6 で組み込みモジュールが導入されました) を使用して、コア機能をバンドルし、コンポーネントファイルの JavaScript がアクセスできるようにします。Lightning Web コンポーネントのコアモジュールは lwc です。

import ステートメントで、このモジュールと、コンポーネントで使用するモジュールの機能を指定します。

この例の import ステートメントは、JavaScript が lwc モジュールから LightningElement および track 機能を使用することを示しています。

// import module elements
import { LightningElement, track } from 'lwc';

// declare class to expose the component
export default class App extends LightningElement {


// add decorator   
    @track 
    ready = false;


// use lifecycle hook
    connectedCallback() {
        setTimeout(() => {
            this.ready = true;
        }, 3000);
    }
}

インポートされたこれら 2 つの機能は大きく異なります。

  • LightningElement は、Lightning Web コンポーネントの基本クラスです。
  • track はデコレータです。デコレータについては、次のセクションで詳しく説明します。

デコレータ

デコレータは、クラス、プロパティ、getter、setter、メソッドの動作を拡張するために JavaScript でよく使用されます。

Lightning Web コンポーネントデコレータの例として、次のようなものがあります。

  • @api: プロパティを public としてマークしてテンプレートや他のコンポーネントで使用できるようにします。
  • @track: プロパティを内部監視用にマークします。このプロパティを使用するテンプレートや関数は、プロパティの値が変更されると、強制的にコンポーネントを再表示します。これは、ローカルに値を保存する場合、特にユーザがコンポーネントを操作する場合に使用します。
  • @wire: データを取得してバインドできるようにします。この実装により、Salesforce 組織からのデータの取得が簡略化されます。

複数のデコレータをインポートできます。次のように行います。

import { LightningElement, track, api } from 'lwc';

ただし、プロパティには、一度に 1 つの Lightning Web コンポーネントデコレータのみを適用してください。たとえば、プロパティに @api (public reactive) および @track (private reactive) デコレータを同時に設定することはできません。

これらのデコレータを使用すると、短い構文で機能を拡張できます。たとえば、最後の JavaScript の例をもう一度見てみましょう。次の例で @track のある場合とない場合を試して動作を確認してみてください。@track デコレータでは値の追跡ができます。シンプルな 1 行で、宣言した変数に変更がないかリスナとして機能します。

import { LightningElement, track } from 'lwc';
export default class App extends LightningElement {
   
    @track 
    ready = false;

    connectedCallback() {
        setTimeout(() => {
            this.ready = true;
        }, 3000);
    }
}

コンポーネントライフサイクルフック

Lightning Web コンポーネントモデルでは、コンポーネントのライフサイクルで重要なイベントは発生したらコードを「フック」できるようにするメソッドが提供されています。こうしたイベントとして、コンポーネントに次の変化があった場合などが含まれます。

  • 作成された
  • DOM に追加された
  • ブラウザで表示された
  • エラーが発生した
  • DOM から削除された

こうしたライフサイクルイベントにコールバックメソッドを使用して対応できます。たとえば、connectedCallback() は、コンポーネントが DOM に挿入されると呼び出されます。disconnectedCallback() は、コンポーネントが DOM から削除されると呼び出されます。

条件付き表示のテストに使用した JavaScript ファイルでは、connectedCallback() を使用して、コンポーネントが DOM に挿入されたらコードが自動的に実行されるようにしました。コードは 3 秒待機してから、ready を true に設定します。

import { LightningElement, track } from 'lwc';
export default class App extends LightningElement {
   
    @track 
    ready = false;

    connectedCallback() {
        setTimeout(() => {
            this.ready = true;
        }, 3000);
    }
}

this キーワードが使用されていたことに気が付きましたか? JavaScript を記述したことがあれば this の使用に慣れているでしょう。this は、他の環境と同じに動作します。JavaScript のこの this キーワードは、現在のコンテキストの最上位を示します。ここでは、コンテキストは this クラスです。この ready は、this クラスの ready です。connectedCallback() メソッドは、最上位の ready 変数に値を割り当てます。これは、Lightning Web コンポーネントモデルを使用して開発に JavaScript 機能を取り入れる方法のよい例です。this に関する詳細情報へのリンクは、「リソース」セクションを参照してください。

駆け足で進んでいますが、いくつか試すことができました。次の単元では、一歩下がって、コンポーネントが存在する環境について説明します。

ボーナス! Playground でコンポーネントを試しましょう

Lightning Web Components Playground に慣れてきたので、少し時間を取って、Lightning Web コンポーネントレシピリポジトリの例をいくつか試してください。リポジトリにある例から HTML、JavaScript、CSS を Lightning Web Components Playground に貼り付けて試すことで、コンポーネントの基本概念を理解しやすくなります。

リソース