1. 導入：なぜESMが重要なのか
JavaScriptで開発をしていると、コードが長くなり、1つのファイルが数千行になってしまうことはありませんか？機能ごとにファイルを分けたとしても、それらをHTMLで読み込む順番を気にしたり、グローバル変数の衝突に悩まされたりするのは大変です。ESM（ECMAScript Modules）を使うと、プログラムを小さな部品（モジュール）として管理し、必要なときに必要な機能だけを読み込むことができます。これにより、コードの見通しが良くなり、保守性が劇的に向上します。
2. 基礎知識：ESMとは何か
ESMとは、JavaScriptの標準的なモジュール機能のことです。「モジュール」とは、特定の機能を持つコードのまとまりを指します。
ESMでは、export（エクスポート）を使って他のファイルで使いたい関数や変数を公開し、import（インポート）を使って他のファイルからそれらを読み込みます。これまでの古いJavaScriptの書き方と違い、ファイル単位でスコープが独立するため、変数の名前が衝突する心配がありません。
3. 実装・解決策
ESMを利用するためには、HTMLファイルでscriptタグを読み込む際に、type=”module”という属性を追加する必要があります。これによって、ブラウザに対して「これはモジュールとして扱う」と伝えることができます。また、プロジェクト全体でESMを利用する場合は、package.jsonファイルに “type”: “module” と記述するのが一般的です。
4. サンプルプログラム
以下の2つのファイルを作成して、同じフォルダに配置してください。
math.js（部品となるファイル）
// exportを付けることで、他のファイルから読み込めるようになります export const add = (a, b) => a + b; export const multiply = (a, b) => a b;
main.js（メインの処理ファイル）
// math.jsから関数をインポートします
import { add, multiply } from './math.js';
console.log(add(5, 3)); // 結果: 8
console.log(multiply(5, 3)); // 結果: 15
HTMLファイルでの読み込み例
<!-- type="module" を忘れずに指定してください --> <script type="module" src="main.js"></script>
5. 応用・注意点
現場で活用する際の注意点は以下の3つです。
1. ローカルサーバーの必要性: ブラウザのセキュリティ制限により、ファイルを直接ダブルクリックで開くとモジュールが読み込めないことがあります。開発時は「Live Server」などの拡張機能を使ってサーバーを立てて確認しましょう。
2. 拡張子は必須: import文を書く際は、ファイル名の最後に必ず「.js」を付けてください（例: ‘./math.js’）。省略するとエラーになります。
3. デフォルトエクスポート: ファイル内で1つだけメインの機能をエクスポートしたい場合は、export defaultを使うのが便利です。ただし、多用しすぎると管理が複雑になるため、名前付きエクスポートを基本にするのがおすすめです。
まずは小さな関数から、ファイルを分けて読み込む練習をしてみてください！