こんにちは、アピリオ北嵐です。今回は 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つのファイルにまとまっています。詳細についてはこちらの公式ドキュメントを参照してください。
<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ファイルにはテンプレートのみを記述します。
<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コンポーネントと比べるとずいぶん異なりますので、少し慣れが必要でしょう。
//クライアントから呼び出す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 のコンテンツをもっと見る
