導入
フロントエンド開発において、モジュール化は保守性の高いコードを書くための必須スキルです。しかし、複数の名前付きエクスポートを個別にインポートすると、import文が非常に長くなり、可読性が低下することがあります。そんな時に役立つのが「Namespace import（名前空間インポート）」です。本稿では、コードをスッキリ整理し、名前の衝突を防ぐためのNamespace importの活用法を解説します。
基礎知識
Namespace importとは、モジュール内のすべてのエクスポートを、一つのオブジェクトとしてまとめてインポートする手法です。構文は import as 名前 from ‘モジュールパス’ と記述します。
通常、モジュールから特定の関数や定数を取り出す際は import { funcA, funcB } from ‘./utils’ のように書きますが、Namespace importを使うと import as Utils from ‘./utils’ となり、Utils.funcAのようにドット演算子でアクセスできるようになります。これにより、どのモジュール由来の機能なのかが明示されやすくなります。
実装/解決策
Namespace importは、特にユーティリティ関数や定数をグループ化して管理したい場合に非常に有効です。
1. エクスポート側で複数の関数や値を定義する。
2. インポート側で as を使い、一つの名前空間にまとめる。
3. 呼び出し時に「名前空間.関数名」として利用する。
サンプルプログラム
以下は、数学的な計算処理をまとめたモジュールをインポートする例です。
// mathUtils.js (エクスポート側)
export const PI = 3.14;
export const add = (a, b) => a + b;
export const multiply = (a, b) => a b;
// main.js (インポート側)
// as を使うことで、mathUtils内の全てを ‘MathLib’ という名前空間に格納します
import as MathLib from ‘./mathUtils.js’;
console.log(MathLib.PI); // 出力: 3.14
console.log(MathLib.add(5, 10)); // 出力: 15
console.log(MathLib.multiply(2, 3)); // 出力: 6
// メリット: どのモジュールから来た関数か一目瞭然になります
// また、インポート文が1行で済むため、ファイル先頭が整理されます
応用・注意点
Namespace importを使う上で注意すべき点は「Tree Shaking（不要なコードの削除）」への影響です。WebpackやViteなどのバンドラは、使用していないコードを自動的に削る機能を持っていますが、Namespace importで巨大なオブジェクト全体を読み込むと、最適化が効きにくくなる場合があります。
また、defaultエクスポートがある場合、Namespace import内では「default」というキーの中に格納されます。これを取り出す際は MathLib.default と書く必要があり、少し直感的ではありません。
現場では、「機能群（ユーティリティなど）」をまとめる際にはNamespace importを使い、単一のクラスやコンポーネントを扱う際には名前付きインポートを使い分けるのが、最もスマートで安全な設計と言えるでしょう。