Lightweight Language of Things での発表資料です。 http://ll.jus.or.jp/2016/

1. JS
LANGUAGE
UPDATE
@teppeis
LLoT
Aug 27, 2016

2. Hello!
• Teppei Sato, @teppeis
• Cybozu, Inc. / kintone
• Languages in Cybozu
• JavaScript, PHP, Python
• Java, Go, C/C++

3. ECMAScript

4. ECMAScript
• JavaScript
• Ecma International TC39

5. http://wirfs-brock.com/allen/talks/forwardjs2016.pdf

6. ES2015

7. ES 2015
“ES6”
ES 5.1
(2011)
ES 5
(2009)
ES 3
(1999)
ES 2
(1998)
ES 1
(1997)
The ECMAScript Standard Timeline
JS Performance
Revolution
“ES4”
E4X
“ES4”
“Web 2.0” / AJAX
http://wirfs-brock.com/allen/talks/forwardjs2016.pdf

8. New syntax
• Arrow Function
• Classes
• Modules
• Block Scope (let/const)
• Extended Object
Literal
• Default Params
• Rest Params
• Spread Operator
• Destructuring
• Iterator
• Generator
• Template Literal
• Tail Call Optimization

9. New built-in classes and objects
• Promise
• Map
• Set
• WeakMap/WeakSet
• TypedArray
• Symbol
• Proxy/Reflect

10. Improvement of existing classes
• String
• RegExp
• Array
• Object
• Math
• Number

11. https://gihyo.jp/dp/ebook/2015/978-4-7741-7477-8

12. ES6 compatibility table
https://kangax.github.io/compat-table/es6/

13. ES6 compat-table score
• Safari 10 (WebKit): 100%
• Chrome 52: 97%
• Edge 14: 95%
• Firefox 48: 91%
• IE11: 11% => with Babel: 71%
•
• ES Modules …

14. ES2016!

15. ECMAScript 2016
• 2016/6/14
• 2
• Array.prototype.includes
• Exponentiation Operator
•

16. Array.prototype.includes
• Available in Chrome, Edge, Firefox, Safari 9+
assert([1, 2, 3].includes(2) === true);
assert([1, 2, 3].includes(4) === false);

17. Exponentiation Operator
• Available in Chrome, Edge, WebKit
// same as: 2 * 2 * 2
let cubed = 2 ** 3;
let a = 2;
// same as: a = a * a * a;
a **= 3;

19. …
ES
2017
ES
2016
ES
2015
ES 5.1
(2011)
ES 5
(2009)
ES 3
(1999)
ES 2
(1998)
ES 1
(1997)
The ECMAScript Standard Timeline
Annual June
Incremental Updates“ES4”
E4X
“ES4”
Release trains are now leaving the station
http://wirfs-brock.com/allen/talks/forwardjs2016.pdf

20. • 5 Stage
• Stage
6 ES20XX
• 6
• Stage 2
• GitHub /

21. The TC39 Process
• Stage 0: Strawman ( )
• Stage 1: Proposal ( )
• Stage 2: Draft ( )
• Stage 3: Candidate ( , )
• Stage 4: Finished (2 )

22. • "ES20XX"
• Stage
• compat-table

23. Allen Wirfs-Brock
“(ES6 is…) It’s the foundation
for the next 10-20 years of
JavaScript evolution.”
https://flic.kr/p/9E5dV2

24. What's in next ES2017?

25. ES2017 (Current Stage 4 Proposals)
• Async Functions
• Object.values/Object.entries
• String padding
• Object.getOwnPropertyDescriptors
• Trailing commas in function parameter lists and calls
• and more…

26. Async Functions
• Available in Edge, Chrome with flag
async function chainAnimationsAsync(elem, animations) {
let ret = null;
try {
for(const anim of animations) {
ret = await anim(elem);
}
} catch(e) { /* ignore and keep going */ }
return ret;
}

27. ES6 Modules…

28. ES Modules export/import
// export.js
export default function() {
return "foo";
}
// import.js
import foo from "./export.js";
foo();

29. ES Modules are Awesome!
• JavaScript missing piece
• Node.js
• Browserify, Webpack
• =>
•

30. • ES6
•
• Browser: whatwg/loader
• Node.js: nodejs/node-eps#3
•
• .js .mjs
• Babel
•

32. • ES2015 (ES6)
• ES2016
• async/await
• ES Modules
•

33. • Making a Standard: Inside the ECMAScript
Sausage Factory by Allen Wirfs-Brock
http://wirfs-brock.com/allen/talks/forwardjs2016.pdf
• ECMAScript as a Living Standard by azu
http://azu.github.io/slide/2016/node-es/ecmascript.html
• You Don't Know ES Modules by teppeis
https://www.slideshare.net/teppeis/you-dont-know-es-modules