2015年9月29日に行われた第60回HTML5とか勉強会の「これからのJavaScriptの話 そしてES7へ・・・」のセッションの資料です。

1. これからのJavaScriptの話
そしてES7へ・・・
第60回 HTML5とか勉強会 by 1000ch

2. 1000ch

3. Profile
CyberAgent, Inc.
Software Engineer
HTMLもといWeb技術全般
iOS + Mac

4. ECMAScriptとJavaScript

5. JavaScript爆誕
1995年 Brendan Eich氏が開発
Netscape Navigatorに搭載
この前生誕20周年を迎えた

6. Brendan Eich
Javaが流行ってるから
JavaScriptにしよう

7. ECMAScript
乱立するJS実装の統一に向けて
ECMAのTC39というチームで策定
ECMA-262という文書で管理

8. ECMAScript
ActionScript
JScript
JavaScript

9. 昨今のJavaScript…

10. Node.jsの台頭
サーバーサイドプログラムとして
フロントエンドのビルド環境として
JS経験者が取っ付き易く動作も高速

11. Webのリッチ化
ブラウザで出来ること増えすぎ
必然的にJSでやることが増える

12. ＿人人人人人人人人人人人人＿
＞ JavaScriptフィーバー ＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣

13. Webアプリの高度化や
実行環境の多岐化に伴い
更なる進化を求められている

14. ES5

15. ES5 ES6 ES7

16. ES5 ES6 ES7
2009年12月策定

17. ES5
ECMAScript 5th edition
2011年6月にアップデートで5.1に
“use strict”やArray.prototypeの拡張

18. ES2015

19. ES5 ES6 ES7
2009年12月策定

20. ES5 ES6 ES7
2015年6月策定
2009年12月策定

21. ES2015
ECMAScript 6th edition
2009年以来の大型アップデート
長らく望まれてきた機能追加

22. ES2015
Syntax

23. let + const
{
let string = 'Lorem Ipsum';
}
console.log(string);
// => string is not defined
const PI = 3.14;
PI = 3.1415;
// => PI has already been declared

24. class
class Cat {
constructor(name) {
this.name = name;
}
meow() {
console.log('meow');
}
}
new Cat('1000ch').meow();
// => meow

25. Arrow Function
let double = function(number) {
return number * 2;
};
double = (number) => {
return number * 2;
};
double = number => number * 2;

26. Default Parameters
const process = (params = {}) => {
console.log(params);
};
process({ edition: 6 });
// => { edition: 6 }
process();
// => {}

27. Array Rest + Spread
const process = (...params) => {
console.log(params);
};
process(1);
// => [1]
process(1, 2, 3);
// => [1, 2, 3]
let array = [100, 1000, 1000];
let spread = [1, 10, ...array];
console.log(spread);
// [1, 10, 100, 1000, 1000]

28. import + export
// export.js
export const PI = 3.14;
export let foo = 'bar';
export default class Baz {
constructor() {
// ...
}
};
// import.js
import Baz, { PI, foo } from './export';

29. Destruction
const ARRAY = [1, 10, 100];
let [one, ten] = ARRAY;
console.log(one, ten);
// => 1, 10
const OBJECT = { foo: 1, bar: 10, baz: 100 };
let {foo, baz} = OBJECT;
console.log(foo, baz);
// => 1, 100

30. Template Strings
let width = 3;
let height = 4;
let message = `area is ${width * height}`;
console.log(message);
// => area is 12

31. ES2015
Globals

32. Promise
fetch('...').then(function (response) {
return response.json();
}).then(function (json) {
console.log(json);
}).catch(function (error) {
console.log(error);
});

33. Proxy + Reflect
let proxied = new Proxy({}, {
get: function(target, name) {
return Reflect.get(target, name);
},
set: function(target, name, value, receiver) {
console.log(`${name} setter is called`);
Reflect.set(target, name, value, receiver);
}
});
proxied.foo = 100;
// => foo setter is called
console.log(proxied.foo);
// => 100

34. Set + WeakSet
let array = [];
let object = [];
let set = new Set();
set.add('string value');
set.add(object);
console.log(set.has(array));
// => false
console.log(set.has(object));
// => true

35. Map + WeakMap
let array = [];
let object = [];
let map = new Map();
map.set(array, 'value for array');
map.set(object, 'value for object');
console.log(map.get(array));
// => value for array
console.log(map.get(object));
// => value for object

36. Symbols
let key1 = Symbol('foo');
let object = {};
object[key] = 'value for key1';
console.log(object['foo']);
// => undefined
console.log(object[key1]);
// => value for key1
console.log(Object.keys(object));
// => []

37. ES2016

38. ES5 ES6 ES7
2015年6月策定
2009年12月策定

39. ES5 ES6 ES7
2015年6月策定
2009年12月策定
2016年策定?

40. ECMAScript 7th edition
ES2016
Highly Experimental !!!

41. ES2016
Proposals

42. Exponentiation
let squared = 2 ** 2;
// same as: 2 * 2
let cubed = 2 ** 3;
// same as: 2 * 2 * 2
let a = 2;
a **= 2;
// same as: a = a * a;
let b = 3;
b **= 3;
// same as: b = b * b * b;

43. SIMD (Stage
var s1 = SIMD.Float32x4(1, 2, 3, 4);
var s2 = SIMD.Float32x4(1, 2, 3, 4);
var s3 = SIMD.Float32x4(2, 4, 6, 8);
console.log(s1 === s2);
// => true
console.log(SIMD.Float32x4.add(s1, s2) === s3);
// => true

44. Async Functions (Stage 2
fetch('...').then(function (response) {
return response.json();
}).then(function (json) {
console.log(json);
}).catch(function (error) {
console.log(error);
});
try {
let response = await fetch('...');
let json = await response.json();
console.log(json);
} catch (error) {
console.log(error);
}

45. Object Rest + Spread (Stage 2
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x; // 1
y; // 2
z; // { a: 3, b: 4 }
let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }

46. Decorators (Stage 1
function enumerable(value) {
return function (target, key, descriptor) {
descriptor.enumerable = value;
return descriptor;
}
}
class Foo {
@enumerable(false)
bar() { }
@enumerable(true)
baz() { }
}

47. Compatibility…

48. ECMAScript Compatibility Table

49. WebKit Web Platform Status
ECMAScript 6 support in Mozilla
Chrome Platform Status
Microsoft Edge Platform status

50. Babel

51. Traceur Compiler

52. おわり
+ +ShogoSensui
"
#
1000ch
1000ch