Baseline対応のDOMの型定義を作った

Baseline対応のDOMの型定義を作った 2026-07-08 Nihonbashi.js #11

発表者紹介 uhyo 株式会社カオナビフロントエンドエキスパート実はTypeScriptに詳しい。 2

Baselineとはウェブ機能を、ブラウザサポート状況によって分類するもの Baseline Newly available = 全てのブラウザで利用可能 Baseline Widely
available = 全てのブラウザで利用可能になってから30ヶ月が経過 3

固定ターゲット Baseline 2023 = 2023年までにNewly availableになった機能 Baseline 2024, Baseline
2025, …… 4

開発でよくある推奨環境の決め方 •推奨環境: 各ブラウザの最新版 = Baseline Newly Available に対応 •より広くサポートしたい（大抵はiOS） =
Baseline Widely Available やBaseline 2024 などを使用 5

型チェックしたい例: Baseline Widely Availableではない機能を使おうとしたら型エラーになってほしい。（eslint-plugin-baseline-jsもあるけど型情報が必要な野良プラグインは今ちょっと辛い立ち位置） 6

@baseline-types/dom-widely-available TypeScript本体のLib Replacement機能を使用して、DOMの型定義をBaseline Widely Available に合わせたライブラリを作りました。 7

導入方法 8 @baseline-types/dom-widely-availableを、 @typescript/lib-domという名前でインストール。

導入方法 9 tsconfig.jsonでlibReplacementを有効化。これにより@typescript/lib-domが認識されるようになる。

結果 Newly Availableなメソッドを使うと型エラーが出るようになった！ 10

バリエーション @baseline-types/dom-widely-available @baseline-types/dom-newly-available @baseline-types/dom-2022 @baseline-types/dom-2023 @baseline-types/dom-2024 @baseline-types/dom-2025 11

バリエーション @baseline-types/dom-newly-available に変えると型エラーが消えるぞ！ 12

仕組み TypeScriptのTypeScript-DOM-Lib-Generatorをフォーク。すでにあるもの: WebIDLから型定義を生成作ったもの: 型をBaselineの情報を使ってフィルタリングする仕組み https://github.com/uhyo/TypeScript-Baseline-Types 13

週1自動更新毎週自動更新で最新のBaseline情報をお届け。バージョン名に日付を含めたのでいつ時点の情報か分かりやすい！ 14

今後の展望全部AIにやってもらったので若干フィルタリング結果が怪しいときがある。引き続き調整します。 DOM以外（ECMAScript）のBaseline対応もしたら面白そうだけど全然違う仕組みが必要に…… 15

まとめ @baseline-types/dom-widely-availableとかを使って型でBaseline対応しよう！ 16

Baseline対応のDOMの型定義を作った

Baseline対応のDOMの型定義を作った

uhyo

More Decks by uhyo

Other Decks in Technology

Featured

Transcript