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
980
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 / 森建
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.4k
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
520
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
240
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
2.1k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
550
DOM Observable
petamoriken
1
260
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
690
Contributing to Deno is fun!
petamoriken
0
370
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.9k
Other Decks in Programming
See All in Programming
技術同人誌をMCP Serverにしてみた
74th
1
520
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
380
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
250
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.7k
Goで作る、開発・CI環境
sin392
0
190
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
2
240
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
270
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
660
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
730
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
1
380
ふつうの技術スタックでアート作品を作ってみる
akira888
0
300
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
A designer walks into a library…
pauljervisheath
207
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
GitHub's CSS Performance
jonrohan
1031
460k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing for humans not robots
tammielis
253
25k
Agile that works and the tools we love
rasmusluckow
329
21k
Faster Mobile Websites
deanohume
307
31k
How GitHub (no longer) Works
holman
314
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Building an army of robots
kneath
306
45k
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 を日本語でまとめているのでよければどうぞ