Lightning Web Components 入門(2)LWCの基本的な構成

March 20, 2019 Naoki Kitaarashi

こんにちは、アピリオ北嵐です。今回は Lightning Web Components(以降、LWCと記述)の基本的な構成や実装のルールについて説明していきたいと思います。LWCが導入された背景については、LWC入門(1)を参照してみてください。

JavaScript ES6

LWCは従来までのレガシーJavaScriptではなくES6(JavaScript2015)で導入された新しい文法を使って記述します。まだES6に不慣れな方はLWCのソースコードを見る前にES6の基本についてスタディして下さい。ここでは詳しく説明しませんが、最低限覚えておくべき変更点は下記となります。

  • ブロックスコープとlet/const
  • クラスの定義
  • モジュールのインポート/エクスポート
  • アロー関数による関数の定義

コンポーネントの構成

下記にLWCのファイル構成を示します。Auraコンポーネントは多数のファイルから1つのコンポーネントが構成されていましたが、LWCはシンプルに4つのファイルで構成されます。必須のファイルはメタデータとjavascript の2つでありhtmlファイルは省略できます。また、cssファイルは必要に応じて定義します。

コンポーネント名は基本的にキャメル記法(単語の先頭を大文字)を使ってネーミングしますが、いくつか細かいルールがありますので注意してください。後で説明しますが、Web Componentsでのコンポーネント名はハイフン(-)区切りになるため、内部的にコンポーネント名が変更されています。

コンポーネントの構成要素:メタデータ(設定ファイル)

メタデータには、APIのバージョン、AppBuilderでの利用可否(isExposed)、説明、コンポーネントのタイプ(targets)、デザイン表示時のプロパティ などを定義します。Auraコンポーネントではコンポーネントのメタデータ情報はいくつかの要素に分散されて保持されていましたが、LWCではすっきりと1つのファイルにまとまっています。詳細についてはこちらの公式ドキュメントを参照してください。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn=”component name">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <description>コンポーネントの説明</description>
  <targets>
    <target>lightning__RecordPage</target>
  </targets>
</LightningComponentBundle>

//ターゲットには下記の4つを指定可能
<target>lightning__RecordPage</target> 
 <target>lightning__AppPage</target>
 <target>lightning__HomePage</target>
 <target>lightningCommunity__Page</target>

[メタデータ・ファイルの例]

コンポーネントの構成要素:html

htmlファイルでは、<template>タグ内にコンポーネントが表示するhtmlテンプレートを定義します。LWC固有の拡張要素として、変数の置換、if文、繰り返し などをサポートします。また他のLWCコンポーネントを参照することもできます。属性、イベント、メソッドなどを定義したAuraコンポーネントと異なり、LWCではhtmlファイルにはテンプレートのみを記述します。

<template>
  <article class="slds-card">
    <div class="slds-card_header slds-grid">
    ・・・
    <lightning-icon icon-name="standard:user" size="small" ></lightning-icon>
    ・・・
    <div class="slds-card__body slds-card__body_inner">
      <template if:true={record.data}>
    ・・・
         <lightning-formatted-text value={record.data.Username} ></lightning-formatted-text>
   ・・・
</template>

[htmlファイルの例]

データの参照:公式リファレンス

JSファイル内に定義した変数やJavaScriptクラス内のgetterを参照可能です。Auraコンポーネントのように{}の中に式を定義することはできないので、代わりに getterを定義してその中にロジックを記述することで、同様な処理を実現できます。"{ records.date }" のように{} と 変数名の間にスペースを入れることは禁止されていることに注意してください。

IF文:

条件分岐には if:true と if:false を使います。else はサポートされていません。

繰り返し: 公式リファレンス

for:each 、 for:item、for:index を使ってループを回します。

iteratorもサポートされています。first と last を使って最初と最後の要素を区別することができます。

イベントハンドラの紐付け:

データの参照と同じように{}内にクラス内に定義する関数名を記述することで、イベントとハンドラ関数を紐付けることができます。

Lightingコンポーネントの利用:

標準Lightningコンポーネントや自分の組織に作成した他のコンポーネントを利用することもできます。コンポーネント名の表記や属性名がキャメル記法からケバブ記法( ハイフンで区切る)に変わっていることに注意してください。ネーミングルールは下記となります。

 ネームスペース-コンポーネント名(ケバブ記法) 

下記のLightning標準のアイコン・コンポーネントの場合は、先頭のlightningがネームスペース名、iconがコンポーネント名を表します。また iconName属性は icon-name と表記します。

自分の組織に作成したコンポーネントの場合、ネームスペースは c になります。例えば  customOppList というコンポーネントを作成した場合、参照する時のコンポーネント名は c-custom-opp-list となります。

コンポーネントの構成要素:javaScript

JavaScriptファイルには、ES6から導入されたJavaScriptクラスとしてコンポーネントを定義します。importによる必要なリソースの読込み、htmlや他のコンポーネントから参照されるプロパティの定義、サーバーからのデータロード、イベント処理などをJSコードとして記述します。コードの書き方は独自の表記法を取っていたAuraコンポーネントと比べるとずいぶん異なりますので、少し慣れが必要でしょう。

import { LightningElement, wire } from ‘lwc‘;   //必ずインポートするlwc標準モジュール

//クライアントから呼び出すApex method の定義
import retrieveUserInfo from '@salesforce/apex/LWC_UserInfoController.retrieveUserInfo';

export default class lwc_UserInfo extends LightningElement { //必ず継承する

    //WiringによるUserレコードの取得(プロパティ)
    @wire(retrieveUserInfo, {})   //@アノテーションによる宣言は拡張構文
    record;

   /*
    * 初期化処理
    */
    connectedCallback() {
    }
}

[JavaScriptファイルの例]

なお、LWCでは独自の拡張が行われているため(実行前にはプリコンパイルされ、ブラウザが実行できるJSコードに展開される)、ES6の文法とは多少異なります(import文やアノテーションなど)。

プロパティの定義:

外部に公開したいpublicな属性に対しては @api を付けます。またHTMLから参照する属性には @track を付けます。@track または @apiを付けた属性は、内容が更新されると画面が再描画されます。
JavaScriptコード内で属性を参照する場合は ES6の記法に従って this.属性名 でアクセスします。属性に使用可能なデータ型は、Primitive型、連想配列({})、配列([])の3種類になります。

前述したようにJavaScript内の属性名はキャメル記法(先頭小文字、単語の切れ目で大文字)ですが、HTML内の変数名は ケバブ記法(単語を-で区切る)になります。注意してください。

getter と setter:

属性の代わりに getter/setter を定義することもできます。@apiを付ければ外部に公開することもできます。@apiはgetter/setterの両方に付ける必要はなく通常はgetterのみ付けてください。

静的リソースの参照:

静的リソースを参照したい場合はインポートして使います。下記の例では trailheadLogoUrl 変数に静的リソースを参照するためのURLが設定されます。

初期化イベント:

コンポーネントの初期化処理のイベントとして、以下の4つのイベントが提供されています。通常は connectedCallback() または renderedCallback()のいずれかに初期化コードを記述します。

おわりに

今回はLWCの基本的な構成および実装ルールについて説明しました。JavaScriptコードなどはAuraコンポーネント時代からかなり変更された要素ではありますが、より簡潔にコードが書けるように進化しているという印象を受けました。次回は簡単なサンプルコードを使って、より具体的な実装方法について説明したいと思います。


■ Lightning Web Components 入門(全5回)シリーズは下記のリンクからご覧いただけます。
Lightning Web Components入門(1)Aura Components からLightning Web Componentsへ
・ Lightning Web Components入門(2)LWCの基本的な構成
・ Lightning Web Components入門(3)コンポーネントの実装方法
・ Lightning Web Components入門(4)Salesforce CLI
・ Lightning Web Components入門(5)応用編


 

著者について

Naoki Kitaarashi

アピリオのシニアコンサルとしてクラウドの世界に身を投じてはや5年あまり。プロジェクトでの立場に応じて、アーキテクト、リーダー、デベロッパーと様々なロールの仕事に携わっています。続々と新しいサービスと技術が登場するSalesforceの世界はエンジニアとして常に刺激を持ち続けられるエリアであり、2019年からはMuleSoftソリューションの起ち上げに関わっています。しばらくはAPI-ledなシステム連携を広めることに全力投球!!

Naoki Kitaarashi のコンテンツをもっと見る
戻る
Lightning Web Components入門(1)Aura Components からLightning Web Componentsへ
Lightning Web Components入門(1)Aura Components からLightning Web Componentsへ

従来のLightning Aura Componentsの課題を根本的に解決するために、よりモダンな技術をベースとした新しいLightning Web ComponentsがSrping'19から提供されることにな...

次へ
Lightning Web Components入門(3)コンポーネントの実装方法
Lightning Web Components入門(3)コンポーネントの実装方法

今回は簡単なサンプル・コンポーネントを通して、LWCの基本的な実装方法とSalesforceサーバーからのデータの取得方法を見ていくことにします。LWCでは新たにWire Serviceというノンコーディングでサー...

アピリオまでお気軽にお問合せください

ご質問はこちら