JS Modules インポート

Volardev 編集部 April 18, 2026

1. インポート (Import)

モジュールのインポート（import）方法は、エクスポート側が名前付きエクスポート（Named Exports）か、デフォルトエクスポート（Default Exports）かに応じて、大きく2つのパターンに分かれます。

名前付きインポートは、波括弧 { } を使用して記述します。

import { name, age } from "./person.js";

対して、デフォルトエクスポートのインポートでは波括弧を使用しません。

import message from "./message.js";

名前付きインポート（Named Imports）は、モジュール内の名前付きエクスポートに対応するものです。これにより、モジュールから1つ以上の明示的に命名されたバリアブル（変数）やファンクション（関数）を個別にインポートできます。

名前付きインポートでは、必ず波括弧 { } で囲み、エクスポート名と正確に一致させる必要があります。

person.js ファイルから名前付きエクスポートである name と age をインポートする例：

import { name, age } from "./person.js";

math.js ファイルから名前付きエクスポートである add、subtract、および PI をインポートする例：

import { add, subtract, PI } from './math.js';

import { addd } from './math.js'; // ❌ エラー（名前の不一致）

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

import { add as addition } from './math.js';

デフォルトインポート（Default Import）は、モジュールからメインとなるエクスポート値（export default でエクスポートされたもの）を取り込むための手法です。これは、デフォルトエクスポートと対になる機能です。

デフォルトインポートの場合、波括弧を使用せずに、インポート側で任意の名前を付けることができます。

message.js ファイルからデフォルトエクスポートをインポートする例：

// 'text' という任意の名前でインポート
import text from "./message.js";

// 'message' という名前でインポート
import message from "./message.js";

import message from "./message.js";

import text from "./message.js";

1つのモジュール内で、メインとなるファンクションといくつかのヘルパー・ファンクションが混在して提供されている場合、これらを同時にインポートできます。

モジュールファイル (parser.js):

export default function parse() { ... }

export function validate() { ... }
export function format() { ... }

モジュールスクリプト:

import parse, { validate, format } from './parser.js';

* シンボル（ワイルドカード）を使用すると、モジュール内のすべての名前付きエクスポートを単一のオブジェクトとしてインポートできます。

person.js からすべての名前付きエクスポートをインポートする場合：

// すべての名前付きエクスポートを 'person' オブジェクトとしてインポート
import * as person from "./person.js";

math.js からすべての名前付きエクスポートをインポートする場合：

// すべての名前付きエクスポートを 'math' オブジェクトとしてインポート
import * as math from "./math.js";