1. クロージャとか即時関数と
か関数オブジェクトとか、
JavaScriptのあれやこれや
を⼀一つのサンプルで全部説
明してみる
株式会社FLECT
⼩小⻄西俊司
2014/10/09

2. この⽂文書の⽬目的
u 某案件で⾒見見つけた、（多分ネット上からコピペしてき
たと思われる）ほんの数⾏行行のコードが、読み解くのに
u クロージャ
u 即時関数
u オブジェクトとしての関数
u 変数の巻き上げ
u などの理理解が必要になるというとても優れものの、い
けてねーコードだったので隅々まで解説してみる

3. 要件
u 複数の画像ファイルを選択した時に、そのすべてのファイルのファ
イル名とプレビューを表⽰示する
u HTMLのみで⾏行行いサーバとの通信はなし
u jQueryは使っても良良い

4. ヒント： FileReader
u ローカルファイルの読み込みにはHTML5のFileReaderクラスが使⽤用
出来る
u readAsDataURLメソッドを実⾏行行すると、読み込み完了了時にonloadイ
ベントが発⽣生
u イベント内でe.target.resultでDataURLが取得できる

5. 書いてしまいがちなコード
u これは正しく動作する？

6. 動作しない
u 画像は正しく表⽰示されるがファイル名は
すべて最後のファイル名になる
u スコープの問題
u クロージャと変数束縛
u シングルスレッド実⾏行行

7. JavaScriptにブロックス
コープはない
u JavaScriptの変数宣⾔言はどこで⾏行行っても関数の先頭で⾏行行われたの
と同じになる(変数の巻き上げ、と呼ばれている)
ただし、可読性をあげ
るためには、変数は使
うところで宣⾔言した⽅方
が良良い。
この場合、⻑⾧長い関数で
は後の⽅方で宣⾔言する変
数名が既に使われてい
るかもしれないという
問題が発⽣生するが、そ
もそも、⼀一⾒見見でつかめ
ないような⻑⾧長い関数は
書くべきではない

8. クロージャと変数束縛
u クロージャでは外側のスコープの変数が使えるが、その際の値は
実⾏行行時点での値になる
u 下記関数では0..9が表⽰示される

9. シングルスレッド実⾏行行
u reader#onloadが動くのはchangeイベントを抜けた後
u この時file変数は最後のファイルを指している

10. ではどう書けば良良いのか？

11. 即時関数を利利⽤用
u FileReaderでググると⼤大概この書き⽅方が紹介されている

12. 即時関数とは
u 関数を定義してすぐに実⾏行行するJavaScriptの記法
u 関数定義⾃自体を括弧で括って、それを実⾏行行するための引数の括
弧を後ろに付ける
u ⼀一番良良く⾒見見かける⽤用例例はscriptタグ内でスコープ
を形成するケース
u これによってグローバル変数を汚さないようにしている

13. jQueryプラグインでよく見
る例
u $はprototype.js等の別のライブラリでも使⽤用
されているので必ずjQueryオブジェクトを指
すようにする
u undefinedは変数名として使⽤用できるので明
⽰示的に宣⾔言して、引数を渡さないことによっ
て確実にundefinedにしている

14. このケースのポイント
u 即時関数によって新たなスコープが形成され、file変数が固定される
u 内側の変数は外側の変数を隠す

15. 関数を返す関数
u JavaScriptでは普通に使われる
u 多くの場合このケースのようにスコー
プの形成と変数束縛のために使⽤用され
る
u 分岐でreturnする関数を切切り替える
ケースもあるがその場合は、関数⾃自体
は別に宣⾔言する⽅方が良良い
u ぱっと⾒見見わかりにくいので、可能な限
り使わない⽅方が良良い

16. もっと良良い書き⽅方
u jQuery.eachでfile変数が束縛されているので即時関数を使
⽤用する必要がない

17. まとめ
u スコープを形成。他の⾔言語だとあまり聞
かないけどJavaScriptでは超重要
u この辺がちゃんとわかってないとjQuery
とかAngularとかのソースを⾒見見てもまった
く理理解できない
u 配列列のループは原則forでまわさず
jQuery.eachを使⽤用する
u Array.forEachもあるが古いブラウザは対
応していない
u ネットからコードをコピる場合も思考停
⽌止せずにちゃんと意味を理理解する