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
2k
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
680
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
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
220
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
19
3.5k
GoのGenericsによるslice操作との付き合い方
syumai
3
680
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
220
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
2k
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
200
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
100
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
880
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
360
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Unsuck your backbone
ammeep
671
58k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Done Done
chrislema
184
16k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Raft: Consensus for Rubyists
vanstee
140
7k
Being A Developer After 40
akosma
90
590k
The Cult of Friendly URLs
andyhume
79
6.5k
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 を日本語でまとめているのでよければどうぞ