導入
JavaScript開発において「コードが巨大化して管理が難しい」「同じような関数を何度も書いている」といった課題はありませんか？これらの問題を解決する鍵がES Modules（ESM）です。export文を活用してコードを適切に部品化（モジュール化）することで、再利用性が高まり、チーム開発での効率も劇的に向上します。
基礎知識
JavaScriptのモジュールとは、プログラムを独立したファイル単位に分割する仕組みです。
・export: 他のファイルから利用可能にするために、変数や関数、クラスなどを公開（エクスポート）するキーワードです。
・import: 公開された機能を取り込むためのキーワードです。
この仕組みにより、必要な機能だけを必要な場所に読み込む「疎結合」な設計が可能になります。
実装/解決策
exportには大きく分けて「名前付きエクスポート」と「デフォルトエクスポート」の2種類があります。
1. 名前付きエクスポート: 複数の機能をエクスポートする場合に使用します。読み込む側は、{}を使って名前を正確に指定する必要があります。
2. デフォルトエクスポート: ファイルごとに1つだけ設定できるメイン機能です。読み込む側は任意の名前を付けられます。
サンプルプログラム
以下の2つのファイルを用意して、モジュールの連携を確認してみましょう。
【mathUtils.js】（関数を定義してエクスポート）
// 名前付きエクスポート：複数の関数を公開します
export const add = (a, b) => a + b;
export const subtract = (a, b) => a – b;
// デフォルトエクスポート：このファイルのメイン機能として公開します
export default function multiply(a, b) {
return a b;
}
【main.js】（定義した関数をインポート）
// 名前付きは{}で囲み、デフォルトは{}なしで読み込みます
import multiply, { add, subtract } from ‘./mathUtils.js’;
console.log(add(5, 3)); // 結果: 8
console.log(subtract(5, 3)); // 結果: 2
console.log(multiply(5, 3)); // 結果: 15
応用・注意点
現場で活用する際のポイントを2点紹介します。
1. バレルファイル（index.js）の活用:
多くのファイルをインポートする際、import文が長くなりがちです。ディレクトリ内に「index.js」を作成し、そこで各モジュールをまとめてexportすることで、読み込み側は「import { A, B } from ‘./utils’」のようにスッキリ記述できます。
2. 循環参照に注意:
モジュールAがBを呼び出し、BがAを呼び出すような「循環参照」が発生すると、予期せぬエラーやundefinedが返される原因になります。依存関係はできるだけ一方向になるよう設計しましょう。
これらの基本を押さえるだけで、あなたのコードはより整理され、長期的なメンテナンスが容易なものになります。ぜひ今日から積極的に活用してください。