ES6 はじめました

2015/09/26 16:53

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

ES6 ES6 はじめましたはじめました@kanayannet

IGGG Meetup 2015 Summer

2015/09/26 16:53


今日話すこと今日話すこと自己紹介What is ES?

Javascript Problem

そこで ES6

宣伝

2015/09/26 16:53


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

OS : CentOS(Linux) , Mac

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

2015/09/26 16:53


SNSSNSTwitter : @kanayannet

Facebook : HiroakiKanazawa

2015/09/26 16:53


愛犬家愛犬家

2015/09/26 16:53


What is ES?What is ES?

ES = EcmaScript

2015/09/26 16:53


EcmaScript?EcmaScript?

EcmaScript ≒ Javascript

2015/09/26 16:53


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

by Wikipedia

2015/09/26 16:53


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

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

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

2015/09/26 16:53


ECMAECMAってって??

European Computer ManufacturersAssociation

日本のJIS規格的な

2015/09/26 16:53


ブラウザに採用され始めたのブラウザに採用され始めたのはは??

2015/09/26 16:53


2009年 version5 からIE9 くらい?

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

2015/09/26 16:53


JavascriptJavascript

ProblemProblemObject指向やる時...

2015/09/26 16:53


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

2015/09/26 16:53


Sample CodeSample 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/09/26 16:53


ちなみにちなみに「「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'

2015/09/26 16:53


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

Global Object -> window.name -> name

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

2015/09/26 16:53


これどうなるこれどうなる??"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/09/26 16:53


巻き上げ巻き上げ"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/09/26 16:53


"use strict" "use strict" でも解消できなでも解消できないい＞＜＞＜

2015/09/26 16:53


そこでそこで ES6 ES6

2015/09/26 16:53


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

2015/09/26 16:53


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

2015/09/26 16:53


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

http://kangax.github.io/compat-table/es6/

2015/09/26 16:53


何か工夫が必要何か工夫が必要

2015/09/26 16:53


そこでそこで Babel Babel

2015/09/26 16:53


installinstall

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

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

2015/09/26 16:53


やってみようやってみよう

2015/09/26 16:53


宣伝宣伝もっと細かい事や仕事などに絡めた話を..

2015/09/26 16:53


Gunma.webGunma.webでやる予定です。

2015/09/26 16:53


よかったら参加して下さいよかったら参加して下さいハッシュタグ : #gunmaweb

2015/10/3

https://gunmaweb.doorkeeper.jp/events/29858

https://gunmaweb.doorkeeper.jp/events/29858

2015/09/26 16:53


ご静聴ご静聴ありがとうございありがとうございました！ました！

Internet

ES6 はじめました