JavaScript/Universal Module Definition

UMDは、Universal Module Definition（ユニバーサルモジュール定義）の略で、複数のモジュールシステムに対応するモジュールを定義する方法です。UMDパターンを使用することで、モジュールをどの環境でも動作させることができ、特定のローダーや環境に依存しない汎用的なモジュールを作成できます。

具体的には、UMDは以下の3つのモジュールローダーに対応します：

CommonJS（Node.jsで使用されるモジュールシステム）
Asynchronous Module Definition（ブラウザ向けの非同期モジュール定義）
グローバル変数（ブラウザのグローバルスコープに直接モジュールを定義）

UMDの構造

UMDモジュールの典型的な構造は、以下のようになります：

(function(root, factory) {
  if (typeof exports === 'object' && typeof module !== 'undefined') {
    // Node.js / CommonJS
    module.exports = factory();
  } else if (typeof define === 'function' && define.amd) {
    // AMD (Asynchronous Module Definition)
    define(factory);
  } else {
    // グローバル（ブラウザのグローバルスコープ）
    root.myModule = factory();
  }
}(this, function() {
  // モジュールの実装
  var myModule = {
    sayHello: function() {
      console.log("Hello, world!");
    }
  };
  return myModule;
}));

解説

IIFE (Immediately Invoked Function Expression)
- これは即時実行関数で、モジュールのスコープを閉じるために使用します。root はグローバルオブジェクト（ブラウザなら window、Node.jsなら global）です。
CommonJS 対応
- typeof exports === 'object' && typeof module !== 'undefined' という条件で、CommonJS（Node.js）環境を検出します。Node.jsで実行される場合、モジュールは module.exports に割り当てられます。
AMD 対応
- typeof define === 'function' && define.amd という条件で、AMD（非同期モジュール定義）環境を検出します。ブラウザでAMDローダー（例えばRequireJS）が使われる場合、define 関数が呼び出され、モジュールが定義されます。
グローバル変数対応
- それ以外の場合、ブラウザのグローバルスコープ（window）にモジュールを直接割り当てます。

UMDのメリット

互換性: UMDを使用することで、同じコードをNode.js、ブラウザ、AMDローダーで動作させることができます。
シンプル: モジュールの定義を1つのコードブロックにまとめることができ、複数の環境を意識せずにコードを書くことができます。
柔軟性: 特定のモジュールローダーに依存することなく、モジュールをどの環境でも動作させることができます。

UMDの使用例

以下は、UMDパターンを使った簡単なライブラリの例です。

(function(root, factory) {
  if (typeof exports === 'object' && typeof module !== 'undefined') {
    module.exports = factory();
  } else if (typeof define === 'function' && define.amd) {
    define(factory);
  } else {
    root.myLibrary = factory();
  }
}(this, function() {
  var myLibrary = {
    add: function(a, b) {
      return a + b;
    },
    subtract: function(a, b) {
      return a - b;
    }
  };
  return myLibrary;
}));

このコードは、Node.jsでもブラウザでも使用できるライブラリを作成します。Node.jsでは require() を使ってインポートし、ブラウザではグローバル変数として myLibrary を使用できます。

まとめ

UMD（Universal Module Definition）は、Node.js、ブラウザ、AMDなど異なるモジュールローダーに対応したモジュールを作成するためのパターンです。このパターンを使用することで、複数の環境で同じモジュールを使い回すことができ、開発の柔軟性が向上します。

UMDは、特にライブラリやフレームワークを開発する際に便利であり、モジュールの互換性を保つために広く使用されています。UMDのコードを正しく実装することで、どんな環境でもモジュールを利用できるため、クロスプラットフォーム開発において非常に有用です。