import の書き方

import キーワードを使うと、他のモジュールからエクスポートされた値を読み込むことができます。読み込んだ値は、そのモジュール内で使用できます。

名前付きインポート（Named Import）

名前付きエクスポートされた値を読み込む基本的な方法です。波括弧 {} の中にインポートしたい名前を指定します。

// math.js
export const PI = 3.14159;
export function square(x) {
  return x * x;
}

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

console.log(PI);        // 3.14159
console.log(square(4)); // 16

必要なものだけを選んでインポートできるため、無駄がありません。

デフォルトインポート

デフォルトエクスポートされた値を読み込む方法です。波括弧なしで、任意の名前を付けてインポートします。

// greet.js
export default function(name) {
  return `Hello, ${name}!`;
}

// main.js
import greet from './greet.js';
// または
import sayHello from './greet.js'; // 任意の名前でOK

console.log(greet("田中")); // "Hello, 田中!"

名前付きインポート

import { name } from の形式。エクスポート時の名前と一致させる必要がある。

デフォルトインポート

import name from の形式。任意の名前を付けられる。

名前付きとデフォルトの同時インポート

1つの import 文で、デフォルトエクスポートと名前付きエクスポートを同時に読み込むことができます。

// utils.js
export default function main() { /* ... */ }
export const VERSION = "1.0.0";
export function helper() { /* ... */ }

// main.js
import main, { VERSION, helper } from './utils.js';

デフォルトインポートを先に書き、カンマの後に波括弧で名前付きインポートを続けます。

インポートする名前の変更（as）

as キーワードを使って、インポート時に別名を付けることができます。

import { square as sq, PI as pi } from './math.js';

console.log(sq(4)); // 16
console.log(pi);    // 3.14159

名前の衝突を避けたい場合や、より短い名前を使いたい場合に便利です。

すべてをインポート（名前空間インポート）

* as を使うと、モジュールのすべてのエクスポートを1つのオブジェクトとしてインポートできます。

import * as math from './math.js';

console.log(math.PI);        // 3.14159
console.log(math.square(4)); // 16

インポートのパス指定

インポート元のパスは、相対パスまたは絶対パスで指定します。

// 相対パス
import { func } from './utils.js';
import { func } from '../lib/utils.js';

// パッケージ名（node_modules から）
import React from 'react';
import { useState } from 'react';

ブラウザの場合

相対パスには必ず ./ や ../ を付ける必要があります。拡張子も必要です。

バンドラー使用時

拡張子を省略できる場合が多く、node_modules からの読み込みも自動解決されます。

インポートの注意点

import 文はモジュールのトップレベルにのみ記述でき、静的に解析されます。

// エラーになる例
if (condition) {
  import { func } from './utils.js'; // SyntaxError
}

function setup() {
  import { data } from './data.js'; // SyntaxError
}

条件付きでインポートしたい場合は、動的インポート import() を使用します。