Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
これからのJavaScriptの話 そしてES7へ・・・ / JavaScript in Future
Shogo Sensui
September 29, 2015
Technology
0
230
これからのJavaScriptの話 そしてES7へ・・・ / JavaScript in Future
2015年9月29日に行われた第60回HTML5とか勉強会の「これからのJavaScriptの話 そしてES7へ・・・」のセッションの資料です。
Shogo Sensui
September 29, 2015
Tweet
Share
More Decks by Shogo Sensui
See All by Shogo Sensui
Web Standards Interop 2022
1000ch
0
120
パフォーマンスを高める CSS / Performance Optimized CSS
1000ch
1
550
HTML Optimization for Web Performance
1000ch
0
530
Introduction to Performance APIs
1000ch
0
530
PWA 対応戦略と現実解 / PWA strategy and realistic solution
1000ch
0
490
merpay Frontend における BFF / bff-at-merpay-frontend
1000ch
1
8.8k
2018 年の Web 標準 / Web Standards 2018
1000ch
11
3.2k
アクセシビリティとメルカリの話 / A11y and Mercari
1000ch
0
87
Web Components Re-Introduction
1000ch
3
930
Other Decks in Technology
See All in Technology
Optimizing your Swift code
kateinoigakukun
0
1.3k
データベースの発表には RDBMS 以外もありますよ
maroon1st
0
230
Stripe / Okta Customer Identity Cloud(旧Auth0) の採用に至った理由 〜モリサワの SaaS 戦略〜
tomuro
0
110
WebLogic Server for OCI 概要
oracle4engineer
PRO
3
850
PCI DSS に準拠したシステム開発
yutadayo
0
280
Red Hatが ひっそりと開発しているOSSデータストア
chiroito
0
110
インフラ技術基礎勉強会 開催概要
toru_kubota
0
140
GraphQLスキーマ設計の勘所
yukukotani
26
6k
plotlyで動くグラフを作る
kosshi
0
740
オンプレk8sとEKSの並行運用の実際
ch1aki
0
160
エアドロップ for オープンソースプロジェクト
epicsdao
0
300
Periodic Multi-Agent Path Planning
hziwara
0
110
Featured
See All Featured
Thoughts on Productivity
jonyablonski
49
2.7k
Facilitating Awesome Meetings
lara
33
4.6k
Become a Pro
speakerdeck
PRO
6
3.2k
Bootstrapping a Software Product
garrettdimon
299
110k
Optimizing for Happiness
mojombo
365
64k
GraphQLの誤解/rethinking-graphql
sonatard
39
7.8k
Adopting Sorbet at Scale
ufuk
65
7.8k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
GraphQLとの向き合い方2022年版
quramy
20
9.8k
Happy Clients
brianwarren
90
5.8k
What's in a price? How to price your products and services
michaelherold
233
9.7k
Into the Great Unknown - MozCon
thekraken
2
280
Transcript
͜Ε͔Βͷ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 200912݄ࡦఆ
ES5 ECMAScript 5th edition 20116݄ʹΞοϓσʔτͰ5.1ʹ “use strict”Array.prototypeͷ֦ு
ES2015
ES5 ES6 ES7 200912݄ࡦఆ
ES5 ES6 ES7 20156݄ࡦఆ 200912݄ࡦఆ
ES2015 ECMAScript 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 + 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
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 20156݄ࡦఆ 200912݄ࡦఆ
ES5 ES6 ES7 20156݄ࡦఆ 200912݄ࡦఆ 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 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); }
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