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
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
260
Amazon Bedrockマルチエージェントコラボレーションを諦めてLangGraphに入門してみた
akihisaikeda
1
150
Better Code Design in PHP
afilina
0
180
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
130
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.6k
TCAを用いたAmebaのリアーキテクチャ
dazy
0
220
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
200
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
420
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
Datadog Workflow Automation で圧倒的価値提供
showwin
1
300
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
160
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Music & Morning Musume
bryan
46
6.4k
We Have a Design System, Now What?
morganepeng
51
7.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
GitHub's CSS Performance
jonrohan
1030
460k
Designing Experiences People Love
moore
140
23k
Bash Introduction
62gerente
611
210k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Agile that works and the tools we love
rasmusluckow
328
21k
Facilitating Awesome Meetings
lara
53
6.3k
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͔ΒٯҾ͖͕ Θ͔Γͦ͢͏
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠