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
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
110
Updates on MLS on Ruby (and maybe more)
sylph01
1
120
Honoアップデート 2025年夏
yusukebe
1
870
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
1
2.3k
コンテキストエンジニアリング Cursor編
kinopeee
1
720
The State of Fluid (2025)
s2b
0
200
ワープロって実は計算機で
pepepper
2
1.4k
tool ディレクティブを導入してみた感想
sgash708
1
150
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
170
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
120
Rancher と Terraform
fufuhu
1
120
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
For a Future-Friendly Web
brad_frost
179
9.9k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
4 Signs Your Business is Dying
shpigford
184
22k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
How GitHub (no longer) Works
holman
315
140k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
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͔ΒٯҾ͖͕ Θ͔Γͦ͢͏
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠