これからのjavascriptの話
TRANSCRIPT
![Page 1: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/1.jpg)
これからのJavaScriptの話 そしてES7へ・・・
第60回 HTML5とか勉強会 by 1000ch
![Page 2: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/2.jpg)
1000ch
![Page 3: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/3.jpg)
Profile
CyberAgent, Inc.
Software Engineer
HTMLもといWeb技術全般
iOS + Mac
![Page 4: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/4.jpg)
ECMAScriptとJavaScript
![Page 5: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/5.jpg)
JavaScript爆誕1995年 Brendan Eich氏が開発Netscape Navigatorに搭載この前生誕20周年を迎えた
![Page 6: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/6.jpg)
Brendan Eich
Javaが流行ってるからJavaScriptにしよう
![Page 7: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/7.jpg)
ECMAScript乱立するJS実装の統一に向けてECMAのTC39というチームで策定ECMA-262という文書で管理
![Page 8: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/8.jpg)
ECMAScript
ActionScript
JScript
JavaScript
![Page 9: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/9.jpg)
昨今のJavaScript…
![Page 10: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/10.jpg)
Node.jsの台頭サーバーサイドプログラムとしてフロントエンドのビルド環境としてJS経験者が取っ付き易く動作も高速
![Page 11: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/11.jpg)
Webのリッチ化ブラウザで出来ること増えすぎ必然的にJSでやることが増える
![Page 12: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/12.jpg)
_人人人人人人人人人人人人_ > JavaScriptフィーバー < ‾Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y‾
![Page 13: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/13.jpg)
Webアプリの高度化や 実行環境の多岐化に伴い 更なる進化を求められている
![Page 14: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/14.jpg)
ES5
![Page 15: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/15.jpg)
ES5 ES6 ES7
![Page 16: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/16.jpg)
ES5 ES6 ES7
2009年12月策定
![Page 17: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/17.jpg)
ES5ECMAScript 5th edition
2011年6月にアップデートで5.1に“use strict”やArray.prototypeの拡張
![Page 18: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/18.jpg)
ES2015
![Page 19: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/19.jpg)
ES5 ES6 ES7
2009年12月策定
![Page 20: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/20.jpg)
ES5 ES6 ES7
2015年6月策定2009年12月策定
![Page 21: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/21.jpg)
ES2015ECMAScript 6th edition
2009年以来の大型アップデート長らく望まれてきた機能追加
![Page 22: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/22.jpg)
ES2015 Syntax
![Page 23: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/23.jpg)
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
![Page 24: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/24.jpg)
class
class Cat { constructor(name) { this.name = name; } meow() { console.log('meow'); } }
new Cat('1000ch').meow(); // => meow
![Page 25: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/25.jpg)
Arrow Function
let double = function(number) { return number * 2; };
double = (number) => { return number * 2; };
double = number => number * 2;
![Page 26: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/26.jpg)
Default Parameters
const process = (params = {}) => { console.log(params); };
process({ edition: 6 }); // => { edition: 6 }
process(); // => {}
![Page 27: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/27.jpg)
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]
![Page 28: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/28.jpg)
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';
![Page 29: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/29.jpg)
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
![Page 30: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/30.jpg)
Template Strings
let width = 3; let height = 4; let message = `area is ${width * height}`;
console.log(message); // => area is 12
![Page 31: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/31.jpg)
ES2015 Globals
![Page 32: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/32.jpg)
Promise
fetch('...').then(function (response) { return response.json(); }).then(function (json) { console.log(json); }).catch(function (error) { console.log(error); });
![Page 33: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/33.jpg)
Proxy + Reflectlet 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
![Page 34: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/34.jpg)
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
![Page 35: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/35.jpg)
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
![Page 36: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/36.jpg)
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)); // => []
![Page 37: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/37.jpg)
ES2016
![Page 38: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/38.jpg)
ES5 ES6 ES7
2015年6月策定2009年12月策定
![Page 39: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/39.jpg)
ES5 ES6 ES7
2015年6月策定2009年12月策定
2016年策定?
![Page 40: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/40.jpg)
ECMAScript 7th edition
ES2016
Highly Experimental !!!
![Page 41: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/41.jpg)
ES2016 Proposals
![Page 42: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/42.jpg)
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;
![Page 43: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/43.jpg)
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
![Page 44: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/44.jpg)
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); }
![Page 45: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/45.jpg)
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 }
![Page 46: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/46.jpg)
Decorators (Stage 1
function enumerable(value) { return function (target, key, descriptor) { descriptor.enumerable = value; return descriptor; } } class Foo { @enumerable(false) bar() { }
@enumerable(true) baz() { } }
![Page 47: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/47.jpg)
Compatibility…
![Page 48: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/48.jpg)
ECMAScript Compatibility Table
![Page 49: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/49.jpg)
WebKit Web Platform Status
ECMAScript 6 support in Mozilla
Chrome Platform Status
Microsoft Edge Platform status
![Page 50: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/50.jpg)
Babel
![Page 51: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/51.jpg)
Traceur Compiler
![Page 52: これからのJavaScriptの話](https://reader034.vdocuments.net/reader034/viewer/2022052116/588473801a28ab5e248b50f9/html5/thumbnails/52.jpg)
おわり
+ +ShogoSensui
"
#
1000ch
1000ch