exportとimportの使い方 | ES6モジュール | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

ES6モジュールとは?

JavaScriptのES6モジュールは、コードを他のファイルからインポートして再利用できるようにする仕組みです。これにより、特定の機能をモジュール化し、必要な部分だけを他のスクリプトに渡すことが可能です。モジュール化することで、コードの再利用性が高まり、保守性や拡張性が向上します。

exportとimportの基本

ES6モジュールでは、特定の関数や変数を他のモジュールから使うためにexportimportを使います。exportを使ってモジュールから外部に公開し、importを使ってその公開された機能を他のモジュールで利用します。

基本的な構文

  • export:モジュールから機能を公開する
  • import:他のモジュールから公開された機能をインポートする

exportの例

まず、モジュール内で特定の機能を外部に公開するためのexportの基本構文を示します。

// math.js
export function add(a, b) {
    return a + b;
}

export const PI = 3.14159;

この例では、math.jsというファイルで関数addと定数PIexportされています。これにより、他のファイルからこの関数と定数をインポートして使用することができます。

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モジュールを使ったexportimportにより、コードをモジュール化し、再利用や管理がしやすくなります。名前付きエクスポートやデフォルトエクスポートを使い分けることで、必要な機能を柔軟にインポートでき、複雑なプロジェクトでも効率的にコードを管理することが可能です。特に、大規模なプロジェクトではモジュール化によってコードの整理が進み、保守性が向上します。