import.meta の使い方

import.meta は、現在のモジュールに関するメタ情報を提供するオブジェクトです。モジュールの URL や環境固有の情報にアクセスできます。

import.meta.url

最もよく使われるプロパティで、現在のモジュールの URL を文字列で返します。

// ブラウザの場合
console.log(import.meta.url);
// "https://example.com/scripts/main.js"

// Node.js の場合
console.log(import.meta.url);
// "file:///home/user/project/main.js"

同じディレクトリのファイルパスを取得

import.meta.url を使って、モジュールと同じディレクトリにあるファイルへのパスを構築できます。

// 同じディレクトリの data.json へのパス
const dataUrl = new URL('./data.json', import.meta.url);

// ブラウザで fetch する
const response = await fetch(dataUrl);
const data = await response.json();

// Node.js でファイルを読み込む
import { readFileSync } from 'fs';
import { fileURLToPath } from 'url';
import { dirname, join } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const configPath = join(__dirname, 'config.json');
const config = JSON.parse(readFileSync(configPath, 'utf-8'));

dirname と filename の代替

CommonJS では __dirname と __filename が使えましたが、ES Modules では使えません。import.meta.url で代替できます。

CommonJS

__dirname と __filename がグローバルで使える

ES Modules

import.meta.url から自分で導出する必要がある

// ES Modules で __dirname と __filename を再現
import { fileURLToPath } from 'url';
import { dirname } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

import.meta.resolve()

モジュール指定子を完全な URL に解決するメソッドです。

// パッケージの URL を解決
const lodashUrl = import.meta.resolve('lodash');
console.log(lodashUrl);
// "file:///path/to/node_modules/lodash/lodash.js"

// 相対パスを解決
const utilsUrl = import.meta.resolve('./utils.js');

環境固有のプロパティ

実行環境によって、追加のプロパティが提供される場合があります。

Vite の場合

import.meta.env で環境変数にアクセスできます。import.meta.hot で HMR（Hot Module Replacement）を制御できます。

Node.js の場合

import.meta.dirname と import.meta.filename が追加される予定です（Node.js 20.11+ でサポート）。

// Vite での環境変数アクセス
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE); // "development" or "production"

// HMR の処理
if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    // モジュールが更新された時の処理
  });
}

ブラウザでの使用例

ブラウザ環境で、モジュールに関連するアセットを読み込む例です。

// コンポーネントと同じディレクトリの画像を読み込む
const imageUrl = new URL('./icon.png', import.meta.url).href;

// Web Worker を同じディレクトリから読み込む
const workerUrl = new URL('./worker.js', import.meta.url);
const worker = new Worker(workerUrl, { type: 'module' });

注意点

import.meta はモジュール内でのみ使用可能（通常のスクリプトでは使えない）

プロパティは実行環境によって異なる

静的な情報なので、実行時に変更することはできない

import.meta を活用することで、モジュールの位置に依存した処理を柔軟に記述できます。