blog.鶯梭庵

二〇一六年卯月九日土曜日

■ CoffeeScript で即時関数を書く方法まとめ [/links]

この記事は書かれてから1年以上経過しています。内容が古くなっている可能性があります。コメントの受付は終了しました。

JavaScript には、即時関数とか即時実行関数とか呼ばれるパターンがある。こんなの。

(function () {

// 何かする

})();

関数を定義して、すぐさま実行する。（だから「即時関数実行」というべきだろうと思うけれど、慣習に従う。）JavaScript で変数をスコープに閉じ込めるには関数の中に入れるしかないので、このパターンをよく使う。

で、よく知られている通り、これは CoffeeScript では、

do ->

// 何かする

と簡単に書ける。でも、どうしてそう書けるのか。

そもそも do キーワードは何をするのか。ためしに

do foo

を JavaScript にコンパイルすると

foo();

となる。つまり、do キーワードは、後に続くものを関数として実行する。

-> は関数を定義するので、それを do の後におけば、関数が定義されて実行される。すなわち、即時関数だ。

即時関数を後からもう一度呼び出したい場合がある。上記をふまえれば、次のように書けばよいことがわかる。

do greet = ->

alert 'Hello'

setTimeout greet, 5000

これを実行すると、すぐに "Hello" と出て、5 秒後にまた "Hello" と出る。このパターンはページの初期化コードなどに使える。ページが読み込まれたときに自動的に初期化し、ユーザーがいろいろ操作した後に初期化ボタンを押すとまた初期化される、みたいな。

では、即時関数に変数を渡すにはどうするか。こうする。

do ($ = jQuery) ->

$('body').hide()

コンパイルすると、こうなる。

(function($) {

return $('body').hide();

})(jQuery);

この場合、jQuery がグローバル変数で、$ がローカル変数になる。変数 $ は、即時関数の中では jQuery グローバルオブジェクトを参照するが、即時関数の外では別のものを参照するかもしれない。

($ = jQuery) -> というパターンは、通常は引数のデフォルト値を指定するのに使う。これだけをコンパイルすると、こうなる。

(function($) {

if ($ == null) {

$ = jQuery;

}

});

これが即時関数でうまくコンパイルされるのを見ると、CoffeeScript はよくできているとあらためて思う。

上記を組み合わせると、こんなこともできる。

do

do greet = (greeting = 'Hello') ->

->

alert greeting

setTimeout greet('Bye'), 5000

これを実行すると、最初に Hello と出て、5 秒後に Bye と出る。どうしてこうなるかは、直感的にはわかりにくいかもしれない。コンパイル結果を見るとわかりやすいかもしれないし、そうでないかもしれない。

[このカテゴリをまとめて読む。] [最新の記事を読む。]

羽鳥公士郎

blog.鶯梭庵

二〇一六年 卯月 九日 土曜日

■ CoffeeScript で即時関数を書く方法まとめ [/links]

カテゴリ

最新記事

二〇一六年卯月九日土曜日