0Pricing
HTML Academy · レッスン

ESモジュールスクリプト type=module

type=moduleでJavaScriptをESモジュールとして読み込みます

「ESモジュールスクリプト type=module」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

ES Modules とは

ESモジュールとは、import宣言とexport宣言を使用するJavaScriptファイルです。モジュールには独自のスコープ（グローバル汚染がないこと）、デフォルトでのstrict mode、明示的な依存関係があり、スクリプトタグの順序に関する数十年来の問題を解決します。

モジュール用scriptタグ

<script type="module" src="app.js">は、そのファイルがモジュールであることをブラウザーに伝えます。ブラウザーはimportを解析し、依存関係を並列で取得して、依存関係グラフ全体のダウンロードとコンパイルが完了してからエントリーモジュールを1回だけ実行します。

<script type="module" src="app.js"></script>

モジュールはdeferされる

モジュールスクリプトは、deferが指定された場合と同じように動作します。HTMLの解析と並行してダウンロードされ、解析後に宣言順で実行されます。<script type="module">は、ページの読み込みをブロックせず、どこにでも（<head>内にも）配置できます。

importではspecifierを使用する

import文では、相対URL（./utils.js）、絶対URL（https://cdn.example.com/lib.js）、またはベア名（lodash）のいずれかのspecifierを使用します。ブラウザーはベア名がどのファイルに対応するかを認識できないため、ベア名にはimport map（次で説明します）が必要です。

// app.js
import { sum } from "./utils.js";
import { render } from "https://esm.sh/preact";
console.log(sum(1, 2));

ファイル拡張子は必須

ブラウザーはimportのspecifierに.jsを自動的に追加しません。import "./utils"は失敗し、import "./utils.js"は成功します。BundlerやNodeはより柔軟な場合がありますが、ブラウザーは厳密なので、拡張子を明示的に記述してください。

CORSが必要

モジュールは、同一オリジンの場合でも常にCORSを使用して取得されます。クロスオリジンのモジュールファイルは適切なAccess-Control-Allow-Originヘッダーを返す必要があり、そうでなければimportは失敗します。ほとんどのCDN（esm.sh、jsdelivr、unpkg）は、最初から正しく設定されています。

トップレベルawait

モジュールでは、トップレベルでawaitを使用できます。async関数でラップする必要はありません。const data = await fetch("/api").then(r => r.json())のように記述できます。モジュールの利用側は、トップレベルawaitが解決するまで実行を待機します。

// data.js
export const config = await fetch("/config.json").then(r => r.json());
// app.js (waits for data.js)
import { config } from "./data.js";
console.log(config);

モジュールはシングルトン

モジュールは、他のモジュールから何回importされたかにかかわらず、セッションごとに正確に1回だけ評価されます。exportオブジェクトは共有されるため、すべての利用側が同じインスタンスを参照します。そのため、モジュールは設定オブジェクトや状態ストアなどのシングルトンを共有するのに適しています。

インラインモジュール

モジュールはインラインで記述することもできます。<script type="module">import x from "./y.js"; ...</script>のように記述します。ブートストラップコードや実験には便利ですが、外部ファイルのほうがデバッグやキャッシュが容易です。

従来環境向けフォールバックのnomodule

<script type="module">と<script nomodule src="legacy.js">を組み合わせます。モダンブラウザーはモジュールを実行してnomoduleスクリプトを無視し、従来のブラウザーはnomoduleスクリプトを実行してモジュールを無視します。すべてのアプリをESMへ移行する際に使用します。

エラーとimportの失敗

importが失敗すると（404、CORS、構文エラーなど）、例外が発生し、モジュールグラフ全体が実行されなくなります。Networkパネルで失敗したモジュールリクエストを確認し、Consoleで実際のimportエラーメッセージを確認してください。

理解度チェック

モジュールスクリプトは、指定していないのに、なぜdeferが設定された場合と同じように動作するのでしょうか。

まとめ

<script type="module">は、import/export宣言を使用して依存関係グラフを解決するstrict modeのファイルであるESモジュールを読み込みます。モジュールはデフォルトでdeferされ、明示的なファイル拡張子を必要とし、CORSで取得され、シングルトンとして評価され、トップレベルawaitをサポートします。従来環境向けのフォールバックにはnomoduleを使用し、importが失敗したときはファイル拡張子の不足に注意してください。

よくある質問

「ESモジュールスクリプト type=module」レッスンは無料ですか？

はい。「ESモジュールスクリプト type=module」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「ESモジュールスクリプト type=module」で何を学びますか？

type=moduleでJavaScriptをESモジュールとして読み込みます ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「ESモジュールスクリプト type=module」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ESモジュールスクリプト type=module
  2. Import Maps importmap
  3. モジュール内の動的import()
  4. Module Federationの基礎
← HTML Academyに戻る