jQuery 非依存のライブラリの作り方

#JavaScript（jQuery、そのたJS技術）

created: 2025/05/17, modified: 2025/05/20

関数ライブラリを作るにあたって、どのように共通化していくかの仕様、モジュールシステムというのが必要で、JavaScriptはそれがなかった。いろいろな仕様が考えられたとのこと。

全体

1. 即時関数（IIFE）

• (function() {...})() は即時実行関数（IIFE: Immediately Invoked Function Expression）という構文
• ライブラリをグローバル空間を汚さずに定義する
• セミコロン から始めるのは、他のJSファイルと連結されたときに安全なため（前のコードが return で終わってるとバグになるから）

グローバル空間を汚さない、とは

グローバル空間を汚す、とは、グローバル（＝window）に余計な変数や関数を「直接定義」してしまい、他のコードと「衝突・上書き」してしまうことです。

• 名前の衝突：他のライブラリ・スクリプトと競合して動作不良になる
• 保守性の低下：どのファイルがどの変数を使っているか追いづらい
• 上書きバグ：後から読み込んだコードが重要な変数を破壊してしまう

事例：意図せず message を上書きしてしまい、受付時間が伝えられない

汚染されているか確認する方法

2. 引数：root と factory

root と factory は慣習的な名前です。

• root：ライブラリを定義する対象（グローバルオブジェクトになる）
• factory：ライブラリの中身を返す関数

3. typeof self !== 'undefined' ? self : this

• グローバルオブジェクトを取得するための判定式
• self はWeb Workerやブラウザ環境で使えるグローバル
• this は通常のブラウザやNode.js環境でグローバルを指す
• これにより「どの環境でもグローバル変数にアクセスできる」ようにしている

結果的に root には window や global 相当が入る

4. CommonJS（Node.js）対応の分岐

• module.exports が使えるのは Node.js や CommonJS 環境
• 条件を満たすなら、factory を呼んで得られたライブラリを module.exports に代入
• これで require のように使えるようになる

5. ブラウザ（グローバル変数）対応の分岐

• CommonJSではなかった＝ブラウザ環境と判定
• root には window が入っているので、window.MyLib が作られる
• これにより script で読み込んだあと MyLib.hello() などでアクセスできるようになる