【Salesforce】LWC入門

LWC（Lightning Web Component）とは

LWC（Lightning Web Component）は、Web Componentsを使用して、Salesforceのプラットフォーム上でカスタムコンポーネントを構築するためのフレームワークです。 LWC は、Web Componentsに加え、以下の機能を提供しています。

強力なデータバインディング: Salesforce のデータモデルとの統合。
Apex のインテグレーション: Apex のメソッドを JavaScript から呼び出すことができます。
イベントシステム: コンポーネント間のデータのやり取りを行うためのイベントシステムが提供されています。
セキュリティ: セキュリティ機能が強化されています。
スケーラビリティ: 大量のデータを扱うことができるようになっています。

纏めると、LWC は Salesforce のプラットフォーム上でWeb Componentsを使用してカスタムコンポーネントを構築するためのフレームワークです。

LWC（Lightning Web Component）の特徴

LWC (Lightning Web Component) の基礎となる概念は以下となる。

Web Components: LWC は Web Components と呼ばれる技術を使用しています。Web Components は、ブラウザの API を使用して、カスタム HTML タグを作成するための仕組みです。
Shadow DOM: Shadow DOM は、Web Components の一部で、カスタム HTML タグのスタイルや構造を隠蔽するために使用されます。Shadow DOM を使用することで、カスタムコンポーネントのスタイルや構造を外部の要素から隔離することができます。
Template: LWC のコンポーネントは、HTML テンプレートによって構築されます。テンプレートは、HTML のマークアップと JavaScript のロジックを組み合わせたものです。
Decorators: LWC では、デコレータと呼ばれる構文を使用して、コンポーネントのプロパティやメソッドを定義します。デコレータは、JavaScript のアノテーションのような役割を持ちます。
Event Handling: LWC では、カスタムイベントを使用して、コンポーネント間のデータのやり取りを行います。イベントハンドラを使用することで、コンポーネント間のコミュニケーションを実現することができます。

次は上記の説明をそれぞれもっと詳しい説明します。

Web Components

Web Components は、ブラウザの API を使用して、カスタム HTML タグを作成するための仕組みです。Web Components は、以下の 4 つの技術によって構成されます。

Custom Elements: カスタム HTML タグを作成するための技術。
Shadow DOM: カスタム HTML タグのスタイルや構造を隠蔽するための技術。
HTML Templates: カスタム HTML タグのテンプレートを定義するための技術。
HTML Imports: カスタム HTML タグを外部から読み込むための技術。

Shadow DOM

Shadow DOM は、Web Components の 1 つの機能で、カスタム HTML タグのスタイルや構造を隠蔽するための技術です。 Shadow DOM を使用することで、カスタム HTML タグ内部のスタイルや構造が外部の HTML に影響を与えなくなり、カスタム HTML タグを再利用することができるようになります。

LWC (Lightning Web Component)では、Shadow DOMを使用して、カスタムコンポーネントのスタイルや構造を隠蔽することができます。 LWC のコンポーネントは、Shadow DOMを使用して、スタイルや構造を隠蔽するため、外部の HTML に影響を与えなくなり、再利用性が向上します。

また、LWC では、スタイルのスコープを限定することができるようになり、スタイルの上書きを防ぐことができます。

LWC では、標準 HTML タグと同じように Shadow DOM を使用することができます。

LWC Template

LWC (Lightning Web Component)では、HTML Templates と呼ばれる機能を使用して、カスタムコンポーネントのテンプレートを定義することができます。 HTML Templates は、HTML のテンプレートを定義するためのテンプレートリテラルと呼ばれる記法を使用します。

LWC の HTML Templates は、JavaScript のテンプレートリテラルを使用して記述します。テンプレートリテラルは、バッククォート (`) で囲むことで定義されます。

例:

<template>
  <div>Hello World!</div>
</template>

LWC の HTML Templates は、カスタムコンポーネントの見た目を定義するために使用します。また、JavaScript のテンプレートリテラルを使用することで、変数の埋め込みや条件分岐などを行うことができます。

LWC では、標準 HTML タグと同じように HTML Templates を使用することができます。

LWC Decorators

LWC (Lightning Web Component)では、デコレーターと呼ばれる機能を使用して、カスタムコンポーネントのプロパティやメソッドを拡張することができます。

LWC のデコレーターは、JavaScript のアノテーションのように、プロパティやメソッドに対して追加されます。

LWC では、次のようなデコレーターが提供されています。

@api: コンポーネントの外部からアクセスできるプロパティを定義します。
@track: コンポーネントのテンプレートに反映されるプロパティを定義します。
@wire: Apex のメソッドを呼び出して、プロパティにデータをバインドします。

デコレーターを使用することで、コンポーネントの設計が簡潔になり、開発者がより素早くカスタムコンポーネントを構築することができるようになります。

例:

import { LightningElement, api } from "lwc";

export default class MyComponent extends LightningElement {
  @api name;
}

上記の例では、@apiデコレーターを使用して、nameというプロパティを定義し、外部からアクセスできるようにしています。

デコレーターは、LWC では必須ではありませんが、開発効率を上げるために役立ちます。また、デコレーターを使用することで、コンポーネントをより明確に定義することができます。

LWC Event Handling

LWC (Lightning Web Component)では、イベントハンドリングと呼ばれる機能を使用して、カスタムコンポーネント間でのイベントの通信を行うことができます。イベントを定義するには、customEventのような自分自身のカスタムイベントを定義し、dispatchEventメソッドを使用して、イベントを発火させます。

例:

import { LightningElement } from "lwc";

export default class MyComponent extends LightningElement {
  handleClick() {
    const event = new CustomEvent("myevent", {
      detail: { message: "Hello World!" },
    });
    // イベントを発火
    this.dispatchEvent(event);
  }
}

上記の例では、handleClickメソッド内でカスタムイベントmyeventを作成し、dispatchEventメソッドで発火しています。イベントオブジェクトには、detailプロパティを使用して、イベントに渡すデータを設定することができます。イベントを受け取るには、addEventListenerメソッドを使用して、イベントを受け取れるようにします。

例:

import { LightningElement } from "lwc";

export default class OtherComponent extends LightningElement {
  connectedCallback() {
    this.addEventListener("myevent", this.handleEvent);
  }
  handleEvent(event) {
    console.log(event.detail.message); // 'Hello World!'
  }
}

上記の例では、OtherComponent で myevent イベントを受け取るように、addEventListenerメソッドを使用して設定しています。イベントが発生したら、handleEventメソッドが呼び出され、event.detail.messageからイベントに渡されたデータを取得することができます。

イベントハンドリングは、LWC 開発で重要な機能の一つであり、コンポーネント間のデータの通信や、親子関係のコンポーネント間でのイベントの通信を行うために使用されます。

LWC（Lightning Web Component） とは#

LWC（Lightning Web Component） の特徴#

Web Components#

Shadow DOM#

LWC Template#

LWC Decorators#

LWC Event Handling#