JavaScript Study for learners高橋 健太@rika_t / rika-t
Who am I?• rika-t  ▫ Twitter: @rika_t  ▫ ドワンなんとかという会社でニコニなんとかを    作っています  ▫ それより以前はIBMでDojo Toolkitを使った簡単    なお仕事をしていました  ...
What’s this presentation?• 対象 ▫ JavaScriptで何となく動くものを作ったことがあ   る、位の人• 目的 ▫ もう少しJavaScriptのことを深く理解できるよう   になる ▫ 他の人のコードでも、一人...
Agenda• JavaScript仕様の話• JavaScriptの用語• JavaScriptの特徴 ▫ レキシカルスコープ ▫ プロトタイプベースのオブジェクト指向言語• JavaScriptのデバッグ ▫ 見通しの良いコードを書く ▫ ...
JavaScriptの歴史• JS history : http://www.slideshare.net/badatmath/js-  shistory を読みましょう• どうでもいいこと  ▫ JavaScriptはJavaに似ているらしい...
JavaScriptの仕様はどこで決まる?• 困ったら仕様を調べるのがイケてるエンジニア ▫ JavaScriptにはECMAScriptというベースとなる言語仕   様がある   これを決めているのがEcma Internationalとい...
ブラウザーの仕様実装状況• で、それを実装するのがGoogleであったり、  Mozillaであったり、Microsoftであったり ▫ 実装状況に差異が生まれる• 調べる ▫ http://caniuse.com/
用語• オブジェクト ▫ 0以上の属性を持つ、プロパティの集合• プロパティ ▫ 他のオブジェクト, プリミティブ値, 関数の入れ物   Object properties in JavaScript :    http://www.2ali...
レキシカルスコープ
変数のスコープ  • 基本的に関数に入るとスコープが変わる    ▫ ただし、そのスコープで存在しない変数にアクセスすると、"構      文上の"1つ上のスコープを見に行く           静的スコープとかレキシカルスコープとか呼ぶ  ...
var self = this;    • 別の関数に入るとthisが変わってしまう      ▫ 前のthisを覚えておきたい時に使うvar myObj = {};myObj.wait = 1000;myObj.waitFor = funct...
(function(){})();  • スクリプト内にJavaScriptをいきなり書き始めると、変数がグロー    バル空間に定義される    ▫ グローバル空間の汚染を防ぐために、最初に関数ブロックを作る        このブロックの中...
(function(global){})(this); • 同様に、グローバル領域から対象を絞ってブロック内にオブジェク   トを取り込みたい時は、以下のようにする(function(global){ var myPrivateVariable...
グローバル領域の汚染 • varを付け忘れるとグローバル空間の変数として定義されるvar util = { copy: function(from, to) {   for (prop in from) { //varつけ忘れ     to[p...
プロトタイプベースのオブジェクト指向言語
JavaScriptの型• 5つのプリミティブとobject ▫ number, string, boolean, null, undefined    ただし、typeof null; //”object” … ▫ object• 組み込み...
: 組み込み型                                    : 組み込みオブジェクト組み込み型と組み込みオブジェクト                           ObjectUndefined         ...
プリミティブとobject                  var a = {};                               var b = {};                               a.prop ...
Objectオブジェクト• {}と書くと作成できる  ▫ new Object(); は普通使わない• ArrayもFunctionもObjectオブジェクトの子クラス  var hoge = {};  hoge instanceof Obje...
Arrayオブジェクト• []と書くと作成できる  ▫ new Array(); は普通使わない    というか普通に使うのはやめましょう      new Array("5").length; //配列の値の初期化なので1      n...
Functionオブジェクト• 関数はオブジェクト ▫ 代入したり、受け渡ししたり、インスタンス作ったり• 関数オブジェクトはnewできる ▫ prototype    newされたインスタンスが持つプロパティ、メソッドを定義したもの    ...
prototypeとconstructorvar MylistItem = function(title, desc) {                                                             ...
MylistItem   MylistGroup  this                                 prototype                                        getTitle  ...
プロトタイプチェーンvar MylistVideo = function(title, desc, userId){   sm9.getTitle = function() { this.title = title;              ...
プロトタイプチェーン MylistVideo   MylistItem   MylistGroup  prototype    prototype     prototype   getTitle                getTitle...
ダメな例      var MylistVideo = function(title, desc, userId){       this.title = title;       this.desc = desc;       this.us...
ES仕様書でのprototypeの説明                             CFコンストラクタのプロトタイプ         CFコンストラクタ                            CFP1というプロパティ...
ES仕様書でのprototypeの説明補足   • この図をコードで書くと、こんな感じ      ▫ 普通にわかりづらいと思う                               //cf1-5からP1, P2にアクセスすることはできな...
見通しの良いコードを書く
見通しの悪いコード• JavaScriptを普通に書いていくと、イケてないコードになりがち ▫ Why?      言語仕様上、どこからでもグローバルオブジェクトにアクセスできる      同様に、HTMLがグローバルオブジェクトのように利...
コーディング規約• 色々参考になるものがあるので、何か決める ▫ Google    http://google-     styleguide.googlecode.com/svn/trunk/javascriptguide.xml   ...
クラス化(Widget化)する     • ある単位で、パーツとして分離する       ▫ そのパーツのDOMノードは、常にこのクラスのインスタンスが抱え込         んで管理する = Widgetプログラミング       ▫ 自身の...
JsDocを書く      • メソッドやプロパティの説明を書く      • グローバルへの依存性があるなら明記する      • 他から利用されたくないメソッド等をprivateであることを明記する/**                  ...
依存を定数化する or 最初に解決する    • 依存するDOMのIDなどは、集中管理する       ▫ 決まった値であればprototypeにする       ▫ 変数によって変わる値であれば、constructorで処理する       ...
グローバルへの依存を減らす    • HTML内にJavaScriptの関数名を書く必要があるケースはほとんど      ないはず       ▫ ある機能を持たせたい"特定のノード"の印を付けるには、Data Attribute       ...
これを続けていくと…• 見やすく&管理しやすくなったのは良いが…▫ JsDocでファイルサイズが増える…  JavaScriptビルドへの道   Closure Compiler▫ オブジェクトの初期化コストが高い…&ページ表  示時の処理...
開発者ツールの使い方
Internet Explorer• 開発者ツール ▫ F12で起動する      IE8から使える      IE7以前は…外部の開発ツールを入れるしかない• 機能 ▫   JavaScriptコンソール ▫   JavaScriptブレ...
Firefox• Firebugを入れる ▫ F12で起動する• 機能 ▫   JavaScriptコンソール ▫   JavaScriptブレークポイントの設定 ▫   DOMブレークポイントの設定 ▫   コールスタックを見る ▫   プロ...
Chrome• Developer Tools ▫ F12で起動する• 機能 ▫   JavaScriptコンソール ▫   JavaScriptブレークポイントの設定 ▫   DOMブレークポイントの設定 ▫   コールスタックを見る ▫  ...
将来ではない、"今"のJavaScript• こんなことが今既にできる ▫ ECMAScript 5 :   http://www.slideshare.net/ferrantes/ecmascript-5-   10575898• もう少しま...
将来のJavaScript• 現在の最新仕様は5.1• 次のバージョン6が策定中 ▫ 色々考えられてる、k(ry• 策定中の仕様や仕様案などはES Wikiにまとまって  いる ▫ harmony:proposals [ES Wiki]   ...
arrow function - examplesfunction (x) {  return x * x;                                                   (x) => x * x}var ...
arrow function• 特徴 ▫ thisが固定化される&newできない   ES Wikiの記述     Because "this" is lexically bound, "arrow.call" and      "arro...
Class Definitions     • ES Wikiにある例function SkinnedMesh(geometry, materials) {  THREE.Mesh.call(this, geometry, materials)...
Quasi Literals / Tagged Quasis• Quasi  ▫   【形】疑似の、類似の、外見上の、うわべだけの  ▫   【副】外見上、ある程度• ES Wikiの記述  ▫   http://wiki.ecmascript...
Next Step > Webページを読む•   既にたくさんいいドキュメントがあるので読みましょう    ▫   入門           JavaScript 「再」入門 - JavaScript | MDN              ...
Next Step > 本を読む• 本を読む ▫ JavaScript第6版 (通称 "サイ本")    http://www.amazon.co.jp/dp/4873115736 ▫ ステートフルJavaScript    http://...
Next Step > JS関係の情報を追う• 僕がよく見ているJS絡みの人たち ▫ https://twitter.com/rika_t/js• JavaScript関連のニュース ▫ JSer.info : http://jser.info...
Next Step > 勉強会に出る• ECMAScript勉強会 ▫ http://atnd.org/events/25793 ▫ http://atnd.org/events/30676
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
Upcoming SlideShare
Loading in …5
×

JavaScript study for learners

2,417 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,417
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
18
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

JavaScript study for learners

  1. 1. JavaScript Study for learners高橋 健太@rika_t / rika-t
  2. 2. Who am I?• rika-t ▫ Twitter: @rika_t ▫ ドワンなんとかという会社でニコニなんとかを 作っています ▫ それより以前はIBMでDojo Toolkitを使った簡単 なお仕事をしていました ▫ JavaScript歴は3年くらい?  最近はほとんど書いてない
  3. 3. What’s this presentation?• 対象 ▫ JavaScriptで何となく動くものを作ったことがあ る、位の人• 目的 ▫ もう少しJavaScriptのことを深く理解できるよう になる ▫ 他の人のコードでも、一人で原因調査ができる& 解決できるようになる
  4. 4. Agenda• JavaScript仕様の話• JavaScriptの用語• JavaScriptの特徴 ▫ レキシカルスコープ ▫ プロトタイプベースのオブジェクト指向言語• JavaScriptのデバッグ ▫ 見通しの良いコードを書く ▫ 開発者ツールの使い方• 将来のJavaScript• JavaScriptを継続して学ぶ
  5. 5. JavaScriptの歴史• JS history : http://www.slideshare.net/badatmath/js- shistory を読みましょう• どうでもいいこと ▫ JavaScriptはJavaに似ているらしい  仕様書にそう書いてある  どこが ▫ "JavaScript"のSは大文字  JAVAScriptとかJavascriptとかJava Scriptとかダメです
  6. 6. JavaScriptの仕様はどこで決まる?• 困ったら仕様を調べるのがイケてるエンジニア ▫ JavaScriptにはECMAScriptというベースとなる言語仕 様がある  これを決めているのがEcma Internationalという団体  http://www.ecma- international.org/publications/standards/Ecma-262.htm ▫ ここに、DOMツリーの操作やブラウザー固有の仕様 に伴うオブジェクトが追加される  これを最終的に勧告するのがW3C  例えば、localStorageの動きを調べたかったら、以下のペー ジを見ることになる ▫ http://www.w3.org/TR/webstorage/
  7. 7. ブラウザーの仕様実装状況• で、それを実装するのがGoogleであったり、 Mozillaであったり、Microsoftであったり ▫ 実装状況に差異が生まれる• 調べる ▫ http://caniuse.com/
  8. 8. 用語• オブジェクト ▫ 0以上の属性を持つ、プロパティの集合• プロパティ ▫ 他のオブジェクト, プリミティブ値, 関数の入れ物  Object properties in JavaScript : http://www.2ality.com/2012/10/javascript- properties.html?m=1• 属性 ▫ 書き込み可能、列挙可能などのプロパティの振る舞いを規 定するもの• 関数 ▫ 呼び出し可能なオブジェクトの一種(Object型)• メソッド ▫ オブジェクトのプロパティとして関連付けられている関数
  9. 9. レキシカルスコープ
  10. 10. 変数のスコープ • 基本的に関数に入るとスコープが変わる ▫ ただし、そのスコープで存在しない変数にアクセスすると、"構 文上の"1つ上のスコープを見に行く  静的スコープとかレキシカルスコープとか呼ぶ  動的スコープでは実行コンテキスト上の1つ上のスコープを見る(なにそれ 怖い)var maxLimit = 10;var console_array = function(target, from, to) { for (var i = from; i < to; i++) { if (i >= maxLimit) { break; } console.log(target[i]); }};console_array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 0, 100);maxLimit = 5;console_array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 0, 100);
  11. 11. var self = this; • 別の関数に入るとthisが変わってしまう ▫ 前のthisを覚えておきたい時に使うvar myObj = {};myObj.wait = 1000;myObj.waitFor = function(clos) { this.isFinished = false; var self = this; var func = function(clos) { setTimeout(function() { if (!self.isFinished) { myObj.waitFor(function(){ clos(); } else { console.log("hogehoge"); func(); }); } }, self.wait); }; func(clos);};
  12. 12. (function(){})(); • スクリプト内にJavaScriptをいきなり書き始めると、変数がグロー バル空間に定義される ▫ グローバル空間の汚染を防ぐために、最初に関数ブロックを作る  このブロックの中で、グローバル空間からアクセスできるようにした いものだけ、指定してエクスポートするvar myPrivateVariable = 42; (function(){var hogehoge = { var myPrivateVariable = 42; myFunction: function() { var hogehoge = { … myFunction: function() {}; … }; window.hogehoge = hogehoge; })();
  13. 13. (function(global){})(this); • 同様に、グローバル領域から対象を絞ってブロック内にオブジェク トを取り込みたい時は、以下のようにする(function(global){ var myPrivateVariable = 42; var hogehoge = { myFunction: function() { (function($){ … var myPrivateVariable = 42; }; var hogehoge = { global.hogehoge = hogehoge; myFunction: function() {})(window); … }; $.hogehoge = hogehoge; })(jQuery);
  14. 14. グローバル領域の汚染 • varを付け忘れるとグローバル空間の変数として定義されるvar util = { copy: function(from, to) { for (prop in from) { //varつけ忘れ to[prop] = from[prop]; } return to; }};var prop = "secret_key";function mytest() { console.log(prop); };
  15. 15. プロトタイプベースのオブジェクト指向言語
  16. 16. JavaScriptの型• 5つのプリミティブとobject ▫ number, string, boolean, null, undefined  ただし、typeof null; //”object” … ▫ object• 組み込みオブジェクト ▫ 18個(後述)  逆に言えば、これ以外のオブジェクトがコードに出 てきたらブラウザー側のオブジェクトと思えば良い
  17. 17. : 組み込み型 : 組み込みオブジェクト組み込み型と組み込みオブジェクト ObjectUndefined Object global Error Null EvalError Array Boolean RangeError Boolean Math Number ReferenceError Date SyntaxErrorNumber String JSON TypeError String Function URIError RegExp
  18. 18. プリミティブとobject var a = {}; var b = {}; a.prop = b;• プリミティブは値渡し、 オブジェクトは参照渡し b.hoge = "hoge"; a.prop.hoge; //"hoge" var x1 = "hoge";• プリミティブとラッパーオブジェクトは var x2 = "hoge"; 全く異なるもの var x3 = new String("hoge"); x1 === x2; //true x1 === x3; //false typeof x1; //"string" typeof x3; //"object" ▫ ラッパーオブジェクトをnewするのはあんまり良くない場合が多い ▫ ラッパーオブジェクトのメソッド利用はよくある ▫ でもプリミティブに対してもメソッドが呼べるけど…  これは、実行環境が内部的にラッパーオブジェクトを作ってそのメソッドを呼んで いるだけで、プリミティブにメソッドが生えているわけではない
  19. 19. Objectオブジェクト• {}と書くと作成できる ▫ new Object(); は普通使わない• ArrayもFunctionもObjectオブジェクトの子クラス var hoge = {}; hoge instanceof Object //true var hoge = []; hoge instanceof Object //true var hoge = function(){}; hoge instanceof Object //true• ObjectはMapではない ▫ そんな感じで使えなくもないが、普通に"Map"と呼ぶものではない  Indexを作ったりしないのでMapとして使うと遅いです ▫ たまに「JavaScriptでは連想配列=Object」と説明しているページがあるが、間違い ▫ MapはES6で入ります(WeakMapも)(きっと)  http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets  http://wiki.ecmascript.org/doku.php?id=harmony:weak_maps
  20. 20. Arrayオブジェクト• []と書くと作成できる ▫ new Array(); は普通使わない  というか普通に使うのはやめましょう  new Array("5").length; //配列の値の初期化なので1  new Array(5).length; //配列のサイズ指定なので5  new Array(5, 1).length; //配列の値の初期化なので2  new Array(variable).length //何ができるかはvariable依存• Objectの数字がキーになっている版、ではない ▫ 色々考えられてる、角度とか ▫ 生えているメソッドも違うし、実行速度も早い  ObjectでArrayの再実装みたいなものを作るのは 推奨しないです
  21. 21. Functionオブジェクト• 関数はオブジェクト ▫ 代入したり、受け渡ししたり、インスタンス作ったり• 関数オブジェクトはnewできる ▫ prototype  newされたインスタンスが持つプロパティ、メソッドを定義したもの  普通のオブジェクトにはない ▫ constructor  newされる時に呼ばれるメソッド  関数オブジェクト定義時に作成される  普通のオブジェクトにはない ▫ this  実行しているコンテキストを示すもの(後述)  オブジェクトのメソッドの場合、大抵はオブジェクトのインスタンスを指す
  22. 22. prototypeとconstructorvar MylistItem = function(title, desc) { MylistItem this.title = title; this.desc = desc;}; prototypeMylistItem.prototype.getTitle = function() { getTitle return this.title;};MylistItem === MylistItem.prototype.constructor; //truevar mylistItem = new MylistItem("hoge", "hogehogehoge"); mylistItemmylistItem.getTitle(); //"hoge"mylistItem.getTitle === MylistItem.prototype.getTitle; //true getTitle • constructor プロパティについて - hogehoge @teramako ▫ http://d.hatena.ne.jp/teramako/20120927/p1
  23. 23. MylistItem MylistGroup this prototype getTitle prototype getTitle mylistItem mylistGroup getTitle getTitlevar MylistGroup = function(id, title) { this.id = id; this.title = title;};MylistGroup.prototype.getTitle =MylistItem.prototype.getTitle; //普通やらないけど例なのでvar mylistGroup = new MylistGroup(1, "Vocaloid");mylistGroup.getTitle(); //"Vocaloid"
  24. 24. プロトタイプチェーンvar MylistVideo = function(title, desc, userId){ sm9.getTitle = function() { this.title = title; return "Mylist: " + this.title; this.desc = desc; }; this.userId = userId;}; sm9.getTitle(); //"Mylist: 陰陽師"MylistVideo.prototype = new MylistItem(); mylistItem.getTitle(); //"hoge"MylistVideo.prototype.getUserId = function() { return this.userId;};var sm9 = new MylistVideo(陰陽師, hoge, 2525);sm9.getUserId(); //2525sm9.getTitle(); //"陰陽師" • 自分が持っていないプロパティを、遡って探す ▫ あったらそれを使う
  25. 25. プロトタイプチェーン MylistVideo MylistItem MylistGroup prototype prototype prototype getTitle getTitle getTitle getUserId sm9 mylistItem mylistGroup getTitle getTitle getTitle getUserId
  26. 26. ダメな例 var MylistVideo = function(title, desc, userId){ this.title = title; this.desc = desc; this.userId = userId; }; MylistVideo.prototype = MylistItem.prototype; MylistVideo.prototype.getUserId = function() { return this.userId; }; var sm9 = new MylistVideo(陰陽師, hoge, 2525); sm9.getUserId(); //2525 sm9.getTitle(); //"陰陽師"• MylistItemにgetUserIdというメソッドが増えて しまう(参照なので)
  27. 27. ES仕様書でのprototypeの説明 CFコンストラクタのプロトタイプ CFコンストラクタ CFP1というプロパティを持っているprototypeとP1, P2というプロパティを 持っている CFコンストラクタから生成 されたオブジェクト達 q1, q2というプロパティを 持っている
  28. 28. ES仕様書でのprototypeの説明補足 • この図をコードで書くと、こんな感じ ▫ 普通にわかりづらいと思う //cf1-5からP1, P2にアクセスすることはできないvar CF = function(){}; cf1.P1; // undefinedCF.P1 = 1; //cf1-5からCFP1にアクセスすることはできる cf1.CFP1; // "foo"CF.P2 = "hoge"; cf2.CFP1; // "foo"CF.prototype = function(){}; //CFpのCFP1を書き換えると、CF.prototype.CFP1 = "foo"; //cf1-5からアクセスすると、var cf1 = new CF(); //全ての値が変わった(ように見える) CF.prototype.CFP1 = "bar";cf1.q1 = "cf1.q1"; cf1.CFP1; // "bar"cf1.q2 = "cf1.q2"; cf2.CFP1; // "bar"var cf2 = new CF(); //cf1にCFP1というプロパティを作ると、 //その値は共有されないcf2.q1 = "cf2.q1"; cf1.CFP1 = "test";cf2.q2 = "cf2.q2"; cf1.CFP1; // "test" cf2.CFP1; // "bar"
  29. 29. 見通しの良いコードを書く
  30. 30. 見通しの悪いコード• JavaScriptを普通に書いていくと、イケてないコードになりがち ▫ Why?  言語仕様上、どこからでもグローバルオブジェクトにアクセスできる  同様に、HTMLがグローバルオブジェクトのように利用できてしまう  HTMLやCSSと連携するため、元々書きたいコードに外部リソースへの依 存が激しい• 以下のようなルールを定義する ▫ コーディング規約を守る ▫ クラス化(Widget化)する ▫ JsDocを書く ▫ 依存を定数化する or 最初に解決する ▫ グローバルへの依存を減らす
  31. 31. コーディング規約• 色々参考になるものがあるので、何か決める ▫ Google  http://google- styleguide.googlecode.com/svn/trunk/javascriptguide.xml  和訳 : http://cou929.nu/data/google_javascript_style_guide/ ▫ Mozilla  https://developer.mozilla.org/ja/docs/JavaScript_style_guide ▫ jQuery  http://docs.jquery.com/JQuery_Core_Style_Guidelines ▫ その他いろいろ  JavaScriptのいろいろなコーディングルールをまとめてみた | Web scratch : http://efcl.info/2011/0527/res2764/
  32. 32. クラス化(Widget化)する • ある単位で、パーツとして分離する ▫ そのパーツのDOMノードは、常にこのクラスのインスタンスが抱え込 んで管理する = Widgetプログラミング ▫ 自身の管理するノードが決まれば、色々キャッシュもできるfunction updateMylistItem() { var MylistItem = function(targetId) { //マイリストアイテムを更新する this._node = $("#" + this.containerId).find("#"+targetId); }; $("#" + mylistContainer_id).load(); //ID依存! MylistItem.prototype.containerId =}; window.mylistContainerId;function loadAllMylistItem() { //ページ内の全てのアイテムを読み込む MylistGroup.prototype.load = function() { $("#" + mylistContainer_id).load(); //ID依存! };}; MylistItem.prototype.update = function() {//後から↓を追加すると、 };//updateMylistItemがおかしくなりそう…function showAllMylistItemDesc() { MylistItem.prototype.load = function() { //読込済みのマイリストアイテムの説明文を };出す};
  33. 33. JsDocを書く • メソッドやプロパティの説明を書く • グローバルへの依存性があるなら明記する • 他から利用されたくないメソッド等をprivateであることを明記する/** /** * @requires window.csrfToken; * マイリストアイテムの情報を更新する * @requires window.mylistContainerId; */ */ MylistItem.prototype.update = function(key, value) {var MylistItem = function(targetId) { (事前処理) this.targetId = targetId; this._update(key, value);}; };/** * アイテムが格納されるDOMノードのID /** */ * 実際にDOMを書き換えるMylistItem.prototype.containerId = window.mylistContainerId; * @private/** */ * ページに書き出されるCSRF Token MylistItem.prototype._update = function(key, value) {*/ (DOM書き換え処理)MylistItem.prototype.token = window.csrfToken; };
  34. 34. 依存を定数化する or 最初に解決する • 依存するDOMのIDなどは、集中管理する ▫ 決まった値であればprototypeにする ▫ 変数によって変わる値であれば、constructorで処理する ▫ 動的に変わるノードであれば、DOMを取得するメソッドを1つ用意し、必ずそ こ経由で取るようにする/** /** * @requires window.csrfToken; * @requires window.csrfToken; * @requires window.mylistContainerId; * @requires window.mylistContainerId; */ */ var MylistItem = function(targetId) { this.targetId = targetId;var MylistItem = function(targetId) { }; this._node = $("#" + this.targetId); MylistItem.prototype.getNode = function(id) {}; if (this._cache[id]) { return this._cache[id]; } else { var node = $("#" + this.targetId + "_" + id); if (node) { this._cache[id] = node; return node; } else { return null; } };
  35. 35. グローバルへの依存を減らす • HTML内にJavaScriptの関数名を書く必要があるケースはほとんど ないはず ▫ ある機能を持たせたい"特定のノード"の印を付けるには、Data Attribute などを使うと良い  独自データ属性 - グローバル属性 - HTML5 タグリファレンス - HTML5.JP : http://www.html5.jp/tag/attributes/data.html//window.loadMylistNextPageが出来て (function() {しまう… var nextButtons= $("[data-nico-mylist-action=next]");function loadMylistNextPage() { nextButtons.click(function() { (処理) (処理)} }); });<button onclick="loadMylistNextPage"> <button data-nico-mylist-action="next">次のページ 次のページ</button> </button>
  36. 36. これを続けていくと…• 見やすく&管理しやすくなったのは良いが…▫ JsDocでファイルサイズが増える…  JavaScriptビルドへの道  Closure Compiler▫ オブジェクトの初期化コストが高い…&ページ表 示時の処理が重い…  JavaScriptパターンへの道  初期化遅延などのパターン適用  デバッグツールへの道  重い処理を見つけてボトルネック解消
  37. 37. 開発者ツールの使い方
  38. 38. Internet Explorer• 開発者ツール ▫ F12で起動する  IE8から使える  IE7以前は…外部の開発ツールを入れるしかない• 機能 ▫ JavaScriptコンソール ▫ JavaScriptブレークポイントの設定 ▫ コールスタックを見る ▫ プロファイルが取れる
  39. 39. Firefox• Firebugを入れる ▫ F12で起動する• 機能 ▫ JavaScriptコンソール ▫ JavaScriptブレークポイントの設定 ▫ DOMブレークポイントの設定 ▫ コールスタックを見る ▫ プロファイルが取れる
  40. 40. Chrome• Developer Tools ▫ F12で起動する• 機能 ▫ JavaScriptコンソール ▫ JavaScriptブレークポイントの設定 ▫ DOMブレークポイントの設定 ▫ コールスタックを見る ▫ プロファイルが取れる ▫ パフォーマンス等の問題チェック  昔はFirebugもできたが…
  41. 41. 将来ではない、"今"のJavaScript• こんなことが今既にできる ▫ ECMAScript 5 : http://www.slideshare.net/ferrantes/ecmascript-5- 10575898• もう少しまともな継承っぽいことができる ▫ Object.create• 安全なオブジェクトが作れる ▫ Object.prototype.seal, defineProperty, freeze…• プロパティの読み書き時にフック出来る ▫ Getter/Setter• JSONオブジェクト! ▫ JSON
  42. 42. 将来のJavaScript• 現在の最新仕様は5.1• 次のバージョン6が策定中 ▫ 色々考えられてる、k(ry• 策定中の仕様や仕様案などはES Wikiにまとまって いる ▫ harmony:proposals [ES Wiki]  http://wiki.ecmascript.org/doku.php?id=harmony:propo sals ▫ harmony:specification_drafts [ES Wiki]  http://wiki.ecmascript.org/doku.php?id=harmony:specif ication_drafts
  43. 43. arrow function - examplesfunction (x) { return x * x; (x) => x * x}var self = this;list.forEach(function(item){ self.hoge(item);}); list.forEach((item) => this.hoge(item))}, • harmony:arrow_function_syntax [ES Wiki] ▫ http://wiki.ecmascript.org/doku.php?id=harmony:arrow_function_syntax • The Exciting Future of Javascript | Web Builder Zone ▫ http://css.dzone.com/articles/exciting-future-javascript-0 • What is the meaning of this? » Yahoo! User Interface Blog (YUIBlog) ▫ http://www.yuiblog.com/blog/2012/03/30/what-is-the-meaning-of-this • ECMAScriptで提案されている arrow function について - hogehoge @teramako ▫ http://d.hatena.ne.jp/teramako/20120403/es_proposal_arrow_function
  44. 44. arrow function• 特徴 ▫ thisが固定化される&newできない  ES Wikiの記述  Because "this" is lexically bound, "arrow.call" and "arrow.apply" cannot bind a different "this" parameter value, but they can pass arbitrary arguments, of course.  動的なthisを使いたかったら以下のように明示的に 渡す  (that, x) => { that.property = x; }
  45. 45. Class Definitions • ES Wikiにある例function SkinnedMesh(geometry, materials) { THREE.Mesh.call(this, geometry, materials); class SkinnedMesh extends THREE.Mesh { constructor(geometry, materials) { this.identityMatrix = new THREE.Matrix4(); super(geometry, materials); this.bones = []; this.boneMatrices = []; public identityMatrix = new THREE.Matrix4(); ... public bones = [];}; public boneMatrices = []; ...SkinnedMesh.prototype = Object.create(THREE.Mesh.prototype); }SkinnedMesh.prototype.constructor = SkinnedMesh; update(camera) {SkinnedMesh.prototype.update = function(camera) { ... ... super.update(); THREE.Mesh.prototype.update.call(this); }}; } ▫ classが入るなら、残りの予約語系も使えるようになってほしい(というかそれが ないとあんまり意味がなさそう)けど、それをやり始めると止まらなくなる予感  implements, private, public, interface, package, protected, static  ES4ェ…
  46. 46. Quasi Literals / Tagged Quasis• Quasi ▫ 【形】疑似の、類似の、外見上の、うわべだけの ▫ 【副】外見上、ある程度• ES Wikiの記述 ▫ http://wiki.ecmascript.org/doku.php?id=harmony:quasis
  47. 47. Next Step > Webページを読む• 既にたくさんいいドキュメントがあるので読みましょう ▫ 入門  JavaScript 「再」入門 - JavaScript | MDN  https://developer.mozilla.org/ja/docs/JavaScript/A_re-introduction_to_JavaScript  型とかオブジェクトとか基本的なことを理解する - あと味  http://taiju.hatenablog.com/entry/20110416/1302939377 ▫ ベストプラクティス  JavaScriptベストプラクティス30選-jsEdu | Web scratch  http://efcl.info/2010/1015/res1985/  JavaScript Garden  http://bonsaiden.github.com/JavaScript-Garden/ja/  コーディング規約  Google ▫ http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml ▫ 和訳 : http://cou929.nu/data/google_javascript_style_guide/  Mozilla ▫ https://developer.mozilla.org/ja/docs/JavaScript_style_guide  jQuery ▫ http://docs.jquery.com/JQuery_Core_Style_Guidelines ▫ 理解度を測る  JavaScriptの業務スキルレベル 判別表 (5段階) - 主に言語とシステム開発に関して  http://d.hatena.ne.jp/language_and_engineering/20100111/p1  JavaScriptで,オブジェクトやクラスの初歩を理解しているか,実力を確かめるための7つの質問 (サンプル コード付き) - 主に言語とシステム開発に関して  http://d.hatena.ne.jp/language_and_engineering/20100921/p1
  48. 48. Next Step > 本を読む• 本を読む ▫ JavaScript第6版 (通称 "サイ本")  http://www.amazon.co.jp/dp/4873115736 ▫ ステートフルJavaScript  http://www.amazon.co.jp/dp/487311554X ▫ パーフェクトJavaScript  http://www.amazon.co.jp/dp/477414813X ▫ JavaScriptパターン  http://www.amazon.co.jp/dp/4873114888 ▫ JavaScript: The Good Parts  http://www.amazon.co.jp/dp/4873113911
  49. 49. Next Step > JS関係の情報を追う• 僕がよく見ているJS絡みの人たち ▫ https://twitter.com/rika_t/js• JavaScript関連のニュース ▫ JSer.info : http://jser.info/  世界中のJS関連ニュースが紹介される
  50. 50. Next Step > 勉強会に出る• ECMAScript勉強会 ▫ http://atnd.org/events/25793 ▫ http://atnd.org/events/30676

×