ESNextってなんぞ？を解説するために作った資料です。

1. JavaScriptの仕組みと
未来のJavaScript
〜ESNextとは〜

2. JavaScriptは、
最初はただの文字列（テキストファイルなど）です。
JavaScript

3. hello
この文字列をJavaScriptエンジンに食べさせることで
プログラムとして動きます。
JavaScript
エンジン
JavaScript

4. Google
Chrome
Safari FireFox Edge/IE
各ブラウザはそれぞれ
JavaScriptエンジンを持っています。
だからブラウザはJavaScriptを動かすことができるのです。
詳しく⤴︎

5. ただ、JavaScriptエンジンがそれぞれ違うので
ちょっぴり表現の仕方が違ったりすることもあります。
hello hello
JavaScript
せつないね。。

6. でも各社好き勝手に作ったわけではありません。
JavaScriptはこう動くべきだ！という仕様書があり、
これを元にJavaScriptが動くように作られています。
仕様書

7. ECMA
Script
(仕様書）
それがECMAScript（えくますくりぷと）、
略してESです。

8. ECMA
Script
ver.1
ver.2
ver.3
ver.4 もめ過ぎて破棄
ver.5
ver.6 → ver.2015 数え方を変更
ver.2016
ver.2017 作成中
このECMAScriptは、時代とともに新しくなってきました。
ver.6からは毎年新しくするよ！っていう意気込みで
数え方を西暦に変更しました。
つまり、毎年便利な機能が増え続けているのです。
もっと詳しく⤴︎
詳しく⤴︎

9. ECMAScriptはどんどん増えていきますが、
各エンジンはすぐには追いけていない状況です。
だから便利な機能は、まだ使えないことが多いのです。
ECMA
Script
詳しく⤴︎

10. ECMA
Script ESNext ＝ 未来のJavaScript
この、まだ実質使えないものも含めた、
来年出る最新のECMAScriptのバージョンを
ESNextと呼びます。（今だと2017がそれ）
来年版

11. 便利なESNextでプログラムを書きたい。。
でも動かない。。。
そこですごい人は考えました。
『一番安定してどのブラウザでも動くES5に変換すればいい！

12. そうして造られたのがBabelという変形屋さん。
（トランスパイラといいます）
ESNext
(未来のJavaScript)
ES5

13. 直接は無理でも、変形屋さんを通すことで、
私たちは未来のJavaScriptをすぐに使えるようになりました。
ESNext
(未来のJavaScript)
ES5
hello🙅 🙆Error

14. 未来はこの手の中に

15. お粗末様でした。
動かし方や変換の仕方はまた別の機会に。

16. フォント：
東青梅ゴシックC⤴︎
こども丸ゴシック⤴︎
鉄瓶ゴシック⤴︎
ゆずポップ⤴︎
いらすと： いらすとや⤴︎
素材