script要素にtype="module"を付ける利点
- カテゴリー
- JavaScript／TypeScript >
- JavaScriptの設計
全3回
script要素にtype="module"を指定したときの特徴を解説します。import/exportによるファイル分割、変数のスコープや実行タイミング、ビルドなしでライブラリを読み込む方法を扱います。
最終回 ビルドなしでnpmのパッケージを使う
ESM対応のCDNとimport mapを組み合わせると、ビルド環境なしでnpmのパッケージを読み込めます。ベア指定子の解決やCDNの選び方を見たうえで、バンドラーとの違いと使い分けを整理します。
第2回 モジュールにするだけで得られるメリット
type="module"の利点は、ファイルを分割できることだけではありません。変数の衝突が起きない、DOMContentLoadedを待たなくてよい、strict modeになる、トップレベルでawaitが書けるなど、importを1行も書かなくても得られる特徴を整理します。
第1回 importとexportでファイルを分割する
script要素にtype="module"を指定すると、importとexportでJavaScriptのファイルを分割できるようになります。分割の書き方から、必要な機能だけを取り出す指定、必要になった時点で読み込む動的なimport()までを見ていきます。