はじめに

JavaScriptのエクスポートは、モジュールを使用してコードを分割し、再利用可能にするための重要な概念です。エクスポートを利用することで、他のファイルから関数や変数、クラスをインポートして使用することができます。

JavaScriptには、主に「名前付きエクスポート/インポート」と「デフォルトエクスポート/インポート」の2種類の方法があります。それぞれについて詳しく説明します。

名前付きエクスポート/インポート

エクスポート方法

名前付きエクスポートを使用すると、1つのモジュールから複数のエクスポートを行うことができます。エクスポートするアイテムに名前を付け、その名前でインポートします。

math.js

export const pi = 3.14159;

export function add(a, b) {
  return a + b;
}

export class Calculator {
  multiply(a, b) {
    return a * b;
  }
}

上記の例では、pi、add関数、Calculatorクラスがエクスポートされています。

インポート方法

名前付きエクスポートをインポートする際には、波括弧{}を使ってインポートするアイテムを指定します。

main.js

import { pi, add, Calculator } from './math.js';

console.log(pi); // 3.14159
console.log(add(2, 3)); // 5

const calculator = new Calculator();
console.log(calculator.multiply(4, 5)); // 20

名前の変更（エイリアス）

名前付きエクスポートをインポートする際には、asキーワードを使って名前を変更することもできます。

main.js

import { pi as circleConstant, add as sum } from './math.js';

console.log(circleConstant); // 3.14159
console.log(sum(2, 3)); // 5

デフォルトエクスポート/インポート

デフォルトエクスポートを使用すると、1つのモジュールにつき1つのデフォルトエクスポートを指定することができます。デフォルトエクスポートは、インポートする際に特定の名前を指定する必要がありません。

エクスポート方法

user.js

const user = {
  name: "Alice",
  age: 25,
};

export default user;

上記の例では、userオブジェクトがデフォルトエクスポートされています。

インポート方法

デフォルトエクスポートをインポートする際には、任意の名前を指定してインポートできます。

main.js

import user from './user.js';

console.log(user.name); // Alice
console.log(user.age); // 25

名前付きエクスポート/インポートとデフォルトエクスポート/インポートの併用

1つのモジュールで名前付きエクスポートとデフォルトエクスポートを併用することもできます。

エクスポート方法

utils.js

export const greet = (name) => `Hello, ${name}!`;

const farewell = (name) => `Goodbye, ${name}!`;
export default farewell;

インポート方法

main.js

import farewell, { greet } from './utils.js';

console.log(greet('Alice')); // Hello, Alice!
console.log(farewell('Alice')); // Goodbye, Alice!

まとめ

• 名前付きエクスポートは、複数の関数や変数、クラスをエクスポートするのに便利です。
• デフォルトエクスポートは、モジュールにつき1つのエクスポートをデフォルトとして指定します。
• 名前付きエクスポートとデフォルトエクスポートを併用することで、柔軟にモジュールを設計できます。

このように2種類のエクスポートを活用することで、JavaScriptのコードをモジュール化し、再利用性を高めることができます。これによって、大規模なプロジェクトでも管理しやすくなります。