Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,449 views

Published on

Published in: Technology
  • Be the first to comment

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 ネットからコードをコピる場合も思考停 ⽌止せずにちゃんと意味を理理解する

×