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

2026-07-08 Nihonbashi.js #11

Transcript

1. Baseline対応のDOMの 型定義を作った 2026-07-08 Nihonbashi.js #11
2. 発表者紹介 uhyo 株式会社カオナビ フロントエンドエキスパート 実はTypeScriptに詳しい。 2
3. Baselineとは ウェブ機能を、ブラウザサポート状況によって 分類するもの Baseline Newly available = 全てのブラウザで利用可能 Baseline Widely available = 全てのブラウザで利用可能 になってから30ヶ月が経過 3
4. 固定ターゲット Baseline 2023 = 2023年までにNewly availableに なった機能 Baseline 2024, Baseline 2025, …… 4
5. 開発でよくある推奨環境の決め方 •推奨環境: 各ブラウザの最新版 = Baseline Newly Available に対応 •より広くサポートしたい（大抵はiOS） = Baseline Widely Available やBaseline 2024 などを使用 5
6. 型チェックしたい 例: Baseline Widely Availableではない機能を 使おうとしたら型エラーになってほしい。 （eslint-plugin-baseline-jsもあるけど型情報が必要な野良プラグインは 今ちょっと辛い立ち位置） 6
7. @baseline-types/dom-widely-available TypeScript本体のLib Replacement機能を使用 して、DOMの型定義をBaseline Widely Available に合わせたライブラリを作りました。 7
8. 導入方法 8 @baseline-types/dom-widely-availableを、 @typescript/lib-domという名前でインストール。
9. 導入方法 9 tsconfig.jsonでlibReplacementを有効化。 これにより@typescript/lib-domが認識される ようになる。
10. 結果 Newly Availableなメソッドを使うと型エラーが出 るようになった！ 10
11. バリエーション @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
12. バリエーション @baseline-types/dom-newly-available に変えると 型エラーが消えるぞ！ 12
13. 仕組み TypeScriptのTypeScript-DOM-Lib-Generatorを フォーク。 すでにあるもの: WebIDLから型定義を生成 作ったもの: 型をBaselineの情報を使ってフィルタ リングする仕組み https://github.com/uhyo/TypeScript-Baseline-Types 13
14. 週1自動更新 毎週自動更新で最新のBaseline情報をお届け。 バージョン名に日付を含めたのでいつ時点の 情報か分かりやすい！ 14
15. 今後の展望 全部AIにやってもらったので若干フィルタリング 結果が怪しいときがある。引き続き調整します。 DOM以外（ECMAScript）のBaseline対応も したら面白そうだけど全然違う仕組みが必要に…… 15
16. まとめ @baseline-types/dom-widely-availableとかを 使って型でBaseline対応しよう！ 16