CommentOut

即時関数とは 即時関数とは

即時関数とは

公開日:  最終更新日:

即時関数というものがあります。
おそらく、この記事を読んでいる方は『即時関数』というものがあることを知って、どういう場面で使うのか、どういう書き方をするのかが知りたくて調べて来たんじゃないでしょうか?

即時関数とは

即時関数は、関数を定義して、すぐにその場で関数を実行する構文です。

javascriptでは以下のように記述します。

// 引数の無い即時関数
(function() {
    // 関数の処理をここに記述
})();

// 引数がある時の即時関数
(function([引数], ...) {
    // 関数の処理をここに記述
})([関数に渡す引数], ...);

// 戻り値がある場合
var return_value = (function([引数], ...) {
    // 関数の処理をここに記述
})([関数に渡す引数], ...);

こんな感じです。
いきなり完成形を見せられてもわかりにくいと思うので、即時関数までの進化を見ていきましょう。

// Pattern. 01
// 18歳以上か確認するベーシックな関数
function ageChecker(age) {
    return (age >= 18);
}

// Pattern. 02
// 無名関数化(通常は無名関数のみを記述することはなく、関数を引数に代入する場面や変数に関数を代入する時に使います)
function(age) {
    return (age >= 18);
}

// Pattern. 03
// 即時関数化(即時関数の引数に18が代入されています。)
(function(age) {
    return (age >= 18);
})(18);

まだまだわかりにくい。
構文だけ書かれても、わかりにくいですよね?
私はわかりにくいと思います。
実際に活用しているサンプルの方がよっぽどわかりやすいです。

// 名前の入った配列を定義
var names = ["yamada taro", "nakamura jiro", "yamada goro"];

// yamadaさんだけをカウントする即時関数
var yamada_count = (function(args) {
    var count = 0;
    for (var i=0; i<args.length; i++) {
        if (args[i].match('yamada')) count++;
    }
		return count;
})(names); // ここでnames配列を関数に渡している

$(element).html('山田さんの数 : ' + yamada_count + '名');

一連の流れを書いてみました。

即時関数はどういう時に使う?

その場で即実行しちゃうので、関数名なんて付けません。無名関数です。
名前がないので、後で関数を呼び出すこともできません。

また、以下のサンプルでも検証していますが、即時関数は変数に代入もできません。

See the Pen Untitled by Uilou (@uilou754) on CodePen.

なんて不便な・・・そんなもの、いつ使うの?って私も思ってました。

即時関数のメリットは、関数化することで変数のスコープを管理しやすくできる点です。
javascriptやPHPなどのスクリプト言語ってスコープが曖昧というか、関数内で定義された変数以外はグローバル変数みたいになりますよね。
なので、即時関数を作ってやることで、スコープの範囲をはっきりさせることができます。

私は「処理の中で、その場でしか使わないけど、関数化してた方が安全そうだし、すっきりしそうだな」って思う場面で即時関数を使うことがあります。
こういう使い方が正しいのかは不明ですが、そういう場面で使うようにしている感じです。

宣伝
WordPressサイトのテンプレート編集やトラブル対応、バグ修正、簡単なJavascriptの作成(カルーセルやバリデーション等)など、小規模なスポット対応を受け付けております。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。

この記事を書いた人

uilou

uilou

プログラマー

基本的に、自分自身の備忘録のつもりでブログを書いています。 自分と同じ所で詰まった人の助けになれば良いかなと思います。 システムのリファクタリングを得意としており、バックエンド、フロントエンド、アプリケーション、SQLなど幅広い知識と経験があります。 広いだけでなく、知識をもっと深堀りしていきたいですね。