JavaScriptの仕組みと未来のJavaScript ~ESNextとは~

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScriptの仕組みと未来のJavaScript ~ESNextとは~

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to JavaScriptの仕組みと未来のJavaScript ~ESNextとは~ (20)

More from Yuki Hirano (8)

JavaScriptの仕組みと未来のJavaScript ~ESNextとは~