Javascriptのあれやこれやをまとめて説明してみる

Javascriptのあれやこれやをまとめて説明してみる

1. 1. クロージャとか即時関数と か関数オブジェクトとか、 JavaScriptのあれやこれや を⼀一つのサンプルで全部説 明してみる 株式会社FLECT ⼩小⻄西俊司 2014/10/09
2. 2. この⽂文書の⽬目的 u 某案件で⾒見見つけた、（多分ネット上からコピペしてき たと思われる）ほんの数⾏行行のコードが、読み解くのに u クロージャ u 即時関数 u オブジェクトとしての関数 u 変数の巻き上げ u などの理理解が必要になるというとても優れものの、い けてねーコードだったので隅々まで解説してみる
3. 3. 要件 u 複数の画像ファイルを選択した時に、そのすべてのファイルのファ イル名とプレビューを表⽰示する u HTMLのみで⾏行行いサーバとの通信はなし u jQueryは使っても良良い
4. 4. ヒント： FileReader u ローカルファイルの読み込みにはHTML5のFileReaderクラスが使⽤用 出来る u readAsDataURLメソッドを実⾏行行すると、読み込み完了了時にonloadイ ベントが発⽣生 u イベント内でe.target.resultでDataURLが取得できる
5. 5. 書いてしまいがちなコード u これは正しく動作する？
6. 6. 動作しない u 画像は正しく表⽰示されるがファイル名は すべて最後のファイル名になる u スコープの問題 u クロージャと変数束縛 u シングルスレッド実⾏行行
7. 7. JavaScriptにブロックス コープはない u JavaScriptの変数宣⾔言はどこで⾏行行っても関数の先頭で⾏行行われたの と同じになる(変数の巻き上げ、と呼ばれている) ただし、可読性をあげ るためには、変数は使 うところで宣⾔言した⽅方 が良良い。 この場合、⻑⾧長い関数で は後の⽅方で宣⾔言する変 数名が既に使われてい るかもしれないという 問題が発⽣生するが、そ もそも、⼀一⾒見見でつかめ ないような⻑⾧長い関数は 書くべきではない
8. 8. クロージャと変数束縛 u クロージャでは外側のスコープの変数が使えるが、その際の値は 実⾏行行時点での値になる u 下記関数では0..9が表⽰示される
9. 9. シングルスレッド実⾏行行 u reader#onloadが動くのはchangeイベントを抜けた後 u この時file変数は最後のファイルを指している
10. 10. ではどう書けば良良いのか？
11. 11. 即時関数を利利⽤用 u FileReaderでググると⼤大概この書き⽅方が紹介されている
12. 12. 即時関数とは u 関数を定義してすぐに実⾏行行するJavaScriptの記法 u 関数定義⾃自体を括弧で括って、それを実⾏行行するための引数の括 弧を後ろに付ける u ⼀一番良良く⾒見見かける⽤用例例はscriptタグ内でスコープ を形成するケース u これによってグローバル変数を汚さないようにしている
13. 13. jQueryプラグインでよく見 る例 u $はprototype.js等の別のライブラリでも使⽤用 されているので必ずjQueryオブジェクトを指 すようにする u undefinedは変数名として使⽤用できるので明 ⽰示的に宣⾔言して、引数を渡さないことによっ て確実にundefinedにしている
14. 14. このケースのポイント u 即時関数によって新たなスコープが形成され、file変数が固定される u 内側の変数は外側の変数を隠す
15. 15. 関数を返す関数 u JavaScriptでは普通に使われる u 多くの場合このケースのようにスコー プの形成と変数束縛のために使⽤用され る u 分岐でreturnする関数を切切り替える ケースもあるがその場合は、関数⾃自体 は別に宣⾔言する⽅方が良良い u ぱっと⾒見見わかりにくいので、可能な限 り使わない⽅方が良良い
16. 16. もっと良良い書き⽅方 u jQuery.eachでfile変数が束縛されているので即時関数を使 ⽤用する必要がない
17. 17. まとめ u スコープを形成。他の⾔言語だとあまり聞 かないけどJavaScriptでは超重要 u この辺がちゃんとわかってないとjQuery とかAngularとかのソースを⾒見見てもまった く理理解できない u 配列列のループは原則forでまわさず jQuery.eachを使⽤用する u Array.forEachもあるが古いブラウザは対 応していない u ネットからコードをコピる場合も思考停 ⽌止せずにちゃんと意味を理理解する