[JavaScript] export / import について知ろう

2023年4月14日2023年11月24日

JavaScriptのモジュールは、関連する関数や変数を単一のファイルにまとめ、他のJavaScriptファイルから再利用するための方法です。モジュールを他のファイルから再利用するには、エクスポートとインポートの仕組みを使用します。

export(エクスポート)

まず、エクスポートについて説明します。JavaScriptのモジュールから関数や変数をエクスポートするには、以下のように記述します。

// モジュールからエクスポートする関数
export function myFunction() {
  // 関数の内容
}

// モジュールからエクスポートする変数
export const myVariable = 123;

このように、exportキーワードを使って、関数や変数をエクスポートします。関数や変数の宣言の前にexportを書くことで、その関数や変数を他のファイルから利用できるようになります。

また、複数の関数や変数をまとめてエクスポートすることもできます。

function myFunction1() {
  // 関数の内容
}

function myFunction2() {
  // 関数の内容
}

const myVariable = 123;

export { myFunction1, myFunction2, myVariable };

このように、exportキーワードを使って、{ }内に複数の関数や変数を列挙してエクスポートします。

import(インポート)

エクスポートされた関数や変数を他のファイルで利用するには、インポートする必要があります。以下は、エクスポートされた関数や変数をインポートする方法です。

// myModule.jsからエクスポートされた関数や変数をインポートする
import { myFunction, myVariable } from './myModule.js';

// インポートした関数や変数を使用する
myFunction();
console.log(myVariable);

importキーワードを使って、インポートしたい関数や変数を{ }内に列挙して指定します。また、インポート元のファイルのパスを指定する必要があります。この例では、'./myModule.js'というパスを指定しています。

まとめ

以上がJavaScriptのモジュールのエクスポート機能についての説明です。エクスポートとインポートを使うことで、JavaScriptのコードをより使いやすく、メンテナンスしやすくすることができます。

export default / import については別の記事にまとめました。よかったら見てください。