Kitaarashi共有するFacebookTwitterEmailLinkedInこんにちは、アピリオ北嵐です。Components(以降、LWCと記述)の基本的な構成や実装のルールについて説明していきたいと思います。LWCが導入された背景については、LWC入門(1)を参照してみてください。ES6LWCは従来までのレガシーJavaScriptではなくES6(JavaScript2015)で導入された新しい文法を使って記述します。ES6に不慣れな方はLWCのソースコードを見る前にES6の基本についてスタディして下さい。ここでは詳しく説明しませんが、最低限覚えておくべき変更点は下記となります。下記にLWCのファイル構成を示します。Auraコンポーネントは多数のファイルから1つのコンポーネントが構成されていましたが、LWCはシンプルに4つのファイルで構成されます。2つでありhtmlファイルは省略できます。cssファイルは必要に応じて定義します。コンポーネント名は基本的にキャメル記法(単語の先頭を大文字)を使ってネーミングしますが、いくつか細かいルールがありますので注意してください。Componentsでのコンポーネント名はハイフン(-)区切りになるため、内部的にコンポーネント名が変更されています。Auraコンポーネントではコンポーネントのメタデータ情報はいくつかの要素に分散されて保持されていましたが、LWCではすっきりと1つのファイルにまとまっています。詳細についてはこちらの公式ドキュメントを参照してください。<target>lightning__AppPage</target><target>lightning__HomePage</target><target>lightningCommunity__Page</target>[メタデータ・ファイルの例]コンポーネントの構成要素:htmlhtmlファイルでは、<template>タグ内にコンポーネントが表示するhtmlテンプレートを定義します。他のLWCコンポーネントを参照することもできます。属性、イベント、メソッドなどを定義したAuraコンポーネントと異なり、LWCではhtmlファイルにはテンプレートのみを記述します。></lightning-formatted-text>・・・</template>[htmlファイルの例]データの参照:公式リファレンスJSファイル内に定義した変数やJavaScriptクラス内のgetterを参照可能です。getterを定義してその中にロジックを記述することで、同様な処理を実現できます。変数名の間にスペースを入れることは禁止されていることに注意してください。サポートされていません。使ってループを回します。iteratorもサポートされています。使って最初と最後の要素を区別することができます。イベントハンドラの紐付け:データの参照と同じように{}内にクラス内に定義する関数名を記述することで、イベントとハンドラ関数を紐付けることができます。Lightingコンポーネントの利用:標準Lightningコンポーネントや自分の組織に作成した他のコンポーネントを利用することもできます。ハイフンで区切る)に変わっていることに注意してください。ネーミングルールは下記となります。ネームスペース-コンポーネント名(ケバブ記法)下記のLightning標準のアイコン・コンポーネントの場合は、先頭のlightningがネームスペース名、iconがコンポーネント名を表します。