withキーワードを使用したJSONモジュールのインポート
ESMでwithキーワードを利用してJSONをインポートする方法について解説します。Import Attributeという属性を利用して、JSONモジュールを安全にJavaScriptから利用できるようになりました。
はじめに
ESMモジュールのインポート時に、withキーワードを利用してJSONモジュールをインポートする機能がBaseline 2025に追加されました。
この機能を利用することで、JSONファイルを安全にインポートし、JavaScriptコード内で直接利用できるようになります。
この記事では、機能の元となるImport Attributeの概要と、JSON Import Attributeの使い方について解説します。
Import Attribute
Import Attributeは、ESMモジュールのインポート時に、モジュールの形式に関する情報をランタイムに伝えるための属性です。
import json from './data.json' with { type: 'json' };
import('./data.json', { with: { type: 'json' } });withキーワードを使って、モジュールの形式を指定します。
構文に中括弧{}が使われているのは、以下のような理由があります。
- 多くのユーザーがオブジェクトの構文に慣れている
- 末尾のコンマが許可されるため編集が簡単
- 複数行に分割するときに終わりを明確にするため
現在多くの場所でサポートされているモジュール形式は、jsonだけです。Baseline 2025に追加された構文もjsonだけになります。
JSON Import Attribute
with: { type: 'json' }を付けて、インポートされたデータをJSONとして解釈するように伝えることができます。
JSONと伝えた状態で、JSON以外のファイルをインポートしたときに下記のようなエラーが発生します（下の引用はChromeでtext/htmlなものをインポートしたとき）。
Failed to load module script: Expected a JSON module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
JSON Import Attributeをつけない場合は、エラーを発生させずにインポートした結果をそのまま利用してしまいます。 JavaScriptがインポートされたときは、構文解析及びに実行まで行うので、セキュリティ上のリスクになります。
上記の例では、取得ボタンを押すとインプットテキストをJSON Import Attribute付きインポートします。 デフォルトの入力はJSONを返すので問題なくインポートできますが、他の形式を入力するように変えるとコンソールにエラーが発生します。
おわりに
JSON Import Attributeを紹介しました。この機能を利用することで、ESMモジュールのインポート時に、その対象がJSONであることをランタイムに伝えられるような機能でした。
無秩序にファイルのインポートを行うのは危険ですので、Import Attributeを使って、JSONファイルであることを明示的に伝えるようにしましょう。