importを使ったモジュールの読み込みと活用方法をわかりやすく解説

2024.09.13
スポンサーリンク
スポンサーリンク

importの概要

モジュールの読み込み JavaScript予約語

import

概要 importは、JavaScriptのモジュールシステム（ES Modules）を利用して、外部モジュールやファイルからコードを読み込むためのキーワードです。これにより、コードの再利用性や保守性を向上させることができます。

わかりやすく説明 importは「別のファイルから必要な部品を持ってきて使うための仕組み」です。
  • 指定したモジュールから関数、オブジェクト、クラスなどをインポートできます。
  • 名前付きエクスポート、デフォルトエクスポートの両方に対応しています。
  • 動的なインポート（import()）も可能です。

importの基本的な使い方

以下は、importを使用した基本的な例です。

// utils.js
export function add(a, b) {
    return a + b;
}

export const PI = 3.14159;

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

console.log(add(2, 3)); // 5
console.log(PI); // 3.14159
  • exportで公開された関数や変数をimportで読み込むことができます。
  • 指定された名前に一致するシンボルをインポートします。

デフォルトエクスポートの使用

デフォルトエクスポートは、1つのモジュールで1つのエクスポートに使用されます。

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

// main.js
import greet from './utils.js';

console.log(greet("Alice")); // Hello, Alice!
  • デフォルトエクスポートの場合、名前を変更してインポートすることができます。
  • 1つのファイルに複数のデフォルトエクスポートは定義できません。

動的インポート

import()関数を使用することで、動的にモジュールを読み込むことができます。

// 動的インポートの例
async function loadModule() {
    const { add } = await import('./utils.js');
    console.log(add(2, 3)); // 5
}

loadModule();
  • 動的インポートは非同期でモジュールを読み込む際に便利です。
  • コード分割（code splitting）や遅延読み込みに活用されます。

注意点

  • モジュールの対応: importはES Modulesを利用しているため、Node.js環境ではtype: "module"をpackage.jsonに設定する必要があります。
  • ファイル拡張子: モジュールパスには拡張子（.jsなど）を明示的に記述する必要があります。
  • トップレベルでのみ使用可能: importはファイルのトップレベルでのみ使用可能です（動的インポートは例外）。

よくある質問

Q: importとrequireの違いは何ですか？
A: importはES Modulesの構文であり、静的な構文解析をサポートします。一方、requireはCommonJSの構文で、動的にモジュールを読み込むことができます。
Q: importでファイルの拡張子を省略できますか？
A: 一部の環境では可能ですが、拡張子を明示的に指定することが推奨されます。
Q: 動的インポートの主な用途は何ですか？
A: 動的インポートは、コード分割や遅延読み込みに使用され、初期ロード時間を短縮するのに役立ちます。

まとめ

importは、JavaScriptでモジュールを読み込むための主要な構文であり、コードの再利用性や可読性を向上させます。

  • 静的インポートと動的インポートの両方に対応しています。
  • 名前付きエクスポートとデフォルトエクスポートを組み合わせて柔軟に利用できます。
  • モジュールシステムを活用してコードを整理し、効率的な開発を実現しましょう。
スポンサーリンク