| title | JavaScriptのImport AttributesでJSONとCSSをimportする | |||||
|---|---|---|---|---|---|---|
| emoji | 📝 | |||||
| type | tech | |||||
| topics |
|
|||||
| published | true | |||||
| createdAt | 2025-03-28 | |||||
| updateAt | 2025-03-28 |
こんにちは、ハチミツです。
私はAstroとPages CMSを組み合わせて自身のブログを構築しています。Pages CMSではMarkdownやJSON、YAMLを扱えますが、ブログの設定をTypeScriptで書いている関係で設定をPages CMSで扱えませんでした。その解決策としてJSONを活用する中で発見したJavaScriptの新機能を共有します。
- JavaScriptでJSONやCSSを扱う開発者
- モダンなJavaScript機能に興味がある人
const res = await fetch("https://json.test/test.json");
const JSONobj = await res.json();
import JSONobj from "https://json.test/test.json" with { type: "json" };
// または
const JSONobj = await import("https://json.test/test.json", { with: { type: "json" } });
const res = await fetch("https://css.test/test.css");
const sheet = new CSSStyleSheet();
await sheet.replace(await res.text());
document.adoptedStyleSheets = [ sheet ];
import sheet from "https://css.test/test.css" with { type: "css" };
// または
const sheet = await import("https://css.test/test.css", { with: { type: "css" } });
document.adoptedStyleSheets = [ sheet ];
Import Attributesを使用すると、JavaScriptモジュールと同様の方法でJSONやCSSをインポートできます。withキーワードでタイプを指定します。
Node.jsでもJSONのimportに対応しており、ローカルファイルにも使用できます。設定ファイルの読み込みなど、今まで長く書いていたコードが短くなることでしょう。
ダイナミックインポートにも対応しているため、APIリクエストなどにも活用できます。
async function fetchAPI(num) {
return import(`https://api.test/v1/users/${num}.json`, { with: { type: "json" } });
}ただし、この機能はFirefoxでまだ実装されていません（2025/2/22現在）。ブラウザでの本番利用は、もう少し様子を見ましょう。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import/with