0Pricing
TypeScript Academy · レッスン

イベントの型、カスタムイベント、HTMLElementサブタイプの絞り込み

正しい型でDOMイベントを処理し、CustomEventのペイロードを作成して、HTMLElementサブタイプを安全に絞り込みます

「イベントの型、カスタムイベント、HTMLElementサブタイプの絞り込み」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。

はじめに

目標: 型付きイベントリスナーを追加し、安全に要素の型を絞り込み、ペイロード付きのCustomEventを発生させます。

  • イベントの型（MouseEvent、KeyboardEvent、InputEvent）
  • target/currentTargetをinstanceofで絞り込む
  • CustomEventのdetailペイロード

型付きリスナー

リスナーのシグネチャにはイベント名に応じた型が付きます。click → MouseEvent、keydown → KeyboardEventのようになります。明確にするため、明示的な型注釈を追加します。

const btn = document.querySelector("#btn");
if (btn) {
  btn.addEventListener("click", (ev: MouseEvent) => {
    console.log("x=", ev.clientX, "y=", ev.clientY);
  });
}

window.addEventListener("keydown", (ev: KeyboardEvent) => {
  console.log("key=", ev.key);
});

targetとcurrentTargetの違い

targetは元の発生元で、さまざまな型になり得ます。一方、currentTargetはリスナーを受け取る要素です。要素APIを使う前にinstanceofで型を絞り込みます。

document.addEventListener("input", (ev: InputEvent) => {
  const t = ev.target;
  const c = ev.currentTarget; // here: Document
  if (t instanceof HTMLInputElement) {
    console.log("value=", t.value);
  }
});

CustomEventのペイロード

CustomEvent<T>は、型付きのdetailペイロードを保持します。対応するジェネリック型引数を使って発生させ、処理します。

type CounterDetail = { delta: number };

const inc = new CustomEvent<CounterDetail>("counter:change", {
  detail: { delta: 1 }
});

document.dispatchEvent(inc);

document.addEventListener("counter:change", (ev: CustomEvent<CounterDetail>) => {
  console.log("delta=", ev.detail.delta);
});

サブタイプの絞り込み

instanceofを使って、特定のHTML要素クラス（例: HTMLButtonElement、HTMLAnchorElement）まで絞り込みます。

document.addEventListener("click", (ev: MouseEvent) => {
  const el = ev.target;
  if (el instanceof HTMLButtonElement) {
    el.disabled = true; // safe: HTMLButtonElement API
  } else if (el instanceof HTMLAnchorElement) {
    console.log("href=", el.href);
  }
});

委譲とガード

イベント委譲: 上位の要素（document）でリッスンし、一致する要素を見つけて、APIにアクセスする前に型を絞り込みます。

document.addEventListener("click", (ev: MouseEvent) => {
  const el = ev.target as Element | null;
  if (!el) return;
  const btn = el.closest("button.btn-primary");
  if (btn instanceof HTMLButtonElement) {
    console.log("delegated click on:", btn.textContent);
  }
});

絞り込みの確認

簡単な確認: イベントハンドラーで要素固有のAPIにアクセスする最も安全な方法は何でしょうか?

まとめ

まとめ: イベント名からイベントの型が決まります。target/currentTargetはinstanceofで型を絞り込み、データはCustomEvent<T>のdetailに格納します。

よくある質問

「イベントの型、カスタムイベント、HTMLElementサブタイプの絞り込み」レッスンは無料ですか？

はい。「イベントの型、カスタムイベント、HTMLElementサブタイプの絞り込み」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。

「イベントの型、カスタムイベント、HTMLElementサブタイプの絞り込み」で何を学びますか？

正しい型でDOMイベントを処理し、CustomEventのペイロードを作成して、HTMLElementサブタイプを安全に絞り込みます ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。

「イベントの型、カスタムイベント、HTMLElementサブタイプの絞り込み」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. libのDOM型とquerySelector（strict null checks）
  2. イベントの型、カスタムイベント、HTMLElementサブタイプの絞り込み
  3. FormData、URL、URLSearchParamsの操作
← TypeScript Academyに戻る