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基礎勉強会

12,127 views

Published on

社内でやったJavaScriptの基礎勉強する会のためのスライドです

Published in: Software
  • Dating for everyone is here: ♥♥♥ http://bit.ly/2Qu6Caa ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ♥♥♥ http://bit.ly/2Qu6Caa ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

JavaScript基礎勉強会

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

×