導入
JavaScriptのモジュールシステムにおいて、これまでJSONファイルやCSSモジュールを読み込む際は、ビルドツール（WebpackやViteなど）のプラグインに依存するのが一般的でした。しかし、ブラウザの標準仕様として「Import attributes」が登場したことで、ビルドツールなし、あるいは最小限の設定で、外部リソースを型安全かつ明示的にインポートできるようになりました。本記事では、この仕様の基礎から現場での実用的な活用方法までを解説します。
基礎知識
Import attributesとは、モジュールをインポートする際に、そのモジュールの「形式」や「属性」を指定するための構文です。これまでは `import … with { type: ‘json’ }` という形式で、ESモジュールとして読み込めないファイルを識別します。
この仕組みの最大のメリットは、ブラウザがネイティブにファイルを解釈できる点にあります。例えば、JSONファイルをインポートする場合、サーバーから返されるMIMEタイプと、この属性指定が一致しているかをブラウザ側で検証し、セキュリティを高める役割も果たします。
実装/解決策
実装は非常にシンプルです。`import` 文の末尾に `with` キーワードを付け、オブジェクト形式で属性を指定します。現在、最も普及している用途はJSONファイルの読み込みです。
手順は以下の通りです。
1. プロジェクトのビルドツールやブラウザが最新の仕様をサポートしているか確認します。
2. インポート文の末尾に `with { type: ‘json’ }` を記述します。
3. インポートされた変数は、通常のオブジェクトとして即座に利用可能です。
サンプルプログラム
// config.json を読み込み、設定値として利用する例
// withキーワードを使用して、これがJSONであることを明示します
import config from ‘./config.json’ with { type: ‘json’ };
// JSONの中身をコンソールに出力
console.log(‘設定値:’, config.apiUrl);
// 応用：CSSモジュールを読み込む場合（ブラウザサポート状況に注意）
// CSSをスタイルシートオブジェクトとしてインポートし、ドキュメントに適用する
import sheet from ‘./styles.css’ with { type: ‘css’ };
// 読み込んだスタイルを現在のドキュメントに追加
document.adoptedStyleSheets = […document.adoptedStyleSheets, sheet];
// コメント：with属性を指定することで、ブラウザは予期しないMIMEタイプの
// ファイルが読み込まれることを防ぎ、セキュリティリスクを低減します。
応用・注意点
実務で利用する際に必ず押さえておくべきポイントがいくつかあります。
1. ブラウザのサポート状況
Import attributesは比較的新しい仕様です。主要ブラウザ（Chrome, Edge, Safari）では順次サポートが進んでいますが、Firefoxなど一部の環境ではまだ対応していない場合があります。そのため、本番環境では引き続きViteやWebpackといったバンドラーを通すことが推奨されます。
2. セキュリティ（CORS）
JSONファイルを別ドメインからインポートする場合、サーバー側で適切なCORS（Cross-Origin Resource Sharing）設定が必要です。属性を指定していても、サーバーが許可を出していない場合は読み込みに失敗します。
3. 命名の変遷
かつては `assert` というキーワードが使われていましたが、現在は `with` に統一されました。古いチュートリアルや記事では `assert` と書かれている場合がありますが、現在は非推奨であるため、必ず `with` を使用するようにしてください。
この機能を活用することで、ビルド設定の複雑さを軽減し、より標準的なJavaScriptコードでの開発が可能になります。ぜひプロジェクトに取り入れてみてください。