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

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の変数の値を１箇所だけ修正すればよいです。