コンポーネントの JavaScript ファイル
すべてのコンポーネントには、JavaScript ファイルが必要です。コンポーネントで UI を表示する場合は、JavaScript ファイルで HTML 要素を定義します。コンポーネントがサービスコンポーネント (ライブラリ) である場合、JavaScript ファイルで他のコンポーネントが使用する関数がエクスポートされます。
Lightning Web コンポーネントの JavaScript ファイルは、ES6 モジュールです。デフォルトでは、モジュール内で宣言されたすべてのものがローカルです。つまり、そのモジュールに制限されています。
モジュールで宣言されたクラス、関数、または変数をインポートするには、import ステートメントを使用します。モジュールで宣言されたクラス、関数、または変数を他のコードで使用できるようにするには、export ステートメントを使用します。
コンポーネントの JavaScript ファイルの最大ファイルサイズは 128 KB (131,072 バイト) です。
JavaScript ファイルは、componentName.js という命名規則に従います。たとえば、myComponent.js のように命名します。
すべての UI コンポーネントの JavaScript ファイルには、少なくとも次のコードが記述されている必要があります。
Lightning Web Components のコアモジュールは、lwc です。import ステートメントは、LightningElement を lwc モジュールからインポートします。
LightningElement は、標準 HTML 要素のカスタムラッパーです。
Lightning Web コンポーネントの JavaScript クラスを作成するには、LightningElement を拡張します。他のクラスを拡張して、Lightning Web コンポーネントを作成することはできません。
export default キーワードは、他のコンポーネントが使用する MyComponent クラスをエクスポートします。このクラスは、UI コンポーネントのデフォルトエクスポートである必要があります。UI コンポーネントで他の変数や関数をエクスポートすることは現在サポートされていません。
この命名規則では、クラス名をパスカルケースで表記する必要があり、各単語の先頭の文字が大文字となります。myComponent.js の場合、クラス名は MyComponent となります。
JavaScript ファイルには、次のものを含めることができます。
- 公開プロパティを介したコンポーネントの公開 API、および
@apiのアノテーションが付いたメソッド。 - 項目
- イベントハンドラ
UI コンポーネントのフォルダには、メインの myComponent.js ファイルのほかに、他の JavaScript ファイルも含めることができます。ただし、それらのファイルに含まれるコードはコンポーネント独自のものであり、共有することはできません。
コンポーネント間でコードを共有するには、ES6 モジュールを作成し、公開する変数または関数をエクスポートします。
ES6 モジュールは、他のモジュールが使用できる機能を明示的にエクスポートするファイルです。モジュールを使用すると、グローバル範囲に影響を与えることなく簡単にコードを作成できます。
「JavaScript コードの共有」を参照してください。
関連トピック