mjsファイルの概要
mjsはJavaScriptモジュール(ESM)の拡張子で、ECMAScript 6(ES6)で導入された標準的なモジュールシステムを利用する際に使用されます。従来のCommonJS(.js)と異なり、import/export構文を自然に記述でき、ブラウザやNode.jsの両方で統一的に扱える点が特長です。
ESMとCommonJSの違い
ESMは静的解析が可能で、モジュールの依存関係が実行前に確定します。そのため、ツリーシェイキングや先読み(preloading)が容易になり、パフォーマンス向上が期待できます。対してCommonJSは動的にrequireする方式で、実行時に評価されるため柔軟性は高いものの、最適化が難しいという欠点があります。
Node.jsでのmjs利用方法
Node.jsでは、package.jsonに “type”: “module” を設定するか、ファイル拡張子を .mjs にすることでESMモードが有効になります。これにより、以下のようにモジュールをインポートできます。
“`js
import { readFile } from ‘fs/promises’;
const data = await readFile(‘./data.txt’, ‘utf8’);
“`
ブラウザでのmjs活用
ブラウザ側では、scriptタグに type=”module” を指定するだけで mjs ファイルを直接読み込めます。モジュールは自動的に CORS ポリシーに従い、同一オリジンまたは許可されたオリジンから取得されます。
実務での注意点
1. 拡張子の統一: プロジェクト全体で .mjs か .js(type:module)を統一し、混在を避ける。
2. 循環依存の回避: 静的解析が前提になるため、循環参照があるとエラーになることがある。
3. デフォルトエクスポートと名前付きエクスポートの使い分け: 読みやすさと保守性を考慮し、必要に応じて適切に選択する。
まとめ
mjs はモダンな JavaScript 開発において標準的なモジュール形式を提供し、Node.js とブラウザの両方でシームレスに利用できます。ESM の特性を活かすことで、コードの可読性・保守性・パフォーマンスが向上します。導入時はプロジェクト設定と依存関係の管理に注意しながら、段階的に移行することをおすすめします。