Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

10,693 views

Published on

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

Published in: Internet
  • Login to see the comments

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

  1. 1. JavaScriptの仕組みと 未来のJavaScript 〜ESNextとは〜
  2. 2. JavaScriptは、 最初はただの文字列(テキストファイルなど)です。 JavaScript
  3. 3. hello この文字列をJavaScriptエンジンに食べさせることで プログラムとして動きます。 JavaScript エンジン JavaScript
  4. 4. Google Chrome Safari FireFox Edge/IE 各ブラウザはそれぞれ JavaScriptエンジンを持っています。 だからブラウザはJavaScriptを動かすことができるのです。 詳しく⤴︎
  5. 5. ただ、JavaScriptエンジンがそれぞれ違うので ちょっぴり表現の仕方が違ったりすることもあります。 hello hello JavaScript せつないね。。
  6. 6. でも各社好き勝手に作ったわけではありません。 JavaScriptはこう動くべきだ!という仕様書があり、 これを元にJavaScriptが動くように作られています。 仕様書
  7. 7. ECMA Script (仕様書) それがECMAScript(えくますくりぷと)、 略してESです。
  8. 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. 9. ECMAScriptはどんどん増えていきますが、 各エンジンはすぐには追いけていない状況です。 だから便利な機能は、まだ使えないことが多いのです。 ECMA Script 詳しく⤴︎
  10. 10. ECMA Script ESNext = 未来のJavaScript この、まだ実質使えないものも含めた、 来年出る最新のECMAScriptのバージョンを ESNextと呼びます。(今だと2017がそれ) 来年版
  11. 11. 便利なESNextでプログラムを書きたい。。 でも動かない。。。 そこですごい人は考えました。 『一番安定してどのブラウザでも動くES5に変換すればいい!
  12. 12. そうして造られたのがBabelという変形屋さん。 (トランスパイラといいます) ESNext (未来のJavaScript) ES5
  13. 13. 直接は無理でも、変形屋さんを通すことで、 私たちは未来のJavaScriptをすぐに使えるようになりました。 ESNext (未来のJavaScript) ES5 hello🙅 🙆Error
  14. 14. 未来はこの手の中に
  15. 15. お粗末様でした。 動かし方や変換の仕方はまた別の機会に。
  16. 16. フォント: 東青梅ゴシックC⤴︎ こども丸ゴシック⤴︎ 鉄瓶ゴシック⤴︎ ゆずポップ⤴︎ いらすと: いらすとや⤴︎ 素材

×