JSON Modules + Import Attributesとは？（ジェイソンモジュールズインポートアトリビューツ）意味・特徴をわかりやすく解説

Q: JSON Modules + Import Attributesとは？

2024年TC39 Stage 4+Chrome/Firefox/Safari全対応。import data from "./data.json" with { type: "json" }+Bundler不要のNative JSON import+ESM Native機能拡充搭載。

概要

JSON Modules + Import Attributesは2024年TC39 Stage 4(GA)+Chrome 123+/Firefox 138+/Safari 17.4+ の対応となったECMAScript Modules新仕様で、import data from "./data.json" with { type: "json" } 構文でJSONファイルを直接ECMAScript Modules でimport可能に。前身の import data from "./data.json" assert { type: "json" } (Assert構文)はStage 2で実装後にDeprecateされ、with 構文に置換された経緯。Bundler(Webpack/Vite/Rollup)経由でのJSON import は従来から可能だったが、Browser Native + Node.js Native + Deno + Bun 全実行環境で標準対応した点が革命的。Bundlerless 開発環境(ESM Native + CDN直接読込等)の現実性が大幅に向上し、Modern JavaScript エコシステムの完成度を1段階引き上げた重要な仕様。CSS Modules・WebAssembly Modules等の他リソースタイプもImport Attributesでサポートされる予定で、ECMAScript Modules統合機構の進化が継続中。

主な特徴・仕組み

with 構文: with { type: "json" } でImport Attribute指定
JSON Type: type: "json" でJSONファイル明示、誤った内容防止
Default Export: JSONはDefault ExportとしてJavaScriptオブジェクト化
Static Analysis可能: Bundlerが事前解析可能、Tree Shaking適用
Dynamic Import対応: await import("./data.json", { with: { type: "json" } })
Subpath Import: import data from "module/data.json" with { type: "json" }
Browser Native: Chrome 123+/Edge 123+/Firefox 138+/Safari 17.4+ 対応
Node.js Native: Node.js 22+ で Native対応(no flag), 18-21は --experimental-json-modules
Deno/Bun対応: Deno 1.42+/Bun 1.0+ で Native対応
TC39 Stage 4: 2024年GA、ES2025標準化済み
Future Extensions: CSS Modules/WebAssembly Modules等 Import Attributes拡張予定

スペック比較表

項目	Import Attributes(with)	Assert(レガシー)	Bundler JSON Import	require('./data.json') (CJS)
構文	with { type: "json" }	assert { type: "json" }	(構文無し、Bundler魔法)	CommonJS require
ESM Native	○ Browser/Node/Deno/Bun	△ レガシー	× Bundler必要	× CJSのみ
Static Analysis	○	△	△	△
Dynamic Import	○	○	×	×
TC39 Stage	Stage 4 GA	Stage 3 廃止	(仕様外)	(CJS仕様)
Browser Support	Chrome 123+ Firefox 138+ Safari 17.4+	Chrome 91-123(Deprecated)	(Browser Native不可)	(Browser Native不可)
Bundler不要	○	○	×	×
Production使用可能	○ 2024年Baseline	× Deprecated	○	○

具体例・対応製品

// Import Attributes 構文(2024年新標準)
import config from "./config.json" with { type: "json" };
import packageInfo from "../package.json" with { type: "json" };

console.log(config.api.endpoint);

// Dynamic Import + with
const i18n = await import(`./locales/${locale}.json`, {
  with: { type: "json" }
});

// 複数Attribute(将来拡張)
import data from "./data.json" with { type: "json", integrity: "sha384-..." };

// Deprecated: Assert 構文(2020-2023)
// import data from "./data.json" assert { type: "json" };  // ← 廃止

<!-- Browser Native ESM + Import Attributes -->
&lt;script type="module">
  import config from "./config.json" with { type: "json" };
  console.log(config);
&lt;/script>

Chrome 123+/Edge 123+: 2024年3月対応、フル機能利用可能
Firefox 138+: 2024年5月対応、Cross-browser対応進む
Safari 17.4+: 2024年3月対応、Apple実装最速組
Node.js 22+: 2024年4月Native対応、no flag
Deno 1.42+/Bun 1.0+: Native ESM環境で先行対応
競合機種: Bundler JSON Import(Webpack/Vite/Rollup)、CommonJS require、Custom JSON.parse(fetch)

自作PCでの選び方・注意点

JSON Modules + Import AttributesはWeb開発者向けの新標準仕様で、jisaku.com の Web Frontend(Next.js 16+TypeScript)では将来的に重要な技術。jisaku.com 現状の Next.js + TypeScript 環境では import data from "./data.json" のBundler魔法でJSON importが可能だが、Bundlerless環境(Deno/Bun + ESM Native)では with 構文必須。本格 Production採用は、Bundler 依存解消(Vite/Webpack/Rollup の不要化)+ Browser Native ESM 配信(CDN直接 Module 読込)を目指す Modern Stack で価値発揮。jisaku.com で具体的な活用ケースは、Static JSON 設定ファイル(i18n locale data・blog metadata等)の Direct Import で、Bundler の重い処理(数十KBのJSON処理)を排除可能。一方、Dynamic Import + JSON Modules で大量の Locale Data 動的 Lazy Load が便利、Code Splitting + with 構文で Bundle Size 最適化が現実的。Browser Support は2024年5月時点でChrome 123+/Firefox 138+/Safari 17.4+ 全Baseline、IE/古いSafari は対応せず。jisaku.com Web Frontend のTarget Browserが Modern Browsers のみなので、Production 採用に Blocker なし。Toolchain は TypeScript 5.3+(Import Attributes構文認識)・ESLint 8.55+(構文Lint対応)・Prettier 3.0+(Format 対応)が必要。

よくある質問（FAQ）

Q1: Bundler環境でも with { type: "json" } 必要？ A: 必須ではないが推奨。Bundler魔法は構文不要で動作するが、Bundler移行(Webpack→Vite→Bundlerless)時の互換性確保のため with 構文記述が安全Path。TypeScript 5.3+はBundler魔法を認識するが、明示的with構文の方が IDE 補完精度高い。

Q2: Assert 構文の既存コード修正は？ A: 全 assert { type: "json" } を with { type: "json" } に置換。Codemod ツール @codemod-com/json-modules で自動変換可能、または手動で sed 置換。Chrome 124+はAssert構文無視するため、修正必須。

Q3: TypeScript で with 構文の型安全は？ A: TypeScript 5.3+ で完全対応、JSONファイルを import すると自動推論+型補完。tsconfig.json の resolveJsonModule: true 設定+TypeScript 5.3+で快適。Type 厳密化は JSON.parse<T>() Wrapper で実現。

まとめ

JSON Modules + Import Attributes = 2024年TC39 Stage 4 GA
with { type: "json" } 構文でJSON Native ESM Import
Browser/Node.js/Deno/Bun全実行環境で標準対応
Chrome 123+/Edge 123+/Firefox 138+/Safari 17.4+ Baseline
Assert構文(レガシー)からの移行必須、Bundlerless開発の鍵

JSON Modules + Import Attributes（ジェイソンモジュールズインポートアトリビューツ）

概要