JSON モジュール スクリプトがベースラインで新たに利用可能に

利用できます。 キーワード: docType:Blog、category:Baseline2025、language:JavaScript

Thomas Steiner

公開日: 2025 年 6 月 18 日

これまで、JavaScript モジュールに JSON ファイルをインポートするには、通常の import ステートメントを使用できるように JSON を JavaScript に埋め込むなどの手順が必要でした。また、fetch() でファイルをダウンロードしてから Response.json() を呼び出す必要もありました。この問題は、JSON モジュール スクリプトとインポート属性により、すべての最新ブラウザで解決されています。

次のサンプルは、JavaScript モジュール スクリプト内から JSON モジュール スクリプトをインポートする方法を示しています。

import astronomyPictureOfTheDay from "./apod.json" with { type: "json" };

const {explanation, title, url} = astronomyPictureOfTheDay;

document.querySelector('h2').textContent = title;
document.querySelector('figcaption').textContent = explanation;
Object.assign(document.querySelector('img'), { src: url, alt: title });

JSON.parse() は不要で、JSON は解析され、import の直後に使用できます。これは、JSON を処理することをブラウザが事前に認識しているため機能します。JSON は、インポート属性 with { type: "json" } で宣言します。

前のリストのコードを使用した JSON モジュールのインポートのライブデモをご覧ください。

モジュール スクリプトの MIME タイプの確認は厳密です。JSON モジュール スクリプトの取得が成功するには、HTTP レスポンスに JSON MIME タイプ（Content-Type: text/json など）が必要です。

ステートメントの with { type: "json" } 部分が省略されている場合、ブラウザは JavaScript モジュール スクリプトをインポートすることを意図していると想定します。HTTP レスポンスの MIME タイプが JavaScript MIME タイプでない場合、取得は失敗します。

JSON モジュール スクリプト処理の詳細については、HTML 仕様をご覧ください。