イベントハンドラ名はonClick？handleClick？

はじめに

JavaScript やそのフレームワークを使用して Web アプリケーションを開発する際、イベントハンドラの命名規則について悩むことはありませんか？私は、onClick、handleClick、onSubmit、handleSubmit など、イベントハンドラ名について悩むことが多々ありました。

React の公式ドキュメントで、どのようにイベントハンドラ名を命名するべきかについて記載がありましたので、共有します。

結論：イベントハンドラ名は handle[Event]とする

React の公式ドキュメントには、下記のように記載があります。

慣習的に、イベントハンドラは handle の後ろにイベントの名称をつなげた名前にすることが一般的です。onClick={handleClick}、onMouseEnter={handleMouseEnter} などがよく見られます。

このように、イベントハンドラ名は handle[Event]とすることが一般的であるとのことです。この慣習に従うことで、他の開発者がコードを読んだ際に、イベントハンドラ名がどのようなイベントを処理しているかを推測しやすくなります。

まとめ

イベントハンドラ名は handle[Event]とする。