JavaScriptのモジュール：ファイル間でコードを共有する

クラスと継承を学んだ次は「モジュール」です。モジュールを使うことで、複数のファイルに分けたコードを相互に利用できるようになります。

export：他のファイルへ渡す

**export（エクスポート）**は、他のファイルへコードを渡すことです。

構文: export default クラス名;

// User.js（ファイル）
class User {
  constructor(name) {
    this.name = name;
  }
  
  greet() {
    console.log(`こんにちは、${this.name}です`);
  }
}

export default User;  // クラス定義後に記載

ポイント

  • クラス定義の後に記載
  • どんな値でもエクスポート可能（クラス、関数、定数など）

デフォルトエクスポート

export default は、デフォルトエクスポートと呼ばれています。

特徴: そのファイルがインポートされると、自動的に export default 値 の値がインポートされます。

// animal.js
class Animal {
  constructor(name) {
    this.name = name;
  }
}

export default Animal;

重要: デフォルトエクスポートは、1つのファイルにつき1つの値までです。

// ❌ エラー：デフォルトエクスポートは1つまで
export default Animal;
export default Dog;  // エラー

import：他のファイルを読み込む

**import（インポート）**は、他のファイルの読み込みです。

構文: import クラス名 from "./ファイル名";

// main.js
import User from "./User";

const user = new User("太郎");
user.greet();  // こんにちは、太郎です

ポイント

  • 使用するファイルの先頭で宣言
  • ファイル名の拡張子 .js は省略できる

エクスポートとインポートの名前

デフォルトエクスポートの場合、エクスポート時とインポート時の名前が異なっていても実行されます。

// User.js
class User {
  constructor(name) {
    this.name = name;
  }
}

export default User;

// main.js
import Person from "./User";  // 異なる名前でインポートしてもOK

const person = new Person("太郎");

これは、デフォルトエクスポートが「そのファイルの代表的な値」として扱われるためです。

名前つきエクスポート：複数の値をエクスポート

1つのファイルから複数の値をエクスポートしたい場合、名前つきエクスポートを使います。

構文: export { 値1, 値2, ... }

// utils.js
const add = (a, b) => {
  return a + b;
};

const multiply = (a, b) => {
  return a * b;
};

// defaultを書かずに{}で囲む
export { add, multiply };

名前つきエクスポートのインポート

インポート時も同様に {} で囲む必要があります。

// main.js
import { add, multiply } from "./utils";

console.log(add(3, 5));       // 8
console.log(multiply(3, 5));  // 15

複数の値をカンマで区切る

// shapes.js
class Circle {
  constructor(radius) {
    this.radius = radius;
  }
}

class Square {
  constructor(side) {
    this.side = side;
  }
}

const PI = 3.14;

// コンマで区切って複数の値を渡す
export { Circle, Square, PI };

// main.js
import { Circle, Square, PI } from "./shapes";

const circle = new Circle(5);
console.log(PI);  // 3.14

デフォルトエクスポートと名前つきエクスポートの違い

項目デフォルトエクスポート名前つきエクスポート
構文export default 値export { 値1, 値2 }
個数1ファイルにつき1つまで複数可能
インポートimport 任意の名前 fromimport { 名前 } from
名前の変更自由に変更できる同じ名前が必要
// デフォルトエクスポート
export default User;
import Person from "./User";  // 名前を変えられる

// 名前つきエクスポート
export { add, multiply };
import { add, multiply } from "./utils";  // 同じ名前が必要

いつどちらを使うか

デフォルトエクスポート

  • ファイルに1つの主要なクラスや関数がある場合
  • 例: Userクラス、Animalクラスなど

名前つきエクスポート

  • 1つのファイルに複数の関連する値がある場合
  • 例: ユーティリティ関数、定数の集まりなど

Pythonとの比較

項目PythonJavaScript
エクスポート自動（定義すれば使える）export が必要
インポートfrom モジュール import クラスimport クラス from "./ファイル"
デフォルトなしexport default
# Python
# user.py
class User:
    def __init__(self, name):
        self.name = name

# main.py
from user import User
user = User("太郎")

// JavaScript
// User.js
class User {
  constructor(name) {
    this.name = name;
  }
}
export default User;

// main.js
import User from "./User";
const user = new User("太郎");

JavaScriptでは、明示的に export を書く必要があります。

今日の学びのポイント

  • export: 他のファイルへ渡す
  • export default クラス名: デフォルトエクスポート
  • デフォルトエクスポートは1ファイルにつき1つまで
  • エクスポートとインポートの名前が異なってもOK
  • import: 他のファイルを読み込む
  • import クラス名 from "./ファイル名"（拡張子.jsは省略可）
  • 名前つきエクスポート: export { 値1, 値2 }
  • 名前つきエクスポートは複数可能
  • インポート時も {} で囲む

モジュールを使うことで、コードを複数のファイルに分けて管理し、保守性の高いプログラムを作れます。次は、ファイルの位置関係を示す「相対パス」を学びます。

コメント