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 { type: "json" } でImport Attribute指定type: "json" でJSONファイル明示、誤った内容防止await import("./data.json", { with: { type: "json" } })import data from "module/data.json" with { type: "json" }| 項目 | 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 -->
<script type="module">
import config from "./config.json" with { type: "json" };
console.log(config);
</script>
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 対応)が必要。
Assert構文(レガシー)との違い: Assert(2020-2023)は assert { ... } 構文、Stage 3 で実装後にWeb Compatibility Issue 発生し Stage 4 で with 構文に変更。Assert構文はChrome 91-123/Firefox 86以降でDeprecation Warning、2024年5月時点で実用不可。
Bundler JSON Importとの違い: Bundler経由は構文無しの Bundler魔法、Native は with 構文明示。Bundler は事前 Build 必要、Native は ESM Runtime で動作。Bundlerless環境(Deno/Bun)では Native のみ動作。
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 で実現。