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
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript ...
Search
petamoriken / 森建
August 30, 2024
Programming
3
570
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
fukuoka.ts #1(オンライン)
https://fukuoka-ts.connpass.com/event/320038/
petamoriken / 森建
August 30, 2024
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
530
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
240
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
2.2k
DOM Observable
petamoriken
1
270
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
700
Contributing to Deno is fun!
petamoriken
0
380
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.9k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2.3k
Other Decks in Programming
See All in Programming
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
790
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
1k
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
21
10k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
240
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
370
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
160
What's new in Adaptive Android development
fornewid
0
130
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
340
新しいモバイルアプリ勉強会(仮)について
uetyo
1
240
新世界の理解
koriym
0
110
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
720
コーディングエージェント概観(2025/07)
itsuki_t88
1
480
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.5k
Designing for Performance
lara
610
69k
Documentation Writing (for coders)
carmenintech
73
5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
740
The Pragmatic Product Professional
lauravandoore
36
6.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
We Have a Design System, Now What?
morganepeng
53
7.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Thoughts on Productivity
jonyablonski
69
4.8k
Embracing the Ebb and Flow
colly
86
4.8k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Transcript
ECMAScript、Web 標準の型は どう管理されているか fukuoka.ts #1 pixiv Inc. 森内建太 petamoriken 2024.8.30
2 自己紹介 • Web エンジニア • Deno コントリビューター • ECMAScript や Web 標準 を追うのが好き petamoriken カスタマーオペレーション
&セーフティ本部 オペレーション開発部
3
4 © ンバヂ https://x.com/nbaji9 https://www.nicovideo.jp/watch/sm42515407
5 tsconfig.json の compilerOptions.lib で指定する • ECMAScript ◦ “ES2023” や “ESNext” • Web 標準 ◦ “DOM” や “DOM.Iterable”
TypeScript の組み込み型定義
6 tsconfig.json
7 microsoft/TypeScript の src/lib 内にある 組み込み型定義の実態
8 • ECMAScript ◦ 型の追加、修正は手作業 • Web 標準 ◦ 2つ以上のブラウザに実装された型が自動更新 ◦
microsoft/TypeScript-DOM-lib-generator 組み込み型定義の実態
(余談)ES2024 の型を実装中 9
10 Mozilla の saschanaz さんによる管理 2つ以上のブラウザで実装された型が自動更新 • TypeScript へはバージョンアップ時に取り込まれる • 最新の型を使いたい場合は @types/web へ TypeScript-DOM-lib-generator
11 w3c/webref から最新の Web IDL を JSON で取得 TypeScript-DOM-lib-generator の仕組み
12 Browser Compat Data と突合する • ブラウザの実装状況や廃止された API かを調べる TypeScript-DOM-lib-generator の仕組み
13
14 最後にパッチを当てて型ファイルを生成 • イベント名のマッピング(文字列リテラル型対応) • ジェネリクス対応 などなど TypeScript-DOM-lib-generator の仕組み
15
16 TypeScript の組み込み型定義について • ECMAScript の型の追加、修正は手作業 • Web 標準の型は自動更新 ◦ Web IDL と Browser Compat
Data を使っている まとめ