HTMLElement/Event DOM 型
最終更新：2026-10-22
HTMLElement/Event DOM 型
DOM プログラミングの型はすべて TS 組み込みの DOM lib から来ます。要素には継承の階層（EventTarget → Node → Element → HTMLElement → HTMLInputElement など）があり、イベントのオブジェクトは target を持っています。正確な型はナローイングで手に入れます。instanceof で HTMLElement を具体的なサブクラスに絞り込んで初めて .value といった固有のプロパティにアクセスできます。イベントのコールバックの中も同様で、e.target も絞り込んで初めて意味があります。
| グループ | 設定と実践 |
|---|---|
| 種類 | 構文 |
| strict モード | 不要 |
ℹ️ 説明 エディタは TypeScript を JavaScript にトランスパイルして実行します（型チェックなし）。型チェック結果は各サンプルの出力を参照してください。
📝 構文
// 要素のナローイング：instanceof で具体的なサブクラスへ絞り込む
function setText(el: HTMLElement, text: string) {
if (el instanceof HTMLInputElement) {
el.value = text; // ナローイングして初めて .value がある
} else {
el.textContent = text; // 普通の要素は textContent を使う
}
}
// イベントのナローイング：e.target は EventTarget | null
function onClick(e: Event) {
const t = e.target;
if (t instanceof HTMLInputElement) {
console.log(t.value); // ナローイング後のみアクセス可能
}
}⚙️ パラメータ
| HTMLElement | すべての HTML 要素の共通の基底クラスです。.textContent/.style などの汎用のメンバーしかなく、querySelector は既定では Element を返します。具体的なタグはジェネリックパラメータで絞り込めます |
|---|---|
| HTMLInputElement | 入力欄の具体的なサブクラスで、.value/.name/.checked を追加で持ちます。「絞り込んで初めてメンバーが使える」典型例です |
| Event.target | イベントが実際に起きた要素で、型は EventTarget | null です（window、document の可能性もあります）。ほぼ必ず instanceof で絞り込んでから使うことになります |
戻り値：ナローイング自体に戻り値はありません。コンパイラがその分岐の中で参照を「より正確な型として見る」ようにするだけで、実行時のコストはゼロです。
▶ サンプル
下のコードを編集して「試す」を押すと、トランスパイル実行結果を確認できます：
出力：
input.value = "dev@example.com"
textContent = "Welcome"
input "email" = "dev@example.com"
clicked <HTMLElement>
（トランスパイル後の実行出力。この例では本物の DOM の代わりにスタブクラスを使っています。同じ instanceof の書き方はブラウザの中で本物の要素に対しても有効です。DOM のコードはブラウザの中で動かす必要があります）💡 ポイント
ℹ️ 説明 要素の階層の連鎖は覚える価値があります。EventTarget → Node → Element → HTMLElement → 具体的なタグ（HTMLInputElement/HTMLDivElement...）です。階層が上ほどメンバーは少なく、具体的に絞り込むほど使えるメンバーが増えます。
💡 ヒント querySelector はジェネリックで一発で書けます。document.querySelector<HTMLInputElement>('#email') は HTMLInputElement | null を返し、instanceof を省けます。ただし実行時には何も検証されないので、要素が本当に input であるときだけ安全です。
⚠️ 注意 e.target と e.currentTarget を混同しないでください。target は実際にクリックされた要素で（リスナーを付けた要素ではない可能性があり、null のこともあります）、currentTarget はリスナーをバインドした要素です。フォームで値を取るときは e.currentTarget がおすすめです（具体的なイベント型のコールバックシグネチャと組み合わせるとさらに正確です）。
🏷️ 関連設定と実践
💡 関連ケース
ケースは今後追加予定です。
📚 関連チュートリアル
❓ よくある質問
Q document.querySelector の戻り値の型に null が含まれるのはなぜですか？
A セレクタがどの要素にも合致しない可能性があるからです。strictNullChecks がこの null の処理（if による空判定や ?. によるアクセス）を強制します。厳格モードが最も「うっとうしい」と同時に最も「命を救う」典型の場面です。
Q 型エラーを出さずに input の value を取るには？
A まず HTMLInputElement 型を手に入れます。querySelector<HTMLInputElement>("#id") を使うか、ジェネリックな Element に instanceof HTMLInputElement でナローイングます。そのままの HTMLElement では .value にアクセスできません。そのプロパティはサブクラスにあるからです。
Q addEventListener のコールバックの引数で正確なイベント型を得るには？
A DOM lib はよく使うイベント名にオーバーロードを用意しています。el.addEventListener("input", (e) => ...) の中の e は自動的に対応する Event のサブ型になります。さらに HTMLElement のタグのジェネリック（querySelector<HTMLInputElement>）と組み合わせれば target をさらに絞り込めます。オーバーロードのないイベント名だけ手動のアサーションが必要です。
