Articles
TypeScript入門
TypeScriptにおけるイベント処理

TypeScriptにおけるイベント処理

この記事ではTypeScriptにおけるイベント処理について説明します。

イベント処理の方法やカスタムイベントについてコードを通して学べます。

YouTube Video

TypeScriptにおけるイベント処理

TypeScriptにおけるイベント処理は、JavaScriptと同様に行いますが、TypeScriptでは型安全性が向上しているため、適切なイベント型を利用して安全にイベントを処理できます。イベント処理の基本は、DOM要素にイベントリスナーを追加して、ユーザーの操作に応じて処理を実行することです。

イベントリスナーの追加

イベントリスナーは、addEventListener メソッドを使ってDOM要素に追加します。例えば、クリックイベントを処理する場合は次のようにします。

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event) => {
4        console.log('Button was clicked');
5    });
6}
  • このコードでは、addEventListener を使って指定したDOM要素にクリックイベント発生時の処理を登録します。

TypeScriptでのイベントの型

TypeScriptでは、イベントリスナーで受け取る event オブジェクトに適切な型が自動的に付与されます。event オブジェクトは、イベントの種類に応じて異なるプロパティを持っていますが、基本となる型は Event です。

イベントごとに適切な型を利用することで、TypeScriptの型安全性を活かした開発ができます。

主要なイベント型

  1. Event Eventは、一般的なイベントの基本型です。フォーム送信やページの読み込み完了などに使用されます。
1const form = document.getElementById('myForm');
2if (form) {
3    form.addEventListener('submit', (event: Event) => {
4        event.preventDefault();  // Prevent the default form submission
5        console.log('Form was submitted');
6    });
7}
  • このコードは、フォームの送信イベントを検知してデフォルトの送信動作を防ぎ、代わりにメッセージをコンソールに出力します。

  1. MouseEvent

    MouseEventは、クリック、マウス移動などのマウス操作に関連するイベント型です。マウスの座標やクリックしたボタンに関する情報を取得できます。

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event: MouseEvent) => {
4        // Log the click position
5        console.log(`Click position: X=${event.clientX}, Y=${event.clientY}`);
6    });
7}
  • このコードは、ボタンがクリックされた際にマウス座標を取得してコンソールに表示します。
  1. KeyboardEvent KeyboardEventは、キーボード入力に関連するイベント型です。押されたキーや修飾キー（Shift、Alt、Ctrlなど）の状態にアクセスできます。
1document.addEventListener('keydown', (event: KeyboardEvent) => {
2    // Log the pressed key
3    console.log(`Key pressed: ${event.key}`);
4    if (event.ctrlKey) {
5        // Log that the Ctrl key was pressed
6        console.log('Ctrl key was pressed');
7    }
8});
  • このコードは、キーが押されたときに押されたキー名を表示し、Ctrlキーが同時に押されていればその情報もコンソールに出力します。
  1. InputEvent InputEventは、入力フィールドの変更に関連するイベント型です。テキストフィールドやテキストエリアなどの値が変更された際に利用されます。
1const input = document.getElementById('myInput') as HTMLInputElement;
2if (input) {
3    input.addEventListener('input', (event: InputEvent) => {
4        // Log the entered value
5        console.log(`Entered value: ${input.value}`);
6    });
7}
  • このコードは、入力フィールドの値が変更されるたびにその内容をコンソールに表示します。
  1. FocusEvent FocusEventは、要素がフォーカスを得た時や失った時に発生するイベント型です。
 1const input = document.getElementById('myInput');
 2if (input) {
 3    input.addEventListener('focus', (event: FocusEvent) => {
 4        // Log when the input gains focus
 5        console.log('Focused');
 6    });
 7
 8    input.addEventListener('blur', (event: FocusEvent) => {
 9        // Log when the input loses focus
10        console.log('Blurred');
11    });
12}
  • このコードは、入力フィールドがフォーカスされたときに「Focused」、フォーカスを失ったときに「Blurred」とコンソールに表示します。

型アサーションを使ったカスタムイベントの処理

カスタムイベントや、TypeScriptの型推論が効かない場合には、型アサーションを使って明示的に型を指定することができます。

例えば、特定の入力フィールド（HTMLInputElement）に対してイベントを処理する場合は、次のように型を指定します。

1const input = document.getElementById('myInput') as HTMLInputElement;
2if (input) {
3    input.addEventListener('input', (event: Event) => {
4        const target = event.target as HTMLInputElement;
5        // Log the entered value
6        console.log(`Entered value: ${target.value}`);
7    });
8}
  • このコードは、型アサーションを使ってイベントの対象要素を HTMLInputElement として扱い、その入力値をコンソールに表示します。

イベントリスナーの削除

イベントリスナーは removeEventListener を使って削除できます。これには、最初に追加した時と同じイベントハンドラを渡す必要があります。

 1const button = document.getElementById('myButton');
 2
 3const handleClick = (event: MouseEvent) => {
 4    // Log when the button is clicked
 5    console.log('Button was clicked');
 6};
 7
 8if (button) {
 9    button.addEventListener('click', handleClick);
10
11    // Remove the event listener later
12    button.removeEventListener('click', handleClick);
13}
  • このコードは、ボタンにクリックイベントリスナーを追加した後、同じハンドラを指定して削除します。

カスタムイベントの作成

TypeScriptでは、標準のイベントに加えてカスタムイベントを作成し、発火させることも可能です。CustomEvent クラスを使ってカスタムイベントを作成し、dispatchEvent メソッドで発火させます。

 1const customEvent = new CustomEvent('myCustomEvent', { detail: { name: 'TypeScript' } });
 2const div = document.getElementById('myDiv');
 3
 4if (div) {
 5    div.addEventListener('myCustomEvent', (event: CustomEvent) => {
 6        // Log when the custom event is fired
 7        console.log(`Custom event was triggered: ${event.detail.name}`);
 8    });
 9
10    div.dispatchEvent(customEvent);  // Dispatch the custom event
11}
  • このコードは、CustomEvent を使ってカスタムイベントを作成し、要素に対して発火させ、その詳細情報をコンソールに表示します。

イベント伝播の制御

イベントが発生すると、デフォルトではイベントはバブリング（親要素に伝播）します。これを防ぐためには、event.stopPropagation() を使います。また、preventDefault() を使って、ブラウザのデフォルト動作を防止することも可能です。

 1const button = document.getElementById('myButton');
 2if (button) {
 3    button.addEventListener('click', (event: MouseEvent) => {
 4        event.preventDefault();  // Prevent the default action
 5        event.stopPropagation();  // Stop the event propagation
 6
 7        // Log that event handling has been customized
 8        console.log('Custom event handling');
 9    });
10}
  • このコードは、ボタンのクリック時にデフォルト動作を無効化し、イベントのバブリングも停止させてカスタム処理を実行します。

まとめ

TypeScriptでのイベント処理は、基本的にJavaScriptと同じですが、適切な型定義があるため、イベントオブジェクトやDOM要素に対して安全かつ確実な操作が可能です。イベントリスナーの追加・削除、イベント型の適用、型アサーションを活用することで、イベント処理がより明確でエラーの少ないコードを実現できます。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video

TypeScriptにおけるShadow DOMTypeScriptにおけるFetch/XMLHttpRequest