メインコンテンツまでスキップ

属性をインポート

· 約4分
Shu-yu Guo ([@_shu](https://twitter.com/_shu))

以前は

V8はv9.1でインポートアサーション機能を提供しました。この機能により、モジュールインポート文にassertキーワードを使用して追加情報を含めることが可能になりました。この追加情報は現在、JavaScriptモジュール内でJSONやCSSモジュールをインポートするために使用されています。

インポート属性

その後、インポートアサーションはインポート属性へと進化しました。この機能の目的は変わらず、モジュールインポート文に追加情報を含めることです。

最も重要な違いは、インポートアサーションがアサート専用の意味を持っていたのに対し、インポート属性はより緩やかな意味を持つようになったことです。アサート専用の意味は、追加情報がモジュールがどのようにロードされるかには影響を与えず、ロードされるかどうかにのみ影響を与えるという意味です。例えば、JSONモジュールは常にそのMIMEタイプによってJSONモジュールとしてロードされ、assert { type: 'json' }という条件は、リクエストされたモジュールのMIMEタイプがapplication/jsonではない場合にのみロードを失敗させることができます。

しかしながら、アサート専用の意味には致命的な欠点がありました。ウェブでは、リソースの種類に応じてHTTPリクエストの構造が異なります。例えば、AcceptヘッダーはレスポンスのMIMEタイプに影響を与え、Sec-Fetch-Destメタデータヘッダーはウェブサーバがリクエストを受理するか拒否するかに影響を与えます。インポートアサーションではモジュールをどのようにロードするかに影響を与えることができなかったため、HTTPリクエストの構造を変更できませんでした。また、要求されるリソースの種類は利用されるコンテンツセキュリティポリシーにも影響しますが、インポートアサーションは正しくウェブのセキュリティモデルと連携することができませんでした。

インポート属性はアサート専用の意味を緩め、属性がモジュールのロード方法に影響を与えることを許可します。言い換えれば、インポート属性は適切なAcceptおよびSec-Fetch-Destヘッダーを含むHTTPリクエストを生成することができます。新しい意味に合わせるために、旧assertキーワードはwithに更新されました:

// main.mjs
//
// 新しい 'with'構文。
import json from './foo.json' with { type: 'json' };
console.log(json.answer); // 42

動的なimport()

動的なimport()も同様に、withオプションを受け入れるよう更新されました。

// main.mjs
//
// 新しい 'with'オプション。
const jsonModule = await import('./foo.json', {
with: { type: 'json' }
});
console.log(jsonModule.default.answer); // 42

withの利用可能性

インポート属性はV8 v12.3でデフォルトで有効化されています。

assertの廃止予定と最終的な削除

assertキーワードはV8 v12.3で廃止され、v12.6で削除される予定です。代わりにwithを使用してください!assert句の使用は、コンソールに警告を出し、withの使用を推奨するメッセージを表示します。

インポート属性のサポート