ES6モジュールとは?
JavaScriptのES6モジュールは、コードを他のファイルからインポートして再利用できるようにする仕組みです。これにより、特定の機能をモジュール化し、必要な部分だけを他のスクリプトに渡すことが可能です。モジュール化することで、コードの再利用性が高まり、保守性や拡張性が向上します。
exportとimportの基本
ES6モジュールでは、特定の関数や変数を他のモジュールから使うためにexportとimportを使います。export
を使ってモジュールから外部に公開し、import
を使ってその公開された機能を他のモジュールで利用します。
基本的な構文
export
:モジュールから機能を公開するimport
:他のモジュールから公開された機能をインポートする
exportの例
まず、モジュール内で特定の機能を外部に公開するためのexport
の基本構文を示します。
// math.js
export function add(a, b) {
return a + b;
}
export const PI = 3.14159;
この例では、math.js
というファイルで関数add
と定数PI
がexport
されています。これにより、他のファイルからこの関数と定数をインポートして使用することができます。
importの例
次に、公開された機能を他のモジュールで使用するためのimport
の基本構文です。
// main.js
import { add, PI } from './math.js';
console.log(add(10, 5)); // 15
console.log(PI); // 3.14159
この例では、math.js
ファイルからadd
関数とPI
定数をインポートし、それを使って計算結果を表示しています。import
文で指定した要素だけがインポートされるため、不要な機能は取り込まれません。
デフォルトエクスポートと名前付きエクスポート
ES6モジュールでは、名前付きエクスポートとデフォルトエクスポートの2種類のエクスポート方法があります。以下に、それぞれの違いを説明します。
名前付きエクスポート
名前付きエクスポートは、複数の要素を個別にエクスポートする方法です。先ほどの例のように、関数や定数を個別に指定してインポートできます。
デフォルトエクスポート
デフォルトエクスポートでは、1つのモジュールで最も重要な要素を1つだけエクスポートし、そのモジュールをインポートする際に名前を自由に決められます。
// utils.js
export default function greet(name) {
return `Hello, ${name}!`;
}
// main.js
import greet from './utils.js';
console.log(greet('Alice')); // Hello, Alice!
この例では、utils.js
ファイルからデフォルトでgreet
関数がエクスポートされています。インポートする際には、関数名を自由に指定でき、greet
関数をインポートしています。
exportとimportの利点
モジュール化することで、コードが整理され、再利用が容易になります。以下の表に、exportとimportを使用することによる利点をまとめました。
利点 | 説明 |
---|---|
コードの再利用 | 共通する機能をモジュール化し、異なるプロジェクトや場所で簡単に再利用できる。 |
管理のしやすさ | コードが分割され、個々のモジュールを独立して開発・管理できる。 |
グローバル名前空間の回避 | モジュール内の変数や関数がグローバル名前空間に影響を与えない。 |
依存関係の明確化 | インポート文により、どのモジュールが他のモジュールに依存しているかが明確になる。 |
まとめ
ES6モジュールを使ったexport
とimport
により、コードをモジュール化し、再利用や管理がしやすくなります。名前付きエクスポートやデフォルトエクスポートを使い分けることで、必要な機能を柔軟にインポートでき、複雑なプロジェクトでも効率的にコードを管理することが可能です。特に、大規模なプロジェクトではモジュール化によってコードの整理が進み、保守性が向上します。