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
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
kasacchiful
0
260
バランスを見極めよう!実装の意味を明示するための型定義 TSKaigi 2025 Day2 (5/24)
whatasoda
2
780
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
150
技術懸念に立ち向かい 法改正を穏便に乗り切った話
pop_cashew
0
830
TypeScript だけを書いて Tauri でデスクトップアプリを作ろう / Tauri with only TypeScript
tris5572
2
540
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
1.1k
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
180
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.6k
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
0
140
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
12
6.4k
Language Server と喋ろう – TSKaigi 2025
pizzacat83
2
670
Javaに鉄道指向プログラミング (Railway Oriented Pro gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
cocet33000
1
120
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
A designer walks into a library…
pauljervisheath
205
24k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Building Adaptive Systems
keathley
41
2.6k
Docker and Python
trallard
44
3.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Designing for Performance
lara
608
69k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Code Reviewing Like a Champion
maltzj
523
40k
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͔ΒٯҾ͖͕ Θ͔Γͦ͢͏
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠