これからのjavascriptの話

これからのJavaScriptの話 そしてES7へ・・・

第60回 HTML5とか勉強会 by 1000ch

1000ch

Profile

CyberAgent, Inc.

Software Engineer

HTMLもといWeb技術全般

iOS + Mac

ECMAScriptとJavaScript

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

Brendan Eich

Javaが流行ってるからJavaScriptにしよう

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

ECMAScript

ActionScript

JScript

JavaScript

昨今のJavaScript…

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

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

＿人人人人人人人人人人人人＿ ＞　JavaScriptフィーバー　＜ ‾Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y‾

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

ES5

ES5 ES6 ES7

ES5 ES6 ES7

2009年12月策定

ES5ECMAScript 5th edition

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

ES2015

ES5 ES6 ES7

2009年12月策定

ES5 ES6 ES7

2015年6月策定2009年12月策定

ES2015ECMAScript 6th edition

2009年以来の大型アップデート長らく望まれてきた機能追加

ES2015 Syntax

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

class

class Cat { constructor(name) { this.name = name; } meow() { console.log('meow'); } }

new Cat('1000ch').meow(); // => meow

Arrow Function

let double = function(number) { return number * 2; };

double = (number) => { return number * 2; };

double = number => number * 2;

Default Parameters

const process = (params = {}) => { console.log(params); };

process({ edition: 6 }); // => { edition: 6 }

process(); // => {}

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]

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';

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

Template Strings

let width = 3; let height = 4; let message = `area is ${width * height}`;

console.log(message); // => area is 12

ES2015 Globals

Promise

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

Proxy + Reflectlet 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

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

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

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)); // => []

ES2016

ES5 ES6 ES7

2015年6月策定2009年12月策定

ES5 ES6 ES7

2015年6月策定2009年12月策定

2016年策定?

ECMAScript 7th edition

ES2016

Highly Experimental !!!

ES2016 Proposals

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;

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

Async Functions (Stage 2fetch('...').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); }

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 }

Decorators (Stage 1

function enumerable(value) { return function (target, key, descriptor) { descriptor.enumerable = value; return descriptor; } } class Foo { @enumerable(false) bar() { }

@enumerable(true) baz() { } }

Compatibility…

ECMAScript Compatibility Table

WebKit Web Platform Status

ECMAScript 6 support in Mozilla

Chrome Platform Status

Microsoft Edge Platform status

Babel

Traceur Compiler

おわり

+ +ShogoSensui

"

#

1000ch

1000ch