JavaScript コードの共有

コンポーネント間でコードを共有するには、サービスコンポーネントの ES6 モジュールを作成し、標準の JavaScript 構文を使用して共有する変数または関数をエクスポートします。

ES6 モジュールは、他のモジュールで使用できる変数や関数を明示的にエクスポートする JavaScript ファイルです。モジュールを使用すると、簡単にコードを作成できます。

LWC にはコードを共有するための 2 つのパターンがあります。

コードをインポートするコンポーネントと同じフォルダに、コードをエクスポートする JavaScript ファイルを作成します。相対パスを使用してコードをインポートします。他のコンポーネントではこのファイルディレクトリをインポートできません。この方法では、他のコンポーネントとコードを共有するのではなく、コンポーネント内でコードを作成できます。
サービスコンポーネント (ライブラリ) を作成します。これはコードをエクスポートする JavaScript ファイルが 1 つ以上含まれているコンポーネントフォルダです。コードをインポートするには、他のコンポーネントで c/componentName 構文を使用します。コンポーネントでは、フォルダ名と同じ名前のメインの JavaScript ファイルからのみコードをインポートできます。ライブラリ内の追加の JavaScript ファイルのコードを共有するには、そのファイルからコードをエクスポートし、次にメインの JavaScript ファイルからコードを再度エクスポートします。**「追加の JavaScript ファイルでエクスポートにアクセスする方法」**セクションを参照してください。

この例では、最初のパターンを使用します。utils.js および myFunction.js からコードをインポートできるのは、myComponent.js のみです。

コードをインポートするには、相対パスを使用します。

JavaScript ファイルでは、名前付きエクスポートまたはデフォルトエクスポートをエクスポートできます。名前付きエクスポートをインポートするには、コードで、{} で囲まれた特定の名前を使用します。デフォルトエクスポートをインポートするには、コードで任意の名前を使用できます。前の例では、utils.js で名前付きエクスポートを使用し、myFunction.js でデフォルトエクスポートを使用しています。

この例はサービスコンポーネント (ライブラリ) です。フォルダと 1 つの JavaScript ファイルの名前が同じである必要があります。この例では、名前は mortgageUtils です。

コードを他のコンポーネントにインポートするには、c/componentName 構文を使用します。

import ステートメントでは、ファイルではなくインポート元のフォルダを指定します。ファイル拡張子は指定しないでください。他のコンポーネントでは、ライブラリにあるフォルダと同じ名前のメイン JavaScript ファイルからのみコードをインポートできます。名前が異なる追加の JavaScript ファイルや、ネストされたフォルダ内のファイルからはインポートできません。このようなファイルのコードを共有するには、それらのファイルの関数または変数をエクスポートし、次にメインファイルからコードを再度エクスポートします。

ES6 モジュールでは、デフォルト関数または変数を 1 つエクスポートできます。

この export 構文も機能します。

デフォルトエクスポートを参照するには、関数をインポートするコンポーネントの import ステートメントで名前を選択する必要があります。エクスポートされた関数や JavaScript ファイルの名前である必要はありません。単に便宜上の名前です。

ES6 モジュールでは、複数の名前が付けられた関数または変数をエクスポートできます。

関数をインポートするコンポーネントは、エクスポートされた名前を使用します。

lwc-recipes サンプルリポジトリの mortgage および miscSharedJavaScript を参照してください。

LWC モジュール c/moduleName では、moduleName ファイルの 1 つのみがエントリポイントとして公開されます。エントリポイントは、JavaScript ファイルまたは CSS ファイルになります。LWC コンパイラでは、次の順序でモジュールのエントリポイントを解決します。

moduleName.js が存在する場合、それがエントリポイントになります。
存在しない場合、moduleName.css がエントリポイントになります。

どちらのファイルも見つからない場合、コンパイルは失敗します。

この例では、utils.js が c/utils モジュールのエントリポイントです。

c/utils から関数をインポートして、utils.js に解決します。

次のすべてのインポートは失敗します。

追加の JavaScript ファイルには、コンポーネント名やモジュール名と異なるファイル名を使用します。追加の JavaScript ファイルからエクスポートにアクセスするには、export from 構文を使用してエクスポートをインポートし、メインの JavaScript ファイルで再度エクスポートします。この構文は import と export を組み合わせたものです。

たとえば、追加の moreUtils.js ファイルからコードをエクスポートするとします。

moreUtils.js で、コードをエクスポートします。

utils.js では、次のステートメントで関数をエクスポートし、関数を他の Lightning Web コンポーネントで使用できるようにします。utils.js では、このページの最初の例のように、関数をインポートしない限り、これらの関数は利用できません。

または、ワイルドカードを使用すれば、すべてのリソースを追加のモジュールからエクスポートすることもできます。

コンポーネントでは、utils.js 内にあるかのように関数をインポートします。

関連トピック