Javascript基礎｜モジュールシステムの名前空間問題

🌀名前空間の問題

モジュールシステムで起こる名前空間の問題は、「import時に名前が衝突する可能性」 のことを指す。

// fileA.js
export function log() {
  console.log("Aから呼ばれた");
}

// fileB.js
export function log() {
  console.log("Bから呼ばれた");
}

// main.js
import { log } from './fileA.js';
import { log } from './fileB.js'; // ←これはエラーになる

上記のfileA.jsとfileB.jsでは、それぞれ同じlogというモジュール名がついている。

そのまま、main.jsで同じ名前で呼び出すと、後者に呼び出されたほうはエラーとなってしまう。

✅衝突を防ぐには①｜ 別名（エイリアス） をつけてimport

as を使って 別名（エイリアス） にしてimportすれば回避可能。

// fileA.js
export function log() {
  console.log("A");
}

// fileB.js
export function log() {
  console.log("B");
}

// main.js
import { log as logA } from './fileA.js';
import { log as logB } from './fileB.js';

logA(); // OK
logB(); // OK

上記のように同じモジュール名をasで異なる名前に変えてimportすると、衝突を回避することが可能となる。

✅衝突を防ぐには②オブジェクトのようにまとめてimport

import * as A from './fileA.js';
import * as B from './fileB.js';

A.log(); // Aから
B.log(); // Bから

⭐️まとめ

命名の衝突はJSに限らず、スコープ管理がある言語全般の課題。下記ルールを覚えておくこと。

• ファイルごとには同名でもOK（＝モジュールスコープ）
• インポート先（モジュールを使用するファイル）では名前は1つだけ使える
• 同じモジュール名の衝突を避けるために名前を変える（エイリアスをつける）

例

logやuserなどの名前はよく使用される。そのため下記のように「何のlogなのか」をわかりやすくして読み込む。

import { log as logFromAdmin } from './admin.ts';
import { log as logFromClient } from './client.ts';

logFromAdmin();  // admin側のログ
logFromClient(); // client側のログ

🔍 名前のつけ方を気をつける