Upload
net-kanayan
View
462
Download
1
Embed Size (px)
Citation preview
2015/10/04 18:33
1/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
es6 cognition@kanayannet
Gunma.web #21
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?
2015/10/04 18:33
3/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
自己紹介名前 : 金澤 宏昭開発環境
OS : CentOS(Linux) , Mac
言語 : Ruby , Perl , JS , HTML , CSS...
2015/10/04 18:33
4/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
SNSTwitter : @kanayannet
Facebook : HiroakiKanazawa
2015/10/04 18:33
5/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
愛犬家
2015/10/04 18:33
6/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
What is ES?
ES = EcmaScript
2015/10/04 18:33
7/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
EcmaScript?
EcmaScript ≒ Javascript
2015/10/04 18:33
8/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
過去の経緯ECMAScriptは Ecma International によって標準化されたスクリプト言語実装ごとの互換性が低い JavaScript 類(特に JScript)の標準を定めたものである。
by Wikipedia
2015/10/04 18:33
9/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
金澤的 見解各社 が JScriptなど独自路線を取ってしまい
「何が標準なの?」状態になったため Ecma International という団体が
「標準規格化」しました...
2015/10/04 18:33
10/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
ECMAって?
European Computer ManufacturersAssociation
日本のJIS規格的な
2015/10/04 18:33
11/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
ブラウザに採用され始めたのは?2009年 version5 から
IE9 くらい?
"use strict";未定義のグローバルObjectに代入などを防ぎます。
2015/10/04 18:33
12/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
Cognition?Cognition = 認知認識 ≒ 認知使われる分野が違う(認識は哲学)
2015/10/04 18:33
13/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
ちなみにes6 が認知された話ではありません。もう世の中にあるのでw
2015/10/04 18:33
14/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
認知?心理学などで、人間などが外界にある対象を知覚した上で、それが何であるかを判断したり解釈したりする過程のこと。
by wikipedia
2015/10/04 18:33
15/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
認知症?後天的な脳の器質的障害により、いったん正常に発達した知能が不可逆的に低下した状態をいう。
by wikipedia
実は今は亡き父がなりました。
2015/10/04 18:33
16/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
問題を意識できるか?徘徊、トイレットペーパを巻き続ける、忘れやすくなる...etcもちろん、答えは NOです。
2015/10/04 18:33
17/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
なぜ今この話?後述で話していきます。
2015/10/04 18:33
18/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
Javascript ProblemObject指向やる時...
「new」ってやりますよね?
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'
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'
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 て...><
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) // // どうなる?;?;
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;
2015/10/04 18:33
24/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
"use strict" でも解消できない ><
2015/10/04 18:33
25/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
もう一度 Cognition?実際に開発をやっていて、先ほどの問題が起きた場合どうなる?
2015/10/04 18:33
26/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
気付けるの?認知できなくなる状態は認知症の人だけではない。
2015/10/04 18:33
27/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
我々も同様ですよ?new し忘れる。use strict 忘れる。グローバル変数名と同じ変数名を使う。巻き上げ が起きても「動いてしまう」
2015/10/04 18:33
28/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
動いてしまうと..気づきずらいですよね?
2015/10/04 18:33
29/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
テストが甘い?そういう人(若い人)もいるかも?しれないが...
2015/10/04 18:33
30/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
認知できないものをどう気づく?
2015/10/04 18:33
31/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
そこで ES6
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);
2015/10/04 18:33
33/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
先ほどの問題はおきないfunction -> class になる事で new し忘れたら、即エラーfunction -> class だと 巻き上げ も起きなくなってます。
2015/10/04 18:33
34/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
他の機能もあります。extends -> class継承let -> ブロックスコープの変数宣言const -> 定数の宣言
2015/10/04 18:33
35/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
対応ブラウザhttp://kangax.github.io/compat-table/es6/
2015/10/04 18:33
36/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
何か工夫が必要
2015/10/04 18:33
37/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
そこで Babel
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
2015/10/04 18:33
39/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
やってみよう
2015/10/04 18:33
40/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
CoffeeScript
TypeScript ?便利にJSへ変換するツール類
2015/10/04 18:33
41/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
Babel の話がでると?今後どうなるの? 的な話を目にするのですが...
2015/10/04 18:33
42/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
ぶっちゃけ読めません><
2015/10/04 18:33
43/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
ただし..今回のES6 の話は ECMAという標準規格化 する団体が決めた事。ブラウザ サポートが有効になりはじめると..変換する必要がなくなる。
2015/10/04 18:33
44/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
おまけブラウザサポート便利集w
by @_shimizuhttp://qiita.com/_shimizu/items/1dd5dd0f9f88f96188ef
2015/10/04 18:33
45/45 ページhttp://localhost:3000/es6.md?print-pdf=1#/
ご清聴ありがとうございまし
た!