Newly available 主要ブラウザの最新版で対応済み。古いブラウザが対象外なら使用可能。

JSON import attributes

JSON import attributes を使うと、JSON ファイルをモジュールとして静的にインポートできます。バンドラーのツリーシェイキングも有効です。

JSONES2025

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
trailing commas in dynamic import
91
91
138
15
91
15
ステートメント
import attributes type json

`with {type: 'json'}`
123
123
138
17.2
123
17.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT 
import config from './config.json' with { type: 'json' };

console.log(config.apiUrl);

実務での使いどころ

  • JSON import attributes の活用

    JSON ファイルを JavaScript モジュールとしてインポートする機能。with { type: 'json' } 構文を使用。

注意点

  • 古いブラウザ（IE等）では対応していない。対象ブラウザを確認すること。

アクセシビリティ

  • JavaScript による動的更新時は、aria-live リージョンで変更をスクリーンリーダーに通知する。