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
Vanilla JSの今
Search
Gen Tamura
February 06, 2020
Programming
1
1.2k
Vanilla JSの今
Meguro.es # 25 @ Fringe81
Gen Tamura
February 06, 2020
Tweet
Share
Other Decks in Programming
See All in Programming
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
220
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
260
AIともっと楽するE2Eテスト
myohei
8
3k
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
150
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
効率的な開発手段として VRTを活用する
ishkawa
0
160
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
0
330
ニーリーにおけるプロダクトエンジニア
nealle
0
950
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
200
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
580
Deep Dive into ~/.claude/projects
hiragram
14
14k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
KATA
mclloyd
30
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
RailsConf 2023
tenderlove
30
1.1k
Designing Experiences People Love
moore
142
24k
A Tale of Four Properties
chriscoyier
160
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Invisible Side of Design
smashingmag
301
51k
Transcript
Vanilla JSͷࠓ Meguro.es # 25 @ Fringe81
ͨΉΒ͛Μ / ాଜݩ Twitter @gentamura84 / GitHub @gentamura ʙ201912݄ גࣜձࣾπΫϧό
ϑϩϯτΤϯυΤϯδχΞ 20201݄ʙ ϑϦʔϥϯεΤϯδχΞ ECMAScript วྺ ͜Ε·Ͱ ActionScript3 / Knockout.js / Backbone.js / jQuery ࠷ۙ React / Next.js / TypeScript Firebase / GatsbyJS / NetlifyCMS
ಥવͰ͕͢
Vanilla JSΛͬͯΔਓʁ
ͦ͏ɺ͜ΕͰ͢Ͷ
http://vanilla-js.com/
Vanilla JS === ૉͷJavaScript
Ͱ
None
None
React Vue.js Angular
ૉͷJavaScriptΛ ৼΓฦΔඞཁ͋Γ·͢ʁ
͔ͨ͠ʹ
Ͱݱ࣮
app/views/layouts/foo.erb
app/views/layouts/foo.erb ʘ<script></script>ʗ ŠŠŬŘſż!!
wp-content/themes/foo/footer.php
wp-content/themes/foo/footer.php ʘ<script></script>ʗ ŠŠŬŘſż!!
Ϟμϯͳڥ͔ΓͰͳ͍
ͱ͍͏͜ͱͰ
ES2015-2020ʢ༧ఆʣΛ ৼΓฦΓ͍ͨ
ͱͦͷલʹ
ES2015ͷ ESͬͯͳΜ͚ͩͬʁ
ECMAScript === ES ECMAScriptEcma Internationalͱ͍͏ஂମͰࡦ ఆ͞Ε͍ͯΔ༷Ͱ͢ ͜ͷ༷Ͱ֤ϒϥβͷ2ݸҎ্Ͱར༻Ͱ͖ΔΑ ͏ʹJavaScript͕࣮͞Ε͍ͯ·͢
ECMAScript 1, 2, 3, 5, 5.1ͷॱʹϦϦʔε͞Εɺ 5.1͔Β࣍ͷϦϦʔεʹ4͔͔ͬͨɻ ͋·ΓʹϦϦʔεεύϯ͕͘ͳͬͨͨΊɺຖ ϦϦʔε͢Δ͜ͱʹͳͬͨɻ
ϦϦʔε࣌ظΛΘ͔Γ͘͢͢ΔͨΊɺϦϦʔεͨ͠ Λόʔδϣϯͱ͢Δ͜ͱʹ͠·ͨ͠ɻ 5.1ͷ࣍όʔδϣϯES2015ͱͳΓ·ͨ͠ɻ ͳͷͰɺES6Ͱͳ͘ES2015͕ਖ਼ࣜදهͰ͢ ECMAScript
ݱߦͷ࠷৽ ES2019 https://www.ecma-international.org/ecma-262/ աڈόʔδϣϯ http://www.ecma-international.org/publications/ standards/Ecma-262-arch.htm ECMAScript
ৄ͘͠ https://jsprimer.net/basic/ecmascript/ ͕Θ͔Γ͍͢Ͱ͢ ECMAScript
ͱ͍͏͜ͱͰ
- ES2015 - ES2016 - ES2017 - ES2018 - ES2019
- ES2020
- ES2015 - ES2016 - ES2017 - ES2018 - ES2019
- ES2020 ॱʹ͍͖·͢ʔ
- ES2015 - ES2016 - ES2017 - ES2018 - ES2019
- ES2020 ʢ͏5͔…
ES2015
ES2015 4ͷࡀ݄Λ͔͚ͨߕ൹͕͋ͬͯɺଟ͘ͷػೳՃ͕͋Γ·͠ ͨɻ http://www.ecma-international.org/ecma-262/6.0/index.html
ES2015 - class - import / export - Arrow function,
Default parameters, Rest parameters - let / const - for .. of - Generator - Promise, Map, Set, Proxy ͳͲͳͲɺͨ͘͞Μ͋Γ·ͨ͠ http://kangax.github.io/compat-table/es6/
ES2015 - class (class એݴ) class Polygon { constructor(height, width)
{ this.area = height * width; } } console.log(new Polygon(4,3).area); index.js https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/class
ES2015 - class (class ࣜ) const Rectangle = class {
constructor(height, width) { this.height = height; this.width = width; } area() { return this.height * this.width; } } console.log(new Rectangle(5,8).area()); // expected output: 40 index.js https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/class
ES2015 - import / export module https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export <script src="./index.js"type="module"></script>
<!— ·ͨ —> <script type="module"> import hello from ‘./hello.js'; hello(); </script> index.html import hello from './hello.js'; hello(); index.js const hello = () => { console.log('hello world'); }; export default hello; hello.js
ES2015 - Generator function* generator(i) { yield i; yield i
+ 10; } const gen = generator(10); console.log(gen.next()); // expected output: Object { value: 10, done: false } console.log(gen.next()); // expected output: Object { value: 20, done: false } console.log(gen.next()); // expected output: Object { value: undefined, done: true } index.js https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Generator
ES2015 Generatorͷৄࡉʹ͍ͭͯ http://jxck.hatenablog.com/entry/2014-01-12/ generator-screencaset ͷಈը͕Θ͔Γ͔ͬͨ͢Ͱ͢ɻ
ES2016
ES2016 ຖϦϦʔε͠Α͏ʂ ͱܾΊ͔ͯΒɺ͡ΊͯͷϦϦʔε https://www.ecma-international.org/ecma-262/7.0/ index.html
ES2016 - Array.prototype.includes() - ͖ԋࢉࢠ (**) ͷ2ͭͰͨ͠ɻ લճͱͷམ͕͍ࠩ͢͝ɻ http://kangax.github.io/compat-table/es2016plus/
ES2016 - Array.prototype.includes() const pets = ['cat', 'dog', 'bat']; console.log(pets.includes(‘cat'));
console.log(pets.indexOf(‘cat') > -1); // old style // expected output: true console.log(pets.includes(‘at')); console.log(pets.indexOf(‘at') > -1); // old style // expected output: false index.js https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/ includes
ES2016 - ͖ԋࢉࢠ (**) 2 ** 3 // 8 3
** 2 // 9 3 ** 2.5 // 15.588457268119896 10 ** -1 // 0.1 NaN ** 2 // NaN 2 ** 3 ** 2 // 512 2 ** (3 ** 2) // 512 (2 ** 3) ** 2 // 64 ※ LaTeXExcel ^ ͕͖ʹͳΓ·͕͢ɺJavaScriptͰϏοτԋࢉࢠʹͳΔͷͰҙ index.js https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/ Arithmetic_Operators
ES2017
ES2017 async function => PromiseͷγϯλοΫεγϡΨʔ ؔͷඌͷΧϯϚ => Λڐ༰ Object static
methods Object.values() => ͷྻΛฦ͢ Object.entries() => [key, value] Ͱ֨ೲͨ͠ྻΛฦ͢ Object.getOwnPropertyDescriptors() => objectͷDescriptorΛฦ͢ Shared memory and atomics http://kangax.github.io/compat-table/es2016plus/ https://www.ecma-international.org/ecma-262/8.0/index.html
ES2017 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/ Statements/async_function https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/ Trailing_commas https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/ Global_Objects/Object/values https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/ Global_Objects/Object/entries https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/
Global_Objects/Object/getOwnPropertyDescriptors https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/ Global_Objects/Object/getOwnPropertyDescriptors
ES2018
ES2018 Rest/Spread Properties => Object Ϧςϥϧ (ؔҾ, ArrayES2015) Promise.prototype.finally() =>
Resolve, RejectʹؔΘΒ࣮ͣߦ Asynchronous iteration => ඇಉظgeneratorΛϧʔϓͤ͞Δ http://kangax.github.io/compat-table/es2016plus/ https://www.ecma-international.org/ecma-262/9.0/index.html
ES2018 - Asynchronous iteration async function getData () { updateStatus('0/2')
const data1 = await (await fetch(url1)).json() updateStatus('1/2') const data2 = await (await fetch(url2)).json() updateStatus('2/2') return {data1, data2} } Before https://qiita.com/cognitom/items/e67c7df29a238decf49f async function* getData () { yield {status: '0/2'} const data1 = await (await fetch(url1)).json() yield {status: '1/2', data1} const data2 = await (await fetch(url2)).json() yield {status: '2/2', data2} } After
ES2019
ES2019 Array.prototype.{flat, flatMap} Object.fromEntries() String.prototype.{trimStart, trimEnd} http://kangax.github.io/compat-table/es2016plus/ https://www.ecma-international.org/ecma-262/10.0/index.html
ES2019 https://developer.mozilla.org/ja/docs/Web/JavaScript/ Reference/Global_Objects/Array/flat https://developer.mozilla.org/ja/docs/Web/JavaScript/ Reference/Global_Objects/Array/flatMap https://developer.mozilla.org/ja/docs/Web/JavaScript/ Reference/Global_Objects/Object/fromEntries https://developer.mozilla.org/ja/docs/Web/JavaScript/ Reference/Global_Objects/String/TrimLeft https://developer.mozilla.org/ja/docs/Web/JavaScript/
Reference/Global_Objects/String/TrimRight
ES2020
ES2020 Stage4ͷࡦఆྃͱͳ༷͕ͬͨɺྫ6݄ʹ৽όʔ δϣϯͱͯ͠ϦϦʔε͞ΕΔ https://github.com/tc39/proposals/blob/master/ finished-proposals.md ͷʮExpected Publication Year / 2020ʯͷ෦
ES2020 String.prototype.matchAll() Promise.allSettled() BigInt globalThis for-in mechanics Optional chaining Nullish
coalescing operator ͳͲͳͲ http://kangax.github.io/compat-table/es2016plus/
৽نՃͷ༷Ұཡ https://github.com/tc39/proposals/blob/ master/finished-proposals.md
͜ͷػೳ͍࣮ͭ͞Εͨʁ MDN͔ΒٯҾ͖͕ Θ͔Γͦ͢͏
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠