Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
これからのJavaScriptの話 そしてES7へ・・・ / JavaScript in Fu...
Search
Shogo Sensui
September 29, 2015
Technology
0
380
これからの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
三年間の関わりから見る PR TIMES エンジニアリングの変化 / Transition of PRTimes Engineering
1000ch
0
2.1k
EU のデジタル市場法と Apple / DMA and Apple
1000ch
0
110
Web Share API
1000ch
0
120
2023 年の Web 開発のベースライン / Web Development Baseline 2023
1000ch
0
42
開発生産性と組織 / Productivity and Organization
1000ch
0
1.1k
なぜ私達は働くのか / Why We Work?
1000ch
0
65
新しいメルカリ Web とそのパフォーマンス / The New Mercari Web and its performance
1000ch
0
66
Web Standards Interop 2022
1000ch
0
300
パフォーマンスを高める CSS / Performance Optimized CSS
1000ch
1
790
Other Decks in Technology
See All in Technology
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
210
AIエージェント開発のノウハウと課題
pharma_x_tech
8
4.8k
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
110
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.6k
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
350
アジリティを高めるテストマネジメント #QiitaQualityForward
makky_tyuyan
1
230
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
AIエージェント入門
minorun365
PRO
33
19k
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
9
990
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
250
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
540
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5.3k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
The Language of Interfaces
destraynor
156
24k
The Cult of Friendly URLs
andyhume
78
6.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Designing for humans not robots
tammielis
250
25k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Gamification - CAS2011
davidbonilla
80
5.2k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Why Our Code Smells
bkeepers
PRO
336
57k
We Have a Design System, Now What?
morganepeng
51
7.4k
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