Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
39
Help us understand the problem. What is going on with this article?
@tonkotsuboy_com

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箇所だけ修正すればよいです。

39
Help us understand the problem. What is going on with this article?
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
tonkotsuboy_com
フロントエンド / 九州大学卒 / ウェブ制作 / JavaScriptコードレシピ集の著者 / CSS Nite 2017〜2019ベストセッション / TechFeed公認エキスパート /お仕事依頼はDMまで

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
39
Help us understand the problem. What is going on with this article?