![Page 1: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/1.jpg)
どうやってECMAScript 6を学び始めるか
![Page 2: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/2.jpg)
![Page 3: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/3.jpg)
ECMAScript 5を知る
![Page 4: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/4.jpg)
ES6 の前に ES5 大丈夫?4 Property Descriptor
4 Object.create()
4 Strict Mode
4 Thinking About ECMAScript 5 Parts - Tech.pro
![Page 6: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/6.jpg)
なぜ ES5 が大事か?4 (恐らく)学ぶ過程でBabelのようなTranspilerに手を出してしまう
4 TranspilerはES5の機能を使いきって実装されている4 JavaScript Transformation - JSConf 2015 // Speaker
Deck
![Page 7: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/7.jpg)
ES6の概要を知る
![Page 10: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/10.jpg)
実行環境
![Page 11: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/11.jpg)
実行環境を揃える4 Browser(JavaScriptエンジン)
4 MSEdge、Firefox、Chrome、Safari(Webkit JSC)
4 Babel(Transpiler)
![Page 12: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/12.jpg)
Browserへの実装状況
![Page 13: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/13.jpg)
ECMAScript 6 compatibility table
![Page 15: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/15.jpg)
Status Page4 それぞれのブラウザ持ってる実装ステータスページ4 The WebKit Open Source Project - Web Platform
Status
4 Developer Resources : MSEdge Dev
4 Chromium Dashboard
![Page 16: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/16.jpg)
Transpilerを使う前に
![Page 17: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/17.jpg)
JavaScript Transformation - JSConf 2015
![Page 18: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/18.jpg)
Transpiler is not Learning Tool4 次の分類が何を基準にしてるか分からない場合はTranspilerで学ぶのは危険が伴う
![Page 19: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/19.jpg)
╔═══════════════════════╤═════════════════════╗║ A │ B ║╠═══════════════════════╪═════════════════════╣║ Math Extension │ SubClassing ║╟───────────────────────┼─────────────────────╢║ spread (...) operator │ Proxy ║╟───────────────────────┼─────────────────────╢║ Map │ WeakMap ║╟───────────────────────┼─────────────────────╢║ Set │ WeakSet ║╟───────────────────────┼─────────────────────╢║ Promise │ Symbol ║╟───────────────────────┼─────────────────────╢║ Template Strings │ Temporary Dead Zone ║╟───────────────────────┼─────────────────────╢║ ....... │ ..... ║╚═══════════════════════╧═════════════════════╝
![Page 20: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/20.jpg)
! ES6を学ぶ前に4 ES5がわからない4 => ES5を学ぶ
4 Transpilerの動作原理がわからない4 => ブラウザが対応してる機能を優先して学ぶ
4 Transpilerがではできないことも理解してる4 => 容量用法を持って正しく使いましょう
![Page 21: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/21.jpg)
ES6を学ぶ
![Page 24: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/24.jpg)
getify/You-Dont-Know-JS
![Page 25: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/25.jpg)
ES6を書く
![Page 27: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/27.jpg)
書く4 Learn ES2015 · Babel
4 ライブラリをES6で書いて公開する所から始めよう4 NW.jsやElectronで動くアプリを書く4 io.js(V8)が入ってる
![Page 28: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/28.jpg)
仕様を読む
![Page 30: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/30.jpg)
ECMAScript仕様書を読む · Issue #47 · azu/azu
![Page 31: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/31.jpg)
ECMAScript 6ドラフトのDiff検索用リポジトリを作った | Web Scratch
![Page 32: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/32.jpg)
▶ ECMAScript Next
![Page 33: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/33.jpg)
プロポーサル一覧4 tc39/ecma262
4 Stage 0 Proposals
4 ecmarkupでプロポーサルを書き、GitHubに置く4 + ES Discuss
4 議論の場所を議論中: Move es-discuss to discuss.webplatform.org?
![Page 34: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/34.jpg)
tc39/tc39-notes
4 ECMAScriptを作成する委員会(TC39)のミーティングノート
4 大体3ヶ月に1度開催4 #TC39MTGで一人読書会をやってます
4 ミーティングに参加してないけどコミットしてる
![Page 35: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/35.jpg)
明日には使えなくなるES7トーク4 賞味期限 まで 後4 ES7以降の仕様策定の流れ4 Stageって何か?
![Page 36: どうやってECMAScript 6 · 2020-04-03 · ES6を学ぶ前に 4 ES5がわからない 4 => ES5を学ぶ 4 Transpilerの動作原理がわからない 4 => ブラウザが対応してる機能を優先して学ぶ](https://reader034.vdocuments.us/reader034/viewer/2022042419/5f35660e627f4e5d3529c2a6/html5/thumbnails/36.jpg)
まとめ4 WEB+DB PRESS Vol.87で概要を把握4 es6-features.orgで簡単にどんな機能が増えたのかを見る
4 tower-of-babelで実際に書いてみる4 もっと深く知りたい場合はExploring ES6を読む