クロージャ(3)クロージャ(1)概要Flashのムービークリップを目指してFlashのActionScriptがデザイナーにも扱いやすい理由の1つに、ムービークリップ毎にスクリプトを分けて書けるというのがあります。jQueryを含む)は、1カ所に全てのスクリプトを書かなければならず、大規模なコンテンツではFlash以上に管理が大変になります。※外部jsファイルは単純にファイルを分けているだけです。javaScriptでもムービークリップっぽい仕組みができそうな気がしたので色々調べました。するとクロージャという仕組みが使えそうな気がするのです。どの様にこれを活用すべきか分からないのですが、ここにまとめておこうと思います。※クロージャはjQueryの仕組みではなく、javaScriptが元々持っている仕組みのためjQueryでも活用できます。解説なるべくローカル変数を利用するFlashではムービークリップを分けてしまえば、同じ名前でも別の変数として扱われます。ムービークリップがないjavaScriptでは、その方法は利用できませんからローカル変数を上手く利用しなければなりません。(カプセル化)複雑で量の多いプログラムは、処理が他に影響して思わぬバグを招く危険性があります。各処理は簡単にアクセスできないように隠蔽します(処理が隔離されるのでカプセル化とも呼ばれます)。利用範囲の狭いローカル変数を活用するのもこのためです。サンプル(closure1/01.html)を開いて下さい。up」ボタンをクリックすると緑色のdiv内に表示した数字が増えていきます。「watch」ボタンをクリックするとアラートで現在の数字を表示します。スクリプトは以下の様にシンプルになっています。readyイベントで設定してあるfunction内でvarを利用して変数cntが作成されているので、変数varは、このfunction内のローカル変数です。{alert(cnt);})})しかしjQueryでは多くのコードをこのreadyイベントのfunction内に書くので、このレベルでは不十分です。変数cntをローカルにすることは可能でしょうか?まずは安直な方法で作成したサンプル(closure1/02.html)を開いてjQueryを確認してください。ポイントは新規にfunction「countMaster」を作成し、その中にローカル変数を作成した点です。upボタンをクリックしたら、このcountMasterを実行してカウントアップするようにしています。{alert(cnt);})});このサンプルでは変数cntはさらに深いfunctionで作成され、よりローカル度が高くなりました。upボタンをクリックしても1以上に増えませんし、watchボタンをクリックしても数字が表示されません。それは当たり前で、変数cntをcountMaster内のローカル変数にするためにはcountMaster内で変数を作成しなければなりません(上記ソース3行目)。そのためcountMasterが実行される(upボタンがクリックされる)度に変数cntが作成(初期値は0)されるため値が1から増えないのです。変数cntはcountMasterのローカル変数のため、countMasterの外からは値を取得できません。そのためwatchボタンをクリックしても値が表示されないのです。そこでクロージャの登場しかしクロージャを利用すれば、この問題が解決できます。サンプル(closure1/03.html)を開いて、ソースの以下の部分を確認して下さい。ここではカウントアップさせる機能のオリジナルを作成しています。Flashでいうと、これがムービークリップのシンボルと考えて下さい。countUpFunc;}この部分は以下の様な構造になっています。サンプルでは1回実行すればよいことは変数cntの作成です(上記ソース3行目:初期値は0)。利用したい機能はcountUpFuncとしてfunctionを作成しました。最後にreturnで作成したfunctionを返します(returnはfunctionも返すことができるのです)。作成した上記function名}Flashではシンボルをもとに作成されたインスタンスを利用してコンテンツを作成します。クロージャも同じでインスタンスを作成しなければなりません。このサンプルでは以下の部分でインスタンスを作成しています。オリジナルとして作成したcountMasterを実行して得たものを変数cntFuncに代入します。このcntFuncがcountMasterのインスタンス(コピー)です。この処理によってオリジナルが実行されます。変数cntが作成され、カウントアップさせる機能(countUpFunc)が返値としてcntFuncに代入されます。countMaster();そしてサンプルでは、作成したインスタンスは以下の部分で利用しています。作成されたインスタンスcntFuncにはcountUpFuncの機能が代入されていますから、このように実行するだけでカウントアップされます。up」ボタンをクリックすると数字が増えていきます。これでサンプル05/03_02.htmlで実現できなかった、より深いfunctionで作成されたローカル変数を利用できるようになりました。変数cntがcountMasterのローカル変数である確認として、watchボタンをクリックしても値が表示されません。これは正しい仕様なのですが「変数cntをcountMaster外から取得したい」場合は、どうすればよいのでしょうか?次回説明したいと思います。