Movatterモバイル変換

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

ProﬁleCyberAgent, Inc.Software EngineerHTMLもといWeb技術全般iOS + Mac

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

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

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

ECMAScriptActionScriptJScriptJavaScript

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

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

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

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

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

ES5 ES6 ES72015年6月策定2009年12月策定

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

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

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

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

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

Array Rest + Spreadconst 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.jsexport const PI = 3.14;export let foo = 'bar';export default class Baz {constructor() {// ...}};// import.jsimport Baz, { PI, foo } from './export';

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

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

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

Proxy + Reﬂectlet 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 calledconsole.log(proxied.foo);// => 100

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

Map + WeakMaplet 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 arrayconsole.log(map.get(object));// => value for object

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

ES5 ES6 ES72015年6月策定2009年12月策定2016年策定?

ECMAScript 7th editionES2016Highly Experimental !!!

Exponentiationlet squared = 2 ** 2;// same as: 2 * 2let cubed = 2 ** 3;// same as: 2 * 2 * 2let a = 2;a **= 2;// same as: a = a * a;let b = 3;b **= 3;// same as: b = b * b * b;

SIMD (Stagevar 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);// => trueconsole.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 2let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };x; // 1y; // 2z; // { a: 3, b: 4 }let n = { x, y, ...z };n; // { x: 1, y: 2, a: 3, b: 4 }

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

ECMAScript Compatibility Table

WebKit Web Platform StatusECMAScript 6 support in MozillaChrome Platform StatusMicrosoft Edge Platform status

おわり+ +ShogoSensui"#1000ch1000ch

Movatterモバイル変換

Change Language

これからのJavaScriptの話

Embed presentation

Recommended

More Related Content

What's hot

Viewers also liked

Similar to これからのJavaScriptの話

More from Shogo Sensui

これからのJavaScriptの話