Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

覚醒!JavaScript

26 150 vues

Publié le

7月19日に行った「覚醒!JavaScript」勉強会で使用したスライドです。

http://connpass.com/event/7082/

  • Soyez le premier à commenter

覚醒!JavaScript

  1. 1. 覚醒!JavaScript 株式会社 gumi 原口 剛
  2. 2. 自己紹介 • 原口 剛 (はらぐち ごう) • フロントエンドエンジニア • 2012年 gumi入社 • スマホWebゲーム
  3. 3. 黒歴史 •28歳でJavaでHelloWorld!を書く •受託システム開発
 Java+ActionScript3 •ソシャゲ開発
 ケータイFlash制作 •スマホ対応で初めてHTML+CSSを書く
 JavaScriptほとんど書いてない •某価格比較サイトのコーダー業務
 スマホ版のカルーセルUI実装で初めて 本格的にJavaScriptにちゃんと触れる
  4. 4. が、しかし!!
  5. 5. それは、”jQueryJavaScript”だった・・・ $('.carousel-prev').click(function () { $('.carousel').carousel('scroll', '-=1'); }); $('.carousel-next').click(function () { $('.carousel').carousel('scroll', '+=1'); }); (勝手に命名)
  6. 6. jQueryじゃダメなの!? 小規模ならいいかもね 中・大規模だと破綻するかもね
  7. 7. なんでjQueryじゃダメなの!? ネームスペースの問題・ハンドラ関数の爆発的増加・ コード再利用のやりづらさetc と、その話はおいといて・・・
  8. 8. 模範的なJavaScriptプロジェクト プログラミング上達のコツは? 教わるよりも学びましょう! 守・破・離
  9. 9. 模範的なJavaScriptプロジェクト jQuery, Underscore.js, Knockout.js等々 著名なライブラリやフレームワークの中身を 理解可能なレベルになっておきたい! そこから学べる要素が必ずあるはずです!
  10. 10. 理解できるレベルとは? • なんとなくではなく、明確に理解している • ブラックボックス症候群にはご注意を!
  11. 11. アジェンダ •JavaScriptオブジェクト •関数(Function()) •グローバルオブジェクト •this •スコープとクロージャ
  12. 12. JavaScriptオブジェクト
  13. 13. JavaScriptオブジェクト JavaScriptの世界では、
 ほぼすべてがオブジェクトそのものか、
 もしくはオブジェクトのようにふるまう
  14. 14. オブジェクト 『名前』と『値』を持つプロパティを
 格納するコンテナ var man = new Object(); man.living = true; man.age = 35; man.gender = 'male'; 値 名前
  15. 15. メソッド 単なるデータのみだと、オブジェクトはJSONのよ うなデータベースすぎないが、オブジェクトには ふるまいを付与できる
  16. 16. メソッド var man = new Object(); man.living = true; man.age = 35; man.gender = ‘male'; man.getGender = function(){ return man.gender; } ふるまい
  17. 17. コンストラクタ関数 一見、普通の関数 一般的に関数名の先頭文字を大文字にしている new演算子を伴って呼び出された場合、コンスト ラクタ関数は特別な役割をする
  18. 18. 特別な役割? 本来return文を宣言しない場合にはfalse相当の値を 返すところ、コンストラクタ関数は代わりに新た に生成されるオブジェクトを返す コンストラクタ関数中のthisは、戻り値であるオブ ジェクトを示す予約語
  19. 19. var Person = function (living, age, gender) { this.living = living; this.age = age; this.gender = gender; this.getGender = function () { return this.gender; }; }; var haraguchi_10 = new Person(true, 10, ‘male’); var haraguchi_20 = new Person(true, 20, ‘male’); var haraguchi_30 = new Person(true, 30, ‘male'); コンストラクタ関数
  20. 20. ネイティブコンストラクタ JavaScriptには、9つのネイティブオブジェクトコン ストラクタが存在する JavaScriptのさまざまな機能を整えるためにも使用さ れる 関数は、Function()コンストラクタから生成されるオ ブジェクトで、new演算子とともに使用することで、 コンストラクタとして他のオブジェクトを生成する
  21. 21. 9つのオブジェクト Number() 、String()、 Boolean()、 Object()、 Array() Function()、 Date()、 RegExp()、 Error() 言語の深層部を理解するには、以上のネイティブ オブジェクトコンストラクタ関数を知っておくこ とが になる
  22. 22. リテラル オブジェクト生成のショートカット リテラルはnew演算子が行うことを隠 しているにすぎない オブジェクトの生成はリテラルの方がお手軽だし便利 var myNumber = new Number(10000); var myNumberLiteral = 10000; console.log(myNumber.constructor, myNumberLiteral.constructor); Number() Number() newする リテラル
  23. 23. プリミティブ値 null, undefiend, ’string’, 10, true, falseなどは
 オブジェクトではなくプリミティブ型 一部のプリミティブ型はオブジェクトのように扱 うとオブジェクトのようにふるまう var name= “Haraguchi”; console.log(name.toString()); オブジェクト型化
  24. 24. オブジェクトの保持 • オブジェクトは参照によって保存・操作される • 変数名からメモリ上のアドレスにアクセスする • 変数に代入すると参照(アドレス)がコピーされる • 参照先の変更は、同じ参照をしている変数全てに かかる
  25. 25. var myObject = {}; var copyOfMyObject = myObject; myObject.foo = 'bar'; console.log(myObject, copyOfMyObject); // 出力: 参照をコピー 同じ参照 同じ参照
  26. 26. オブジェクトの同値判定 • 同じ参照のときに同値 • 値が同じでも、参照が異なれば同値ではない
  27. 27. var objectFoo = { same: 'same' }; var objectBar = { same: 'same' }; console.log(objectFoo === objectBar); ! ! 別参照 別参照 出力: false
  28. 28. 関数
  29. 29. 関数(Function()) 一般的にはfunction演算子(関数リテラル)を使う 方法で生成する var addNumber = function(num1, num2){ return num1 + num2}; console.log(addNumber(2, 3));
  30. 30. 関数について • 関数は常に値を返す
 return文を記述していない場合などはundefinedが返 される • JavaScriptの関数は「値」として格納できる特徴が る( 第1級関数) • 関数もオブジェクト
  31. 31. 関数の実行方法 • 関数として実行 • メソッドとして実行 • コンストラクタとして実行 • apply()もしくはcall()を使って実行 new Hoge() foo.hoge() hoge()
  32. 32. apply() var myObject = {}; var myFunction = function (param1, param2) { this.foo = param1; this.bar = param2; console.log(this) }; myFunction.apply(myObject, ['foo', 'bar']); console.log(myObject); 配列
  33. 33. apply() var myObject = { myFunction: function (param1, param2) { this.foo = param1; this.bar = param2; console.log(this) } }; myObject.myFunction('foo', 'bar'); console.log(myObject);
  34. 34. call() var myObject = {}; var myFunction = function (param1, param2) { this.foo = param1; this.bar = param2; console.log(this) }; myFunction.call(myObject, 'foo', 'bar'); console.log(myObject); 第二引数以降
  35. 35. call() var myObject = { myFunction: function (param1, param2) { this.foo = param1; this.bar = param2; console.log(this) } }; myObject.myFunction('foo', 'bar'); console.log(myObject);
  36. 36. 関数の即時実行 関数式は関数定義の後に()演算子を付与するこ とによってその場で実行する。 (function(msg){ console.log(msg) })(“Hello”);
  37. 37. 再帰 • 関数は自分自身を呼び出すことができる • 再帰の繰り返しは一般的なコーディングパターン
  38. 38. var countdown = function countdown(num) { console.log(num); num--; if (num < 0) { return false; } countdown(num); }; countdown(5); 再帰 中断
  39. 39. グローバルオブジェクト
  40. 40. グローバルオブジェクト Webブラウザ環境だとwindowオブジェクト グローバルオブジェクト直下に格納されているの が、グローバルプロパティ、グローバル変数 JavaScriptはあらかじめ定義されている関数を幾つ か持っていて、これをグローバル関数と呼ぶ
  41. 41. グローバル関数 decodeURI(encodedURI), decodeURIComponent(encodedURIComponent), encodeURI(uri), encodeURIComponent(uriComponent), eval(x), isFinite(number), isNaN(number), parseFloat(string), parseInt(string, radix)
  42. 42. グローバル変数の作り方 グローバルスコープ下でvar演算子を伴って変数を宣言す る場合、その変数はグローバル変数となる。 var演算子を使用しない場合はグローバルプロパティとし て宣言される。 違いとしてはdelete演算子で消せるかどうか。 delete演算子はオブジェクトプロパティを削除する唯一 の手段。
  43. 43. var a = 10; b = 100; delete a; delete b; グローバル変数 グローバルプロパティ 削除できない 削除できる
  44. 44. this
  45. 45. this 関数が実行される際、thisキーワードの値が設定さ れる。このとき設定される値は、関数を呼び出す オブジェクトへリンク var man = { name: “Haraguchi”, getName: function(){return this.name}; }; manを示す
  46. 46. thisの値はどのように決まる? • 全ての関数に渡されるthisの値は、関数が実行時に 呼び出される際のコンテクストに依存する。 • JavaScriptの「癖」のひとつ
  47. 47. var foo = 'foo'; var myObject = { foo: 'I am myObject.foo' }; var sayFoo = function () { console.log(this['foo']); }; myObject.sayFoo = sayFoo; myObject.sayFoo(); sayFoo(); プロパティに関数指定する オブジェクトメソッド実行 関数実行
  48. 48. 入れ子関数内でのthis 入れ子関数内では、thisはグローバルオブジェクト を参照するという完全に方向を誤った仕様。
  49. 49. var myObject = { func1: function () { console.log(this); var func2 = function () { console.log(this) ; var func3 = function () { console.log(this); }(); }(); } } myObject window window
  50. 50. 入れ子関数内でのthisの保持 入れ子関数内でのthisの値見失わないために、一般 的に入れ子関数からアクセスできるスコープに var self = thisなどで保持して、そのselfを使用する ことでthisを見失うことがない
  51. 51. var myObject = { myProperty: 'I can see the light', myMethod: function () { var self= this; var helperFunction = function () { console.log(self.myProperty); console.log(this); }; helperFunction(); } } myObject.myMethod(); window myObject thisを保持
  52. 52. スコープとクロージャ
  53. 53. スコープとクロージャ コードが実行されるコンテクストにスコープが割 り当てられる。スコープには、下記の三つのタイ プがある。 • グローバルスコープ • ローカルスコープ(関数スコープ) • evalスコープ(非推奨)
  54. 54. スコープ別出力例 var foo = o; console.log(foo); var myFunction = function(){ var foo = 1; console.log(foo); } eval(‘var foo = 3; console.log(foo);’); グローバルスコープ ローカルスコープ evalスコープ
  55. 55. ブロックスコープは無い var foo = 1; if (true) { foo = 2; foo = i; console.log(foo); } fooの値が書き換わる 同じスコープ 同じスコープ
  56. 56. スコープチェーン 変数を参照する時、近いローカルスコープから探し、見つからな かったらグローバルスコープまで る var x = 10; var foo = function () { var y = 20; var bar = function () { var z = 30; console.log(z + y + x); }; }; foo(); 「bar」のローカルスコープ 「foo」のローカルスコープ グローバルスコープ
  57. 57. 静的スコープ • 関数定義時の場所にもとづいてスコープが決定 • thisの決定(実行時)とは、違う • 定義済みの関数を別スコープへ渡しても、スコー プチェーンは変わらない
  58. 58. var parentFunction = function () { var foo = 'foo'; return function () { console.log(foo); } } var nestedFunction = parentFunction(); nestedFunction(); 出力: 'foo' 無名関数を参照 出力: 'foo'
  59. 59. クロージャ クロージャを一言で表すと「スコープチェーンに よって存在する変数への参照を保持している関数」 • カプセル化 • グローバル変数汚染を防ぐ
  60. 60. カプセル化 var countUp = function () { var count = 0; return function () { return ++count; }; }(); console.log(countUp()); console.log(countUp()); console.log(countUp()); 子関数からのみアクセス可能 スコープチェーンをだとる スコープチェーンをだとる スコープチェーンをだとる
  61. 61. クロージャ失敗例 var foo = function () { var funcArray = []; var i; for (i = 0; i < 3; i++) { funcArray[i] = function () { console.log(i); }; } return funcArray; }(); foo[0].(); foo[1].(); 子関数からは共通のiにアクセス 関数の参照を保持
  62. 62. クロージャ成功例 var foo = function () { var funcArray = []; var i; var func = function (i) { return function () { console.log(i); }; } for (i = 0; i < 3; i++) { funcArray[i] = func(i); } return funcArray; }(); 独自に持つローカル変数変数 クロージャを配列に格納
  63. 63. 配列に格納された関数を実行 funcArray[0](); funcArray[1](); funcArray[2](); 出力: 0 出力: 1 出力: 2
  64. 64. まだまだいろいろありますが、 所 は、枝葉の知識。
  65. 65. Cody Lindley 著、和田 祐一郎 訳 開眼! JavaScript―― 言語仕様から学ぶ JavaScriptの本 質
  66. 66. fin. ご静聴ありがとうございました。

×