JavaScript/import

import

import は、JavaScript においてモジュールをインポートするためのキーワードです。モジュールシステムを使用することで、コードの分割や再利用が容易になり、依存関係の管理が簡潔になります。ECMAScript 6（ES6）以降、import は標準の構文として導入され、JavaScript におけるモジュール機能の中心となっています。

構文

モジュール全体のインポート

import * as モジュール名 from 'モジュールのパス';

この構文では、モジュール全体をインポートし、そのモジュールのエクスポートされたすべてのコンテンツを指定した名前空間にまとめてインポートします。

モジュールの特定の要素のインポート

import { エクスポート名1, エクスポート名2 } from 'モジュールのパス';

この構文では、モジュールから特定のエクスポートされた要素だけをインポートします。複数の要素をインポートすることができます。

エクスポート名の変更（別名）

import { エクスポート名1 as 別名1, エクスポート名2 as 別名2 } from 'モジュールのパス';

エクスポートされた要素に別名を付けてインポートすることができます。

モジュールのデフォルトインポート

import デフォルト名 from 'モジュールのパス';

モジュールがデフォルトエクスポートを持っている場合、そのデフォルトエクスポートをインポートするための構文です。

モジュールのデフォルトエクスポートと特定の要素を同時にインポート

import デフォルト名, { エクスポート名1, エクスポート名2 } from 'モジュールのパス';

デフォルトエクスポートと名前付きエクスポートの両方を同時にインポートすることができます。

モジュールの動的インポート

import('モジュールのパス')
  .then((モジュール名) => {
    // モジュールの利用
  })
  .catch((error) => {
    console.log('エラー:', error);
  });

import() 関数を使うことで、モジュールを動的にインポートできます。動的インポートは、非同期にモジュールを読み込み、モジュールの内容が利用可能になった後に実行する処理を指定できます。

使用例

モジュール全体のインポート

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

console.log(math.add(2, 3));  // add 関数を呼び出し

この例では、math.js からすべてのエクスポートを math という名前空間でインポートし、そこから関数を使用しています。

特定の要素のインポート

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

console.log(add(2, 3));      // add 関数を呼び出し
console.log(subtract(5, 3)); // subtract 関数を呼び出し

この例では、math.js から add と subtract 関数のみをインポートしています。

デフォルトエクスポートのインポート

import Calculator from './calculator.js';

const calc = new Calculator();
console.log(calc.add(2, 3));  // Calculator クラスを使用

calculator.js におけるデフォルトエクスポートをインポートし、そのクラスを使っています。

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

import Calculator, { add, subtract } from './calculator.js';

console.log(add(2, 3));        // add 関数を呼び出し
console.log(subtract(5, 3));   // subtract 関数を呼び出し
const calc = new Calculator();
console.log(calc.multiply(2, 3)); // Calculator クラスを使用

この例では、デフォルトエクスポートと名前付きエクスポートを同時にインポートしています。

動的インポート

const loadMathModule = async () => {
  const math = await import('./math.js');
  console.log(math.add(2, 3));
};

loadMathModule();

この例では、math.js を動的にインポートし、インポート後に関数を使用しています。

注意点

• パスの指定: モジュールのパスは相対パスや絶対パスで指定することができます。拡張子（.js）を省略することはできませんが、HTML や Webpack などのツールを使う場合には省略できることがあります。
• 静的インポートと動的インポート: 静的インポート（import { ... } from ...）は、コンパイル時にモジュールを解決します。動的インポート（import()）は、実行時にモジュールを読み込みます。動的インポートは非同期で行われ、Promise を返します。

関連項目

• export
• default
• モジュール

参考

• MDN Web Docs: import 文
• ECMA-262: import 文