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

console.log(hello);

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

JavaScriptおれが JavaScript だー！

console.log(hello);

hello

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

JavaScriptエンジンJavaScript

V8 Nitro SpiderMonkey

Chakra

GoogleChrome Safari FireFox Edge/IE

各ブラウザはそれぞれJavaScript エンジンを持っています。

だからブラウザは JavaScript を動かすことができるのです。

詳しく⤴

V8 Chakra

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

hello hello

JavaScript

せつないね。。

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

仕様書

ふむ なるほな こうか ？

ECMAScript

　 ( 仕様書）

それが ECMAScript （えくますくりぷと）、略して ES です。

ECMAScript

ver.1ver.2ver.3ver.4 　もめ過ぎて破棄ver.5ver.6 → ver.2015 　数え方を変更ver.2016ver.2017 　作成中

この ECMAScript は、時代とともに新しくなってきました。ver.6 からは毎年新しくするよ！っていう意気込みで

数え方を西暦に変更しました。つまり、毎年便利な機能が増え続けているのです。

もっと詳しく⤴ 詳しく⤴

ECMAScript はどんどん増えていきますが、各エンジンはすぐには追いけていない状況です。

だから便利な機能は、まだ使えないことが多いのです。

ECMAScript

ちょま ふぇー なんと ？ ??

詳しく⤴

ECMAScript ESNext ＝ 未来の JavaScript

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

来年版

便利な ESNext でプログラムを書きたい。。でも動かない。。。

そこですごい人は考えました。『一番安定してどのブラウザでも動く ES5 に変換すればい

い！』

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

ESNext( 未来の JavaScript)

ES5へいおまちー

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

ESNext( 未来の JavaScript) ES5

hello🙅 🙆Error

へいおまちー

未来はこの手の中に

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

フォント： 東青梅ゴシックC⤴ こども丸ゴシック⤴ 鉄瓶ゴシック⤴ ゆずポップ⤴

いらすと： いらすとや⤴

素材