45
2015/10/04 18:33 1/45 ページ http://localhost:3000/es6.md?print-pdf=1#/ es6 cognition @kanayannet Gunma.web #21

Es6 cognition

Embed Size (px)

Citation preview

Page 1: Es6 cognition

2015/10/04 18:33

1/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

es6 cognition@kanayannet

Gunma.web #21

Page 2: Es6 cognition

2015/10/04 18:33

2/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

今日話すことWhat is ES?

Cognition?

Javascript Problem

もう一度 Cognition?

そこで ES6

CofeeScript TypeScript?

Page 3: Es6 cognition

2015/10/04 18:33

3/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

自己紹介名前 : 金澤 宏昭開発環境

OS : CentOS(Linux) , Mac

言語 : Ruby , Perl , JS , HTML , CSS...

Page 4: Es6 cognition

2015/10/04 18:33

4/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

SNSTwitter : @kanayannet

Facebook : HiroakiKanazawa

Page 5: Es6 cognition

2015/10/04 18:33

5/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

愛犬家

Page 6: Es6 cognition

2015/10/04 18:33

6/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

What is ES?

ES = EcmaScript

Page 7: Es6 cognition

2015/10/04 18:33

7/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

EcmaScript?

EcmaScript ≒ Javascript

Page 8: Es6 cognition

2015/10/04 18:33

8/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

過去の経緯ECMAScriptは Ecma International によって標準化されたスクリプト言語実装ごとの互換性が低い JavaScript 類(特に JScript)の標準を定めたものである。

by Wikipedia

Page 9: Es6 cognition

2015/10/04 18:33

9/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

金澤的 見解各社 が JScriptなど独自路線を取ってしまい

「何が標準なの?」状態になったため Ecma International という団体が

「標準規格化」しました...

Page 10: Es6 cognition

2015/10/04 18:33

10/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

ECMAって?

European Computer ManufacturersAssociation

日本のJIS規格的な

Page 11: Es6 cognition

2015/10/04 18:33

11/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

ブラウザに採用され始めたのは?2009年 version5 から

IE9 くらい?

"use strict";未定義のグローバルObjectに代入などを防ぎます。

Page 12: Es6 cognition

2015/10/04 18:33

12/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

Cognition?Cognition = 認知認識 ≒ 認知使われる分野が違う(認識は哲学)

Page 13: Es6 cognition

2015/10/04 18:33

13/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

ちなみにes6 が認知された話ではありません。もう世の中にあるのでw

Page 14: Es6 cognition

2015/10/04 18:33

14/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

認知?心理学などで、人間などが外界にある対象を知覚した上で、それが何であるかを判断したり解釈したりする過程のこと。

by wikipedia

Page 15: Es6 cognition

2015/10/04 18:33

15/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

認知症?後天的な脳の器質的障害により、いったん正常に発達した知能が不可逆的に低下した状態をいう。

by wikipedia

実は今は亡き父がなりました。

Page 16: Es6 cognition

2015/10/04 18:33

16/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

問題を意識できるか?徘徊、トイレットペーパを巻き続ける、忘れやすくなる...etcもちろん、答えは NOです。

Page 17: Es6 cognition

2015/10/04 18:33

17/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

なぜ今この話?後述で話していきます。

Page 18: Es6 cognition

2015/10/04 18:33

18/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

Javascript ProblemObject指向やる時...

「new」ってやりますよね?

Page 19: Es6 cognition

2015/10/04 18:33

19/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

Sample Codevarvar Name = Name = functionfunction((namename)){{ thisthis.name = name;.name = name;}}varvar hoge = hoge = newnew Name( Name('Hiroaki Kanazawa''Hiroaki Kanazawa'););consoleconsole.log(hoge.name); .log(hoge.name); // -> 'Hiroaki Kanazawa'// -> 'Hiroaki Kanazawa'

Page 20: Es6 cognition

2015/10/04 18:33

20/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

ちなみに 「new」を忘れると..?varvar Name = Name = functionfunction((namename)){{ thisthis.name = name;.name = name;}}varvar hoge = Name( hoge = Name('Hiroaki Kanazawa''Hiroaki Kanazawa'););consoleconsole.log(name); .log(name); // -> 'Hiroaki Kanazawa'// -> 'Hiroaki Kanazawa'

Page 21: Es6 cognition

2015/10/04 18:33

21/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

なぜ?Global Object に代入されてしまった。

Global Object -> window.name -> name

"use strict" で問題に気付かせる事は出来る。とはいえ..new するのに function て...><

Page 22: Es6 cognition

2015/10/04 18:33

22/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

これどうなる?"use strict""use strict";;varvar fuga = fuga = "global""global";; functionfunction funcfunc(()) {{ consoleconsole.log(fuga) .log(fuga) // // どうなる?;?; varvar fuga = fuga = "local""local";; consoleconsole.log(fuga) .log(fuga) // // どうなる?;?;}}func();func();consoleconsole.log(fuga) .log(fuga) // // どうなる?;?;

Page 23: Es6 cognition

2015/10/04 18:33

23/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

巻き上げ"use strict""use strict";;varvar fuga = fuga = "global""global";; functionfunction funcfunc(()) {{ consoleconsole.log(fuga) .log(fuga) // -> undefined;// -> undefined; varvar fuga = fuga = "local""local";; consoleconsole.log(fuga) .log(fuga) // -> local;// -> local;}}func();func();consoleconsole.log(fuga) .log(fuga) // -> global;// -> global;

Page 24: Es6 cognition

2015/10/04 18:33

24/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

"use strict" でも解消できない ><

Page 25: Es6 cognition

2015/10/04 18:33

25/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

もう一度 Cognition?実際に開発をやっていて、先ほどの問題が起きた場合どうなる?

Page 26: Es6 cognition

2015/10/04 18:33

26/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

気付けるの?認知できなくなる状態は認知症の人だけではない。

Page 27: Es6 cognition

2015/10/04 18:33

27/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

我々も同様ですよ?new し忘れる。use strict 忘れる。グローバル変数名と同じ変数名を使う。巻き上げ が起きても「動いてしまう」

Page 28: Es6 cognition

2015/10/04 18:33

28/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

動いてしまうと..気づきずらいですよね?

Page 29: Es6 cognition

2015/10/04 18:33

29/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

テストが甘い?そういう人(若い人)もいるかも?しれないが...

Page 30: Es6 cognition

2015/10/04 18:33

30/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

認知できないものをどう気づく?

Page 31: Es6 cognition

2015/10/04 18:33

31/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

そこで ES6

Page 32: Es6 cognition

2015/10/04 18:33

32/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

Sample Codeclassclass NameName {{ constructor(name){ constructor(name){ thisthis.name = name;.name = name; } }}}varvar hoge = hoge = newnew Name( Name('Hiroaki Kanazawa''Hiroaki Kanazawa'););consoleconsole.log(hoge.name);.log(hoge.name);

Page 33: Es6 cognition

2015/10/04 18:33

33/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

先ほどの問題はおきないfunction -> class になる事で new し忘れたら、即エラーfunction -> class だと 巻き上げ も起きなくなってます。

Page 34: Es6 cognition

2015/10/04 18:33

34/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

他の機能もあります。extends -> class継承let -> ブロックスコープの変数宣言const -> 定数の宣言

Page 35: Es6 cognition

2015/10/04 18:33

35/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

対応ブラウザhttp://kangax.github.io/compat-table/es6/

Page 36: Es6 cognition

2015/10/04 18:33

36/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

何か工夫が必要

Page 37: Es6 cognition

2015/10/04 18:33

37/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

そこで Babel

Page 38: Es6 cognition

2015/10/04 18:33

38/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

install

* script.js は es6 で書かれている

npm npm installinstall - -gg babel babelbabel script.jsbabel script.js

Page 39: Es6 cognition

2015/10/04 18:33

39/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

やってみよう

Page 40: Es6 cognition

2015/10/04 18:33

40/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

CoffeeScript

TypeScript ?便利にJSへ変換するツール類

Page 41: Es6 cognition

2015/10/04 18:33

41/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

Babel の話がでると?今後どうなるの? 的な話を目にするのですが...

Page 42: Es6 cognition

2015/10/04 18:33

42/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

ぶっちゃけ読めません><

Page 43: Es6 cognition

2015/10/04 18:33

43/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

ただし..今回のES6 の話は ECMAという標準規格化 する団体が決めた事。ブラウザ サポートが有効になりはじめると..変換する必要がなくなる。

Page 44: Es6 cognition

2015/10/04 18:33

44/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

おまけブラウザサポート便利集w

by @_shimizuhttp://qiita.com/_shimizu/items/1dd5dd0f9f88f96188ef

Page 45: Es6 cognition

2015/10/04 18:33

45/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/

ご清聴ありがとうございまし

た!