JavaScript基礎勉強会

Transcript

• 1. 第一回 JavaScript勉強会 小倉 大樹
• 2. JavaScript道 1. 必須の基礎知識 2. モダンJavaScript 初級編 3. JavaScript最新事情 4. 以後未定 ECMAScript 今日はここやります
• 3. JavaScriptの基礎知識 jQuery その前に
• 4. strict mode 変数宣言 関数定義 スコープ クロージャ プロトタイプ指向 Courses JavaScriptの基礎知識
• 5. Strict mode ゆるふわ禁止
• 6. strict mode （厳格モード）とは？ "use strict"; // global ! function() { "use strict"; // innner only }
• 7. strict mode 宣言されていない変数への代入 書込み不可の変数への代入 書き込み不可プロパティへの代入 削除不可のプロパティの削除 プロパティ名の重複 関数の引数名の重複 etcetcetcetc………… 効果 Error!
• 8. 変数宣言 おおっと 落とし穴！
• 9. 変数の巻き上げ 以下がどうなるかわかりますか？ (function () { console.log(a); var a = 'aaaa'; console.log(a); })(); undefined “aaaa” エラーにならない！
• 10. 変数の宣言 変数の巻き上げ どうしてエラーにならなかったの？ (function () { var a; console.log(a); var a = 'aaaa'; console.log(a); })(); こういう風に解釈されたから
• 11. 変数の宣言 全部 ”button No. ${buttons.length}” と表示されてしまう！ なんか問題あんの？ 適当に書けて便利じゃん？ var buttons = document.querySelectorAll('button'); for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener( 'click', function () { console.log('button No.' + i); } ); }
• 12. 変数宣言のルール 変数の宣言は全部関数の先頭で ダサいけど、そういう言語だから諦める
• 13. 関数定義 案外ややこしい
• 14. 関数宣言 関数式 // statement function hoge() {} ! // expression var hoge = function() {}; 何がちがうの…… わからん！
• 15. 関数の定義方法 宣言だと関数名の巻き上げが行われる なのでルーズな書き方が出来てしまう どっちを使うべきなの？ ゆるふわ禁止！ 基本は関数式！
• 16. スコープ 基本です
• 17. スコープ 二種類しかないよ var globar = 'global desu'; ! function scope1() { var locar = 'local desu'; console.log(globar); // global desu function scope2() { var locarSecond = 'local mark2 desu'; console.log(locar); // local desu } console.log(locarSecond); // ReferenceError: locarSecond is not defined } console.log(locar); // ReferenceError: locar is not defined
• 18. スコープ 応用テクニック (function() { var locar = 'local desu'; window.globar = 'global desu'; })(); console.log(locar); // ReferenceError: locar is not defined console.log(globar); // global desu グローバル汚染を防ぐため、ほんとに最低限の作法。 モダンJSにおいてはモジュール化の手法を学ぶべし。
• 19. クロージャ これ知らないとはじまらない！
• 20. その前に
• 21. 呼び出すたびに 数をインクリメントしていく関数 作れますか何種類 クロージャの例題あるある
• 22. 簡単な実装 var i = 0; ! var inc = function() { i += 1; return i; }; ! inc(); // 1 inc(); // 2 inc(); // 3 いけてない……
• 23. var i = 0; var h = 0; ! var inc1 = function() { i += 1; return i; }; ! var inc2 = function() { h += 1; return h; }; 何がダメか グローバル汚染、汎用性なし、拡張性なし……
• 24. クロージャ使えってか？
• 25. クロージャを使った解答 var incrementGenerator = function (start) { var inc = function () { start += 1; return start; } return inc; }; ! var inc1 = incrementGenerator(0); var inc2 = incrementGenerator(0); ! inc1(); // 1 inc2(); // 1 inc1(); // 2 inc2(); // 2
• 26. なるほどわからん 関数閉包はプログラミング言語における関数オ ブジェクトの一種。いくつかの言語ではラムダ 式や無名関数で実現している。引数以外の変数 を実行時の環境ではなく、自身が定義された環 境（静的スコープ）において解決することを特 徴とする。関数とそれを評価する環境のペア であるともいえる。この概念は少なくとも 1960年代のSECDマシンまで ること ができる。 from wikipedia どういうこと？
• 27. 復習：スコープ var globar = 'global desu'; ! function scope1() { var locar = 'local desu'; console.log(globar); // global desu function scope2() { var locarSecond = 'local mark2 desu'; console.log(locar); // local desu } console.log(locarSecond); // ReferenceError: locarSecond is not defined } console.log(locar); // ReferenceError: locar is not defined
• 28. 復習：スコープ var staticScope = (function () { var locar = 'local desu'; var innerEnvironment = function () { return locar; }; return innerEnvironment; })(); ! console.log(staticScope()); // local desu console.log(staticScope()); // local desu 参照した変数が生き続ける
• 29. レキシカルスコープ 理解のポイント • 上のスコープ（関数）の変数を参照（束縛）出来る • 束縛した環境は持ち運べる • 実行ごとに新しい環境が作られる • 定義時の静的なスコープが参照範囲 それだけ
• 30. Q：何に使えるの？ 例えば • データと振る舞いの結合が出来る • プライベート変数、関数みたいなものを作れる • カリー化などの関数型テクニック • その他…… A：色んなところ
• 31. でも循環参照だけは勘弁な！ 呼吸するように使う
• 32. プロトタイプ指向 クラスとは違うのだよ
• 33. オブジェクト指向に 大切なこと 振る舞いとデータの結合 情報の隠 多態性
• 34. case: プロトタイプ var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter; })(); ! var greeter = new Greeter("world"); console.log(greeter.greet());
• 35. class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } ! var greeter = new Greeter("world"); console.log(greeter.greet()); case: クラス
• 36. JavaScriptは オブジェクト指向言語
• 37. Caution!
• 38. JavaScriptのヤバいところ オブジェクトの定義方法がいくつもある クラス的なものの定義方法もいくつもある 継承的なものの実現方法がいくつもある 後から定義を拡張したりとか出来る それぞれ流行り廃りが激しい しかもそれぞれ互換性がなかったりする
• 39. やってはいけない そもそも使い方を知らない（論外） ネットで探してコピペ（論外） オレオレオブジェクト指向ライブラリを作る（趣味でやろう） サードパーティライブラリが提供しているものを使う（微妙な所）
• 40. どうするべき？ チームで話し合ってライブラリと書き方を統一する AltJSを使う EcmaScrip6を待つ しかないと思う……
• 41. 次回の予定 オブザーバーパターン jshint Promise モジュール化いろいろ