メインコンテンツまでスキップ

インポートマップ

ESMスクリプトを使用すると、Import Mapsを使ってプロジェクト内のモジュール指定子を解決する方法を制御できます。Import Mapsを使用すると、エイリアスを定義したり、モジュールパスを再マッピングしたりできるため、特に共有ライブラリや内部ツールを扱う際に、よりクリーンで柔軟なインポートを作成できます。

例えば、次のように記述する代わりに:

import config from '../../../utils/config.js';

インポートマップを使用して、これを次のように簡略化できます:

import config from 'utils/config.js';

インポートマップを作成する​

設定パネルで「Import Map」セクションを見つけます。「Create Default」をクリックすると、エディターがアセットレジストリに新しいインポートマップを作成し、それをプロジェクトに割り当てます。

コードエディターでファイルを開きます。例えば「/utils/math.mjs」のようなモジュールを「math」にマッピングしたい場合、インポートマップを次のように更新します:

{
  "imports": {
    "math": "./utils/math.mjs"
  }
}

これでコード内で import x from "math" を呼び出すと、あなたのモジュールに解決されます。

ヒント

Import Mapsはnpmパッケージのショートハンドとしても使用できます。例えば、"tweenjs": "https://esm.sh/tween.js"を追加すると、CDN上のtween.jsに解決されます。

知っておくべきこと​

  • Import MapsはESMビルドにのみ適用されます。クラシックスクリプト単体ではサポートされていません。
  • マップで定義するパスは、プロジェクトに存在するファイルと一致するか、有効な外部URLを指している必要があります。
  • 一度にアクティブにできるインポートマップは1つだけです。
  • 外部モジュール（例：CDNから）を使用している場合、それらがESM互換であり、CORSでアクセス可能であることを確認してください。

Import Mapsを使用するタイミング​

  • 大規模プロジェクトで脆弱な相対パスを避けるため。
  • 共有ユーティリティのためにクリーンでエイリアスベースのパスを作成するため。
  • サードパーティの外部モジュールをローカルにインストールせずに参照するため。

インポートマップを使用すると、特にプロジェクトが成長するにつれて、コードベースを整理し、保守を容易に保つのに役立ちます。