Your SlideShare is downloading. ×
0
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
JavaScript study for learners
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript study for learners

1,945

Published on

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

No Downloads
Views
Total Views
1,945
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JavaScript Study for learners高橋 健太@rika_t / rika-t
  • 2. Who am I?• rika-t ▫ Twitter: @rika_t ▫ ドワンなんとかという会社でニコニなんとかを 作っています ▫ それより以前はIBMでDojo Toolkitを使った簡単 なお仕事をしていました ▫ JavaScript歴は3年くらい?  最近はほとんど書いてない
  • 3. What’s this presentation?• 対象 ▫ JavaScriptで何となく動くものを作ったことがあ る、位の人• 目的 ▫ もう少しJavaScriptのことを深く理解できるよう になる ▫ 他の人のコードでも、一人で原因調査ができる& 解決できるようになる
  • 4. Agenda• JavaScript仕様の話• JavaScriptの用語• JavaScriptの特徴 ▫ レキシカルスコープ ▫ プロトタイプベースのオブジェクト指向言語• JavaScriptのデバッグ ▫ 見通しの良いコードを書く ▫ 開発者ツールの使い方• 将来のJavaScript• JavaScriptを継続して学ぶ
  • 5. JavaScriptの歴史• JS history : http://www.slideshare.net/badatmath/js- shistory を読みましょう• どうでもいいこと ▫ JavaScriptはJavaに似ているらしい  仕様書にそう書いてある  どこが ▫ "JavaScript"のSは大文字  JAVAScriptとかJavascriptとかJava Scriptとかダメです
  • 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. ブラウザーの仕様実装状況• で、それを実装するのがGoogleであったり、 Mozillaであったり、Microsoftであったり ▫ 実装状況に差異が生まれる• 調べる ▫ http://caniuse.com/
  • 8. 用語• オブジェクト ▫ 0以上の属性を持つ、プロパティの集合• プロパティ ▫ 他のオブジェクト, プリミティブ値, 関数の入れ物  Object properties in JavaScript : http://www.2ality.com/2012/10/javascript- properties.html?m=1• 属性 ▫ 書き込み可能、列挙可能などのプロパティの振る舞いを規 定するもの• 関数 ▫ 呼び出し可能なオブジェクトの一種(Object型)• メソッド ▫ オブジェクトのプロパティとして関連付けられている関数
  • 9. レキシカルスコープ
  • 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. 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. (function(){})(); • スクリプト内にJavaScriptをいきなり書き始めると、変数がグロー バル空間に定義される ▫ グローバル空間の汚染を防ぐために、最初に関数ブロックを作る  このブロックの中で、グローバル空間からアクセスできるようにした いものだけ、指定してエクスポートするvar myPrivateVariable = 42; (function(){var hogehoge = { var myPrivateVariable = 42; myFunction: function() { var hogehoge = { … myFunction: function() {}; … }; window.hogehoge = hogehoge; })();
  • 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. グローバル領域の汚染 • 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. プロトタイプベースのオブジェクト指向言語
  • 16. JavaScriptの型• 5つのプリミティブとobject ▫ number, string, boolean, null, undefined  ただし、typeof null; //”object” … ▫ object• 組み込みオブジェクト ▫ 18個(後述)  逆に言えば、これ以外のオブジェクトがコードに出 てきたらブラウザー側のオブジェクトと思えば良い
  • 17. : 組み込み型 : 組み込みオブジェクト組み込み型と組み込みオブジェクト ObjectUndefined Object global Error Null EvalError Array Boolean RangeError Boolean Math Number ReferenceError Date SyntaxErrorNumber String JSON TypeError String Function URIError RegExp
  • 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. 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. 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. Functionオブジェクト• 関数はオブジェクト ▫ 代入したり、受け渡ししたり、インスタンス作ったり• 関数オブジェクトはnewできる ▫ prototype  newされたインスタンスが持つプロパティ、メソッドを定義したもの  普通のオブジェクトにはない ▫ constructor  newされる時に呼ばれるメソッド  関数オブジェクト定義時に作成される  普通のオブジェクトにはない ▫ this  実行しているコンテキストを示すもの(後述)  オブジェクトのメソッドの場合、大抵はオブジェクトのインスタンスを指す
  • 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. 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. プロトタイプチェーン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. プロトタイプチェーン MylistVideo MylistItem MylistGroup prototype prototype prototype getTitle getTitle getTitle getUserId sm9 mylistItem mylistGroup getTitle getTitle getTitle getUserId
  • 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. ES仕様書でのprototypeの説明 CFコンストラクタのプロトタイプ CFコンストラクタ CFP1というプロパティを持っているprototypeとP1, P2というプロパティを 持っている CFコンストラクタから生成 されたオブジェクト達 q1, q2というプロパティを 持っている
  • 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. 見通しの良いコードを書く
  • 30. 見通しの悪いコード• JavaScriptを普通に書いていくと、イケてないコードになりがち ▫ Why?  言語仕様上、どこからでもグローバルオブジェクトにアクセスできる  同様に、HTMLがグローバルオブジェクトのように利用できてしまう  HTMLやCSSと連携するため、元々書きたいコードに外部リソースへの依 存が激しい• 以下のようなルールを定義する ▫ コーディング規約を守る ▫ クラス化(Widget化)する ▫ JsDocを書く ▫ 依存を定数化する or 最初に解決する ▫ グローバルへの依存を減らす
  • 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. クラス化(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. 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. 依存を定数化する 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. グローバルへの依存を減らす • 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. これを続けていくと…• 見やすく&管理しやすくなったのは良いが…▫ JsDocでファイルサイズが増える…  JavaScriptビルドへの道  Closure Compiler▫ オブジェクトの初期化コストが高い…&ページ表 示時の処理が重い…  JavaScriptパターンへの道  初期化遅延などのパターン適用  デバッグツールへの道  重い処理を見つけてボトルネック解消
  • 37. 開発者ツールの使い方
  • 38. Internet Explorer• 開発者ツール ▫ F12で起動する  IE8から使える  IE7以前は…外部の開発ツールを入れるしかない• 機能 ▫ JavaScriptコンソール ▫ JavaScriptブレークポイントの設定 ▫ コールスタックを見る ▫ プロファイルが取れる
  • 39. Firefox• Firebugを入れる ▫ F12で起動する• 機能 ▫ JavaScriptコンソール ▫ JavaScriptブレークポイントの設定 ▫ DOMブレークポイントの設定 ▫ コールスタックを見る ▫ プロファイルが取れる
  • 40. Chrome• Developer Tools ▫ F12で起動する• 機能 ▫ JavaScriptコンソール ▫ JavaScriptブレークポイントの設定 ▫ DOMブレークポイントの設定 ▫ コールスタックを見る ▫ プロファイルが取れる ▫ パフォーマンス等の問題チェック  昔はFirebugもできたが…
  • 41. 将来ではない、"今"のJavaScript• こんなことが今既にできる ▫ ECMAScript 5 : http://www.slideshare.net/ferrantes/ecmascript-5- 10575898• もう少しまともな継承っぽいことができる ▫ Object.create• 安全なオブジェクトが作れる ▫ Object.prototype.seal, defineProperty, freeze…• プロパティの読み書き時にフック出来る ▫ Getter/Setter• JSONオブジェクト! ▫ JSON
  • 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. 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. 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. 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. Quasi Literals / Tagged Quasis• Quasi ▫ 【形】疑似の、類似の、外見上の、うわべだけの ▫ 【副】外見上、ある程度• ES Wikiの記述 ▫ http://wiki.ecmascript.org/doku.php?id=harmony:quasis
  • 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. 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. Next Step > JS関係の情報を追う• 僕がよく見ているJS絡みの人たち ▫ https://twitter.com/rika_t/js• JavaScript関連のニュース ▫ JSer.info : http://jser.info/  世界中のJS関連ニュースが紹介される
  • 50. Next Step > 勉強会に出る• ECMAScript勉強会 ▫ http://atnd.org/events/25793 ▫ http://atnd.org/events/30676

×