JavaScript コードの共有

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

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

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

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

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

1lwc
2  └───myComponent
3    ├──myComponent.html
4    ├──myComponent.js
5    ├──myComponent.js-meta.xml
6    ├──myFunction.js
7    └──utils.js

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

1// myComponent.js
2import { getAmount, calculateCost } from "./utils";
3import myFunction from "./myFunction";

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

Tip

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

1lwc
2  ├──mortgageUtils
3    ├──mortgageUtils.js
4    └──mortgageUtils.js-meta.xml
5  └───myComponent
6    ├──myComponent.html
7    ├──myComponent.js
8    └──myComponent.js-meta.xml

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

1// myComponent.js
2import { getTermOptions, calculateMonthlyPayment } from "c/mortgageUtils";

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

Important

デフォルト関数および変数のエクスポート

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

1lwc
2  └──myComponent
3    ├──myComponent.html
4    ├──myComponent.js
5    ├──myComponent.js-meta.xml
6    └──myFunction.js

1// myFunction.js
2export default function () { ··· }

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

1// myFunction.js
2export { myFunction as default, … };

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

1// myComponent.js
2import myFunction from "./myFunction";

名前付き関数および変数のエクスポート

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

1// mortgage.js
2const getTermOptions = () => {
3  return [
4    { label: "20 years", value: 20 },
5    { label: "25 years", value: 25 },
6  ];
7};
8
9const calculateMonthlyPayment = (principal, years, rate) => {
10  // Your calculation logic here
11};
12
13export { getTermOptions, calculateMonthlyPayment };

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

1// myComponent.js
2import { getTermOptions, calculateMonthlyPayment } from "c/mortgage";

1lwc
2  ├──mortgage
3    ├──mortgage.js
4    └──mortgage.js-meta.xml
5  └──myComponent
6    ├──myComponent.html
7    ├──myComponent.js
8    └──myComponent.js-meta.xml

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

Tip

LWC コンパイラでコンポーネントのエントリポイントを解決する方法

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

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

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

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

1utils
2   ├──utils.js
3   └──other.js

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

1// someComponent.js
2// This import is valid
3import { getSomething } from "c/utils";

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

1// someComponent.js
2// These imports are invalid
3import { getSomething } from "c/utils/utils.js";
4import { getSomething } from "c/utils/other.js";
5import { getSomething } from "c/utils/utils";

追加の JavaScript ファイルでエクスポートにアクセスする方法

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

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

1lwc
2  └───utils
3    ├──utils.js
4    └──moreUtils.js

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

1// moreUtils.js
2const someFunction = () => {
3    // logic
4};
5
6const someOtherFunction = (arg1 arg2) => {
7    // logic
8};
9
10export{ someFunction, someOtherFunction };

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

1// utils.js
2export { someFunction, someOtherFunction } from "./moreUtils";

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

1// utils.js
2export * from "./moreUtils";

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

1// someComponent.js
2import { someFunction, someOtherFunction } from "c/utils";

関連トピック

The Japanese Summer '24 guide is now live

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