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
TC39 で提案されている ECMAScript 最新仕様 / ECMAScript la...
Search
petamoriken / 森建
August 20, 2019
Programming
2
910
TC39 で提案されている ECMAScript 最新仕様 / ECMAScript latest specification proposed in TC39
FukuokaJS #9
https://fukuokajs.connpass.com/event/139859/
petamoriken / 森建
August 20, 2019
Tweet
Share
More Decks by petamoriken / 森建
See All by petamoriken / 森建
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
440
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
190
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
1.6k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
490
DOM Observable
petamoriken
1
210
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
600
Contributing to Deno is fun!
petamoriken
0
320
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.5k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2.2k
Other Decks in Programming
See All in Programming
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
0
120
AWS re:Invent 2024個人的まとめ
satoshi256kbyte
0
140
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1.1k
混沌とした例外処理とエラー監視に秩序をもたらす
morihirok
18
3.1k
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
1
210
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
3
980
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
800
SpringBoot3.4の構造化ログ #kanjava
irof
2
580
Beyond ORM
77web
11
1.6k
Azure AI Foundryのご紹介
qt_luigi
1
250
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
6
1.5k
functionalなアプローチで動的要素を排除する
ryopeko
1
800
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
A Philosophy of Restraint
colly
203
16k
Thoughts on Productivity
jonyablonski
68
4.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Into the Great Unknown - MozCon
thekraken
34
1.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
52k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
What's in a price? How to price your products and services
michaelherold
244
12k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Transcript
TC39 で提案されている ECMAScript 最新仕様 pixiv Inc. petamoriken 2019.8.20 #9 FukuokaJS
LT
2 自己紹介 • 主にフロントエンドエンジニア • ActionScript 3.0 を JavaScript に書き直したり
WebGL を駆使したサイトを作ったり PHP のコードをリファクタリングしたり • ECMAScript とか DOM API を追うのが好き petamoriken 課題解決部
3 Ecma International TC39 とは • JavaScript の言語仕様 ECMAScript を策定する専門委員会
• 提案一覧は GitHub 上で管理されている ◦ https://github.com/tc39/proposals • だいたい2ヶ月おきに会議を開いている ◦ アジェンダ: https://github.com/tc39/agendas ◦ 議事録: https://github.com/rwaldron/tc39-notes
4 ECMAScript の策定プロセス • Stage 1 Proposal ◦ 担当者が決まる •
Stage 2 Draft ◦ 最初の Spec テキストが作られる • Stage 3 Candidate ◦ Spec テキストが完成し、レビューが完了する • Stage 4 Finished ◦ polyfill ではない2つの実装で互換性が確認される
5 議論に参加するには • 既存の提案については該当のリポジトリの issues へ • 新規提案については ES Discuss
というメーリングリストへ ◦ ここ数日は Modulo Operators がホットトピック ◦ Float16Array ▪ polyfill 書いたら Stage 1 になった ◦ Map#assign ▪ 提案したらより包括的な Collection Methods が Stage 1 になった
具体的に各 Stage の提案を 10個ほど紹介していきます 6
Stage 4 (ES2020) 3 out of 3 7
8 String#matchAll • 正規表現のキャプチャを含めてマッチした文字列を得るメソッド const reg = /t(e)(st(\d?))/g; const str
= "test1test2"; str.match(reg); // -> ["test1", "test2"] • String#match だとキャプチャ出来ない
9 String#matchAll • RegExp#exec だとループ処理を書く必要がある let match; while (match =
reg.exec(str)) { // reg.lastIndex プロパティを書き換えることで状態を保持している console.log(match); } // -> ["test1", "e", "st1", "1", index: 0, input: "test1test2", groups: undefined] // -> ["test2", "e", "st2", "2", index: 5, input: "test1test2", groups: undefined]
10 String#matchAll • String#matchAll を使うと安全に得られる for (const match of str.matchAll(reg))
{ // Iteratorの内部で状態を保持している(RegExp#execよりも安全) console.log(match); } // -> ["test1", "e", "st1", "1", index: 0, input: "test1test2", groups: undefined] // -> ["test2", "e", "st2", "2", index: 5, input: "test1test2", groups: undefined]
11 Dynamic Imports • 動的にモジュールを読み込むことができるシンタックス • 読み込みに成功したら以降その結果をキャッシュする • 読み込み失敗時にはキャッシュされない ◦
ちょうど一昨日その変更が入った Normative: change idempotency for HostImportModuleDynamically https://github.com/tc39/ecma262/pull/1645
12 Promise.allSettled • Promise が全て fullfilled か rejected のときに fullfilled
する Promise を返すスタ ティックメソッド • Promise.all は ◦ Promise が全て fullfilled のときに fullfilled ◦ Promise が1つでも rejected のときに rejected
Stage 3 3 out of 14 13
14 Weak References let obj = { foo: "foo" };
const weakRef = new WeakRef(obj); console.log(weakRef.deref()); // -> { foo: "foo" } // { foo: "foo" } への参照をなくす obj = null; // しばらく経って GC によって回収されたら null になる console.log(weakRef.deref()); // -> null
15 Weak References • GC された後処理用のコールバックを登録出来る const finalization = new
FinalizationGroup((holdings) => { for (const holding of holdings) { console.log(holding); // -> "bar" } }); // コールバックに渡す引数とともに登録する finalization.register(obj, "bar");
16 Weak References • GC は実装によって挙動が異なるためロジックとして扱うことは非推奨 ◦ GC の順番保証はされず、タイミングを制御することは出来ない ◦
ブラウザでタブを閉じたときに後処理用のコールバックは実行されない ◦ 例えば GC されたら Local Storage などに退避させて、また必要になったら取り出す などの処理はバグる恐れがあるのでしてはいけない • あくまで過剰なメモリ使用を削減したり、メモリリークを防ぐなどのために使うことを推奨して いる
17 Nullish Coalescing Operators • 主にオプションのデフォルト値周りが書きやすくなる演算子 interface Options { width?:
number; height?: number; duration?: number; } const options: Options = { width: 100, duration: 0, };
18 Nullish Coalescing Operators • null, undefined のときにデフォルト値を受け取るようにする const width
= options.width != null ? options.width : 256; const height = options.height != null ? options.height : 256; const duration = options.duration != null ? options.duration : 500; • Nullish Coalescing Operators で書きやすくなる const width = options.width ?? 256; const height = options.height ?? 256; const duration = options.duration ?? 500;
19 Optional Chaining • オプション自体が null の場合に対処しやすくなる interface Options {
width?: number; height?: number; duration?: number; } const options: Options | null = null;
20 Optional Chaining • オプション自体が null の場合を考慮しないと TypeError を引き起こす const
width = options.width ?? 256; // Uncaught TypeError: Cannot read property 'width' of null • Optional Chaining で null, undefined に対処する const width = options?.width ?? 256; const height = options?.height ?? 256; const duration = options?.duration ?? 500;
Stage 2 3 out of 17 21
22 Decorators • クラスやメソッドに @foo などを付与することで処理を追加するシンタックス • 最新仕様は今年3月に登場した3代目 Built-in Decorators
◦ TypeScript の experimentalDecorators は初代の仕様のままで全然追随出来てい ない ◦ Babel は2代目の仕様のまま • 詳しくは Qiita の ESNext Stage 2 Decorators の変遷と最新仕様 という記事へ
23 Iterator Helpers • Iterator/AsyncIterator を変換・操作するメソッド • 遅延評価のため Array から
Array を作るよりも無駄にならない ◦ next メソッドで値を取り出すときに処理がなされる • 詳しくは uhyo さんの JavaScriptのイテレータが持つメソッドをそろそろ知っておきたい人 が読む記事 へ const iterator = [1, 2, 3, 4, 5].values(); const array = iterator.take(3) .map((value) => value * 2) .toArray();
24 Explicit Resource Managements • 明示的にリソースの後処理をするシンタックス • 具体的なシンタックスについてはまだ未定 try (const
fileHandle = acquireFileHandle()) { // スコープを抜けるときに // fileHandle[Symbol.dispose] が呼ばれ開放処理を行う } • 詳しくは uhyo さんの try-using文を用いるJavaScriptの超モダンな“リソース管理” へ
Stage 1 1 out of 48 25
26 Emitter • 今年6月に登場した期待(?)の新人 • Push-based Streams を扱えるインターフェースとして提案されている const emitter
= new Emitter(); emitter.each((value) => console.log(value)); // -> 42 emitter.next(42);
27 Emitter • EventTarget から Emitter を作る Emitter.run( Emitter.on(document, "click"),
Emitter.filter((e) => e.target.tagName === "BUTTON"), Emitter.map((e) => ({ x: e.clientX, y: e.clientY })), (coords) => console.log(coords), );
28 Emitter • Stage 1 Observable (RxJS) vs Emitter ◦
どちらも Push-based Streams を扱える ◦ Observable は Subscription と双方向にやりとりするが Emitter は単方向 のみ ▪ RxJS で言うところの Hot な状態のみを扱える ▪ つまり Emitter は Observable よりも扱える領域は狭いと言える
29 Emitter • Iterable, AsyncIterable (Pull-based Streams), Promise も幅広く扱うことが出来る •
Emitter を経由して Iterable から Array を作る ◦ Emitter.reduce でコレクションに変換できる const iterator = [1, 2, 3, 4, 5].values(); const array = Emitter.run( iterator, Emitter.until(3), Emitter.map((value) => value * 2), Emitter.reduce([]), );
30
31 Emitter • まだ Stage 1 なのでよくわからないが現段階で API が結構やばめ •
引数の型によって動作が変わる ◦ Emitter.reduce(0) は number が流れてきたら足し、それ以外だと 1足す ◦ Emitter.reduce("") は流れてきたものを string にキャストし連結する ◦ Emitter.reduce([]) は流れてきたものを Array#push する ◦ Emitter.reduce({}) は流れてきたものを Object.assign する • もし非同期のものが流れてきた場合はどうなるんだろう ……
32 終わりに • みなさんも TC39 の動向を追ってみてはいかがでしょうか? • 個人的に Scrapbox に
TC39 meeting を日本語でまとめているのでよければどうぞ