⌛

100秒で理解するESM（ESModules）

2024/03/25に公開

ESMとは

まず、ESMの定義から見てみましょう。
JavaScript Primer には、以下のように書かれていました。

ECMAScriptモジュールは、ES2015で導入されたJavaScriptファイルをモジュール化する言語標準の機能です。

jsprimer - [ES2015] ECMAScriptモジュール

この定義を見て、「2015年から？」「それまではどうしてたの？」って思いますよね（私はそう思いました。）実は、ESMが登場するまでは「CommonJS modules」という、標準ではない仕様が使われていたのです。

CommonJSについては、以下で分かりやすく解説動画を作成したので、ぜひご覧ください！

CommonJSでは、「require」や「module.exports」というキーワードを作って、モジュールを扱うことが可能です。

しかし、CommonJSのモジュールは、ブラウザで直接使うことができないという問題がありました。というのも、CommonJSの仕様は、もともとサーバーサイドで使われることが想定されていたからです。

そのため、ブラウザでWebアプリケーションを作るときは、「モジュールバンドラー」を使ってCommonJSモジュールを一度バンドルしてから使う必要がありました。

そこで、この問題を解決するために、ESMが生まれました。
言語標準の機能なので、ESMはブラウザでもモジュールを扱うことができます。つまり、モジュールバンドラーを使わずに、直接モジュールを読み込むことができるようになったのです。

最後に、ESMでモジュールを扱う方法について紹介します。
ESMでは、「import」と「export」というキーワードを使ってモジュールを読み込んだり、公開したりできます。

ただ、注意点が1つあります。ESMを使うときは、<script> タグに type="module" という文字を必ず指定する必要があります。

こうすることによって、ブラウザがESM形式で書かれたファイルをモジュールとして認識してくれるようになります。

この記事で書かれている内容は、以下の動画でも解説しています。アニメーションでわかりやすく解説しているので、ぜひ見てみてください！