[JavaScript] 3. 即時関数 と jQuery.readyイベント関数

---

1. クラスの定義
2. クラスの継承
3. 即時関数 と jQuery.readyイベント関数
4. 即時関数でクラス定義
5. private プロパティ
6. Object.defineProperty/ies でプロパティ/メソッド定義

---

JavaScriptの記述でとてもよく似ていて間違いや誤解をされやすいのが、 即時関数 と jQueryの readyイベント関数 です。
両者は記法がとてもよく似ていますが、動作が全く異なります。
間違いや誤解によって致命的な結果を招きますので、両者の違いをしっかりと理解して注意しましょう。

即時関数

文字通り「即時に実行、処理される関数」です。
これは JavaScript の実装 で jQuery とは無関係です。

即時関数

(function(仮引数, ...) {
    //
    // 即時に実行、処理したいコード
    //
})(引数)

関数 は通常、定義された後、別の箇所から呼び出された際に処理されます。
一方、 即時関数 は定義と同時に自動的に呼び出されて処理されます。つまり、 関数定義がロードされた瞬間 に実行されます。

readyイベント関数

jQuery に実装されているイベント処理関数です。
HTMLドキュメントが全てロードされ、DOMにアクセスができる準備が完了した後に処理されます。すなわち、 全てのロードが完了した後 に実行されます。

readyイベント処理

$(function() {
    //
    // ロード完了後に実行、処理したいコード
    //
})

このように即時関数ととてもよく似ています。
似ていますが、実行されるタイミングがまったく異なります。

注意ポイント

• 先頭の「$」の有無
  • 「$」があれば readyイベント、無ければ即時関数。
• 最後尾の「(引数, ...)」の有無
  • readyイベントには「(引数, ...)」は無い。即時関数には「(引数, ...)」を付ける

readyイベントの本来の記法

なお、前述のreadyイベントの記法は簡略化されたものです。
本来は以下のように記述しますが、簡略記法を使用するのが一般的です。

readyイベントの本来の記法

$(document).ready(function() {
    //
    // ロード完了後に実行、処理したいコード
    //
})

JavaScriptの本来の実装

さらに、jQueryのreadyイベントは、JavaScript本来の load イベントの処理を簡略化したものです。

JavaScriptのloadイベント処理

document.addEventListener( 'DOMContentLoaded', function() {
    //
    // ロード完了後に実行、処理したいコード
    //
});