JavaScript のファイルからすべての関数をエクスポートする
この記事では、JavaScript ソース コードでの export 用語の目的と利点について説明します。 JavaScript の export 用語を使用して関数をエクスポートする方法を見ていきます。
JavaScript のファイルからすべての関数をエクスポートする
モジュールから関数、オブジェクト、およびその他のプリミティブ値をエクスポートするには、JavaScript で export 用語を使用して、関数またはオブジェクトを import 用語を使用して他の JavaScript プログラムで使用できるようにします。 エクスポートされたモジュールが値を更新すると、インポートされた値にも表示されます。
埋め込みスクリプトで export ステートメントを使用することはできません。エクスポート モジュールは、宣言するかどうかに関係なく strict モードになります。
輸出の種類:
- 名前付きエクスポート
- デフォルトのエクスポート
名前付きエクスポートの基本構文
モジュールごとに、このタイプに 0 個以上のエクスポートを追加できます。
export let myVariable = 'hello world!';
export function myFunction() {/* ... */
};
デフォルトのエクスポート基本構文
モジュールごとに、このタイプのデフォルト エクスポートを 1つだけ追加できます。
export {myFunction as default};
export default function() {/* ... */
}
export 関数を使用して JavaScript のファイルからすべての関数をエクスポートする
export ステートメントを使用して、JavaScript で関数をエクスポートするだけです (例: export function createSum() {})。 そして、そのエクスポートされた関数を他の JavaScript プログラムにインポートするには、import ステートメントを正しいパスで使用します (たとえば、import {createSum} from './firstFile.js)。
以下に示すように、名前付きエクスポートを 1つのファイルで必要な数だけ使用できます。また、関数のオブジェクトを作成して一度に export を使用することにより、1つの JavaScript ファイルから複数の関数をエクスポートすることもできます。
function function1() {}
function function2() {}
export {function1, function2} // export with combined as object
JavaScript での export 関数の例
まず、以下に示すように、ベース ファイルを作成し、エクスポートする関数の helperFunction.js という名前を付ける必要があります。
export function createSum(y, z) {
return y + z; // that will return sum
}
上に示したように、helperFunction.js ファイルを作成し、引数として 2つの値を取る export 項を使用して createSum() 関数を宣言しました。 最新の JavaScript のアロー関数に Named Export を使用することもできます。
次に、この関数をメインの JavaScript ファイルにインポートして、以下のように使用する必要があります。
import {createSum} from './helperFunction.js';
let value1 = 10;
let value2 = 15;
let result = createSum(value1, value2)
console.log('Sum of two values is : ' + result);
出力：
Sum of two values is : 25
上記のように、import という用語を使用して、メイン ファイルに正しいパスを持つヘルパー ファイル関数をインポートしました。 次に、変数の 2つの値を初期化しました。
その後、createSum() を呼び出し、両方の値の変数を引数として渡し、戻り値を result 変数に格納しました。
最後に、console.log() メソッドを使用して合計結果をログに表示しました。 両方のファイルを作成し、上記のソース コードを保存し、JavaScript コンパイラを使用して結果を確認できます。