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
いまからはじめるECMAScript 6 / Begin ECMAScript6
Search
Shogo Sensui
June 13, 2015
Technology
0
830
いまからはじめるECMAScript 6 / Begin ECMAScript6
2015年6月13日に行われたHTML5オールスターズ勉強会の「いまからはじめるECMAScript 6」のセッションの資料です。
Shogo Sensui
June 13, 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
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.7k
20240725 LLMによるDXのビジョンと、今何からやるべきか @Azure OpenAI Service Dev Day
nrryuya
3
1.2k
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
150
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
630
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
Azure AI ことはじめ
tsubakimoto_s
0
130
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
63
4.2k
What's in a price? How to price your products and services
michaelherold
239
11k
BBQ
matthewcrist
82
9k
Agile that works and the tools we love
rasmusluckow
325
20k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Code Reviewing Like a Champion
maltzj
517
39k
We Have a Design System, Now What?
morganepeng
46
7k
The Language of Interfaces
destraynor
151
23k
Bash Introduction
62gerente
607
210k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Transcript
͍·͔Β͡ΊΔECMAScript 6 by Shogo Sensui 2015.06.13 HTML5Φʔϧελʔζษڧձ https://www.flickr.com/photos/jakeandlindsay/5524669257
s Shogo Sensui a.k.a 1000ch
Profile WebϑϩϯτΤϯυΤϯδχΞ iOSωΠςΟϒΤϯδχΞ HTML5શൠ + Node.js + iOS/Mac #perfmatters
None
s ϑϩϯτΤϯυ ΤϯδχΞ ཆಡຊ
WEB+DB PRESS WebϑϩϯτΤϯυ ࠷લઢ
@cssradar @hiloki @t32k @1000ch @ahomu Frontend Weekly • ࠃ֎ͷϑϩϯτΤϯυใΛΩϡϨʔγϣϯ •
िʹҰਫ༵ʹ৴
@cssradar @hiloki @t32k @1000ch @ahomu Frontend Weekly • ࠃ֎ͷϑϩϯτΤϯυใΛΩϡϨʔγϣϯ •
िʹҰਫ༵ʹ৴ https://frontendweekly.tokyo
Agenda JavaScript ͱ ECMAScript ECMAScript 6 ͷओͳ৽ػೳ ECMAScript 6 ͱͷ͖߹͍ํ
·ͱΊ
JavaScript ͱ ECMAScript
1995ɺJavaScriptര Java͕ྲྀߦͬͯΔ͔Β JavaScriptͱ͍͏໊લʹ͠Α͏ Brendan Eichࢯ
ͳΜͩͱʁͬͪ͜JScriptͩʂ ͜Ε͕JavaScriptͩʂ ͯͯɺඪ४Խ͠Α͏…
ECMAScript JavaScript JScript ActionScript ඪ४Խ͞Εͨݴޠ༷ʢECMAScriptʣͱ ͦΕΛ࣮͢Δ֤ݴޠʢJavaScriptͳͲʣ ECMAScriptͷཱͪҐஔ
৭ʑͳҙݟ͕JavaScriptʹ Өڹ͖ͯͨ͠ etc…
ECMAScript 2015?
ECMAScript 6 ͷओͳ৽ػೳ https://www.flickr.com/photos/12355559@N03/18012486244
let const { var foo = 10; let bar =
100; const baz = 1000; console.log(foo, bar, baz); // => 10, 100, 1000 } console.log(foo, bar, baz); // => 10, undefined, undefined ES6
Arrow Functions $('button').on('click', function (e) { console.log(this); // => button
}); $('button').on('click', (e) => { console.log(this); // => window }); $('button').on('click', e => console.log(this)); ES5 ES6 ES6
import export // export.js export function foo() { console.log('foo'); }
export function bar() { console.log('bar'); } // import.js import { foo, bar } from './export.js'; foo(); // => foo bar(); // => bar ES6
Rest Parameters let x = 10, y = 20, z
= 30; function max(array) { return Math.max.apply(null, array); } max([x, y, z]); // => 30 function max(...array) { return Math.max.apply(null, array); } max(x, y, z); // => 30 ES6 ES6
Default Parameters function add(arg1, arg2) { if (arg1 === undefined)
{ arg1 = 0; } if (arg2 === undefined) { arg2 = 0; } return arg1 + arg2; } function add(arg1 = 0, arg2 = 0) { return arg1 + arg2; } ES5 ES6
let hundred = 100; let multiple = function (x, y)
{ return x * y; } console.log(`hundred is ${number}`); // => hundred is 100 console.log(`hundred * 10 is ${multiple(number, 10)}`); // => hundred * 10 is 1000 Template Strings ES6
function Human (message) { this.message = message; } Human.prototype.hello =
function () { console.log(this.message); } class Human { constructor(message) { this.message = message; } hello() { console.log(this.message); } } Class ES6 ES5
function* toThree() { yield 1; yield 2; return 3; }
console.log(toThree()); // => 1 console.log(toThree()); // => 2 console.log(toThree()); // => 3 Generator Functions ES6
Proxy var person = { firstName: 'Taro', lastName: 'Tanaka' };
var interceptor = { set: function (target, name, value, receiver) { console.log(name + ' is changed.'); target[name] = value; } get: function (target, name, receiver) { return name + ' is ' target[name]; } }; person = new Proxy(person, interceptor); ES6
Symbol var sym1 = Symbol(); var sym2 = Symbol("foo"); var
sym3 = Symbol("foo"); Symbol("foo") === Symbol("foo"); // => false ES6
Promise new Promise(function (resolve, reject) { resolve(10); }).then(function (value) {
return value * 10; }).then(function (value) { console.log(value); // 100 }); ES6
Set WeakSet var set1 = new Set([1, 2, 2, 3,
3, 3, 4, 4, 4, 4]); // => [1, 2, 3, 4] var set2 = new Set(set1); var set3 = new Set(set1.entries()); var set4 = new Set(set1.keys()); ES6
Map WeakMap var arrayKey = []; var map = new
Map(); map.set(1, 'This is a value'); map.set(arrayKey, 'This is also value'); map.get(1); // This is a value map.get(arrayKey); // This is also value ES6
ECMAScript 6 ͱͷ͖߹͍ํ https://www.flickr.com/photos/63771280@N08/18643164795/
※20156݄13࣌ × ×
ECMAScript 6 compatibility table
ES6͕ԿʹૉΒͯ͘͠ αϙʔτ͕ਐ·ͳ͍͜ͱʹ ಋೖͰ͖ͳ͍ʁ ×
ES6 ES5 τϥϯεύΠϥΛ͏ ES6ͷίʔυΛίϯύΠϧͯ͠ɺαϙʔτ͍ͯ͠ͳ͍ ϒϥβͰ࣮ߦՄೳͳίʔυʹม͢Δ
Traceur Compiler
Babel
ݶఆ͞ΕͨڥͰ͏ αϙʔτ͕ൺֱతਐΜͰ͍ΔChromeFirefoxͷ ֦ுػೳͰ͋Εࢥ͏ଘ͑Δ
AltJSͰऔΓೖΕ͍ͯ͘ TypeScriptFlowͰES6ͷߏจαϙʔτ͕ਐΜͰ͍Δ
Node.js 0.12ʙ ES6ͷػೳ͕--harmonyϑϥά͖Ͱར༻Մೳ iojsͳΒϑϥάෆཁʹͳ͍ͬͯΔ
·ͱΊ
ϒϥβαϙʔτ͕ ेʹͳΔͷ·ͩ·ͩઌͷ…
ཧ༝Λ͚ͭͯΒͳ͍ؒʹ ࣍ͳΔ༷(ES7ɾES8)͕ग़ͯ͘Δ
͑Δػೳ͔ΒঃʑʹऔΓೖΕͯ ࠓͷ͏ͪʹ׳Ε͍ͯ͘
͓ΘΓ +ShogoSensui 1000ch 1000ch