iggg 2015/09 で発表した資料です。

1. 2015/09/26 16:53
1/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
ES6ES6 はじめましたはじめました
@kanayannet
IGGG Meetup 2015 Summer

2. 2015/09/26 16:53
2/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
今日話すこと今日話すこと
自己紹介
What is ES?
Javascript Problem
そこで ES6
宣伝

3. 2015/09/26 16:53
3/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
自己紹介自己紹介
名前 : 金澤 宏昭
開発環境
OS : CentOS(Linux) , Mac
言語 : Ruby , Perl , JS , HTML , CSS...

4. 2015/09/26 16:53
4/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
SNSSNS
Twitter : @kanayannet
Facebook : HiroakiKanazawa

5. 2015/09/26 16:53
5/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
愛犬家愛犬家

6. 2015/09/26 16:53
6/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
What is ES?What is ES?
ES = EcmaScript

7. 2015/09/26 16:53
7/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
EcmaScript?EcmaScript?
EcmaScript ≒ Javascript

8. 2015/09/26 16:53
8/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
過去の経緯過去の経緯
ECMAScriptは Ecma International によって標
準化された
スクリプト言語
実装ごとの互換性が低い JavaScript 類（特に
JScript）の
標準を定めたものである。
by Wikipedia

9. 2015/09/26 16:53
9/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
金澤的金澤的 見解見解
各社 が JScriptなど独自路線を取ってしまい
「何が標準なの?」
状態になったため Ecma International という
団体が
「標準規格化」
しました...

10. 2015/09/26 16:53
10/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
ECMAECMAってって??
European Computer Manufacturers
Association
日本のJIS規格的な

11. 2015/09/26 16:53
11/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
ブラウザに採用され始めたのブラウザに採用され始めたの
はは??

12. 2015/09/26 16:53
12/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
2009年 version5 から
IE9 くらい?
"use strict";
未定義のグローバルObjectに代入などを
防ぎます。

13. 2015/09/26 16:53
13/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
JavascriptJavascript
ProblemProblem
Object指向やる時...

14. 2015/09/26 16:53
14/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
「new」
ってやりますよね?

15. 2015/09/26 16:53
15/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
Sample CodeSample Code
varvar 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'

16. 2015/09/26 16:53
16/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
ちなみにちなみに 「「newnew」を忘れる」を忘れる
とと..?..?
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'

17. 2015/09/26 16:53
17/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
なぜなぜ??
Global Object に代入されてしまった。
Global Object -> window.name -> name
"use strict" で問題に気付かせる事は出来
る。
とはいえ..new するのに function て...＞＜

18. 2015/09/26 16:53
18/32 ページhttp://localhost:3000/iggg.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) //// どうなる?;?;

19. 2015/09/26 16:53
19/32 ページhttp://localhost:3000/iggg.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;

20. 2015/09/26 16:53
20/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
"use strict""use strict" でも解消できなでも解消できな
いい ＞＜＞＜

21. 2015/09/26 16:53
21/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
そこでそこで ES6ES6

22. 2015/09/26 16:53
22/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
Sample CodeSample Code
classclass NameName {{
constructor(name){constructor(name){
thisthis.name = name;.name = name;
}}
}}
varvar hoge =hoge = newnew Name();Name();
consoleconsole.log(hoge.name);.log(hoge.name);

23. 2015/09/26 16:53
23/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
先ほどの問題はおきない先ほどの問題はおきない
function -> class になる事で new し忘れたら、
即エラー
class だと 巻き上げ も起きなくなってます。

24. 2015/09/26 16:53
24/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
対応ブラウザ対応ブラウザ
http://kangax.github.io/compat-table/es6/

25. 2015/09/26 16:53
25/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
何か工夫が必要何か工夫が必要

26. 2015/09/26 16:53
26/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
そこでそこで BabelBabel

27. 2015/09/26 16:53
27/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
installinstall
* script.js は es6 で書かれている
npmnpm installinstall --gg babelbabel
babel script.jsbabel script.js

28. 2015/09/26 16:53
28/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
やってみようやってみよう

29. 2015/09/26 16:53
29/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
宣伝宣伝
もっと細かい事や仕事などに絡めた話を..

30. 2015/09/26 16:53
30/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
Gunma.webGunma.web
でやる予定です。

31. 2015/09/26 16:53
31/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
よかったら参加して下さいよかったら参加して下さい
ハッシュタグ : #gunmaweb
2015/10/3
https://gunmaweb.doorkeeper.jp/events/29858

32. 2015/09/26 16:53
32/32 ページhttp://localhost:3000/iggg.md?print-pdf=1#/
ご静聴ご静聴
ありがとうございありがとうござい
ました！ました！