Help us understand the problem. What is going on with this article?

TypeScriptでのイベント名をclickで指定するのはもう辞めよう

More than 1 year has passed since last update.

TypeScript(またはJavaScript)でイベント名を扱う場合は、"load""click"等、イベント名を直書きにすることが多いと思います。しかし、このようにイベント名を直書きしたコーディングを行うと、プロジェクトが大きくなるほどタイピングミスに気づきにくく、バグの誘発につながります。これを防ぐために、String enumsを作り、一元管理することをお薦めします

イベント名を直書きした処理

まずよく見受けられるプログラミング方法です。ウインドウをクリックした時にアラートを出す処理はTypeScriptで下記のように記述します。

// ウインドウをクリックした時の処理
window.addEventListener("load", () => alert("ウィンドウのロードが完了しました。"));
window.addEventListener("click", () => alert("clickされました。"));
window.addEventListener("mousemove", () => console.log("マウス移動しています。"));

addEventListener()メソッドの第一引数は、"load""click"のようにイベント名を直接文字列で記述しています。例えば複数の処理で"click"という文字列を使用すれば、その分だけタイピングミスとバグの危険性が上がります。

String enumsを使った処理

上記と同じ処理を、イベント名を列挙したEnum「EventName」を使ったものが下記です。

/**
 * イベント名の列挙型
 */
const enum EventName {
  LOAD = "load",
  CLICK = "click",
  MOUSE_MOVE = "mousemove"
}

// EventNameクラスを使用してイベント名を指定する。
window.addEventListener(EventName.LOAD, () => alert("ウィンドウのロードが完了しました。"));
window.addEventListener(EventName.CLICK, () => alert("clickされました。"));
window.addEventListener(EventName.MOUSE_MOVE, () => console.log("マウス移動しています。"));

addEventListener()メソッドの第一引数では、EventName.CLICKという風にEventNameを経由してイベント名を指定しています。文字列に誤りがあってもEventNameの変数の値を1箇所だけ修正すればよいです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away