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 Future
Search
Shogo Sensui
September 29, 2015
Technology
0
370
これからの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
EU のデジタル市場法と Apple / DMA and Apple
1000ch
0
55
Web Share API
1000ch
0
74
2023 年の Web 開発のベースライン / Web Development Baseline 2023
1000ch
0
20
開発生産性と組織 / Productivity and Organization
1000ch
0
1k
なぜ私達は働くのか / Why We Work?
1000ch
0
40
新しいメルカリ Web とそのパフォーマンス / The New Mercari Web and its performance
1000ch
0
37
Web Standards Interop 2022
1000ch
0
260
パフォーマンスを高める CSS / Performance Optimized CSS
1000ch
1
730
HTML Optimization for Web Performance
1000ch
0
670
Other Decks in Technology
See All in Technology
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
190
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
プレイドにおけるDatadog APMの活用方法
plaidtech
PRO
2
120
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
AOAI Dev Day - Opening Session
yoshidashingo
2
470
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
In The Pink: A Labor of Love
frogandcode
139
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
A designer walks into a library…
pauljervisheath
201
24k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Become a Pro
speakerdeck
PRO
15
4.8k
What's in a price? How to price your products and services
michaelherold
239
11k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
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