コンポーネントの JavaScript ファイル

すべてのコンポーネントには、JavaScript ファイルが必要です。コンポーネントで UI を表示する場合は、JavaScript ファイルで HTML 要素を定義します。コンポーネントがサービスコンポーネント (ライブラリ) である場合、JavaScript ファイルで他のコンポーネントが使用する関数がエクスポートされます。

Lightning Web コンポーネントの JavaScript ファイルは、ES6 モジュールです。デフォルトでは、モジュール内で宣言されたすべてのものがローカルです。つまり、そのモジュールに制限されています。

モジュールで宣言されたクラス、関数、または変数をインポートするには、import ステートメントを使用します。モジュールで宣言されたクラス、関数、または変数を他のコードで使用できるようにするには、export ステートメントを使用します。

コンポーネントの JavaScript ファイルの最大ファイルサイズは 128 KB (131,072 バイト) です。

UI コンポーネント

JavaScript ファイルは、componentName.js という命名規則に従います。たとえば、myComponent.js のように命名します。

すべての UI コンポーネントの JavaScript ファイルには、少なくとも次のコードが記述されている必要があります。

1import { LightningElement } from "lwc";
2export default class MyComponent extends LightningElement {}

Lightning Web Components のコアモジュールは、lwc です。import ステートメントは、LightningElement を lwc モジュールからインポートします。

1import { LightningElement } from "lwc";

LightningElement は、標準 HTML 要素のカスタムラッパーです。

Lightning Web コンポーネントの JavaScript クラスを作成するには、LightningElement を拡張します。他のクラスを拡張して、Lightning Web コンポーネントを作成することはできません。

1export default class MyComponent extends LightningElement {
2  // Your code here
3}

export default キーワードは、他のコンポーネントが使用する MyComponent クラスをエクスポートします。このクラスは、UI コンポーネントのデフォルトエクスポートである必要があります。UI コンポーネントで他の変数や関数をエクスポートすることは現在サポートされていません。

この命名規則では、クラス名をパスカルケースで表記する必要があり、各単語の先頭の文字が大文字となります。myComponent.js の場合、クラス名は MyComponent となります。

JavaScript ファイルには、次のものを含めることができます。

公開プロパティを介したコンポーネントの公開 API、および @api のアノテーションが付いたメソッド。
項目
イベントハンドラ

UI コンポーネントのフォルダには、メインの myComponent.js ファイルのほかに、他の JavaScript ファイルも含めることができます。ただし、それらのファイルに含まれるコードはコンポーネント独自のものであり、共有することはできません。

サービスコンポーネント (ライブラリ)

コンポーネント間でコードを共有するには、ES6 モジュールを作成し、公開する変数または関数をエクスポートします。

ES6 モジュールは、他のモジュールが使用できる機能を明示的にエクスポートするファイルです。モジュールを使用すると、グローバル範囲に影響を与えることなく簡単にコードを作成できます。

「JavaScript コードの共有」を参照してください。

関連トピック

フィールド、プロパティ、属性

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。