Reactのイベントハンドラの命名

Reactのイベントハンドラの命名規則はプロジェクト、実装者によってかなりばらつきがあるように思う。以下、今まで見たことがある命名一覧（例：削除ボタンのclickイベントハンドラ）。

• onClick
• onClickDelete
• onClickDeleteButton
• onDeleteButtonClicked
• handleClick
• handleClickDelete
• handleClickDeleteButton
• handleDeleteButtonClicked
• handleOnClick
• handleOnClickDelete
• handleOnClickDeleteButton
• handleOnDeleteButtonClicked
• deleteHandler

主にonXXXとhandleXXXとxxxHandlerの3種類に分かれる。使い分けは

1. コンポーネントのprops名
2. 親コンポーネントに定義する子コンポーネントのpropsに渡すイベントハンドラ

の2種類ある。

onXXX系は1と2の両方に使われているのを見たことがある。handleXXX系も両方で使われているのを見たことがあるが2の用途の方が多い。xxxHandlerは見たことはあるが数が少ないのでよく覚えていない。

いくつかの命名について補足する。

• onClick
  • XXXDeleteButtonのようなコンポーネントのprops名に使われることが多い
  • コンポーネント名から削除ボタンであることが自明
  • コンポーネントのclickイベント発火箇所が1つ
• onClickDelete
  • 1と2の両方に使われる
  • コンポーネントのclickイベント発火箇所が複数
  • 削除UIをクリックしたときのハンドラであることが明示的
• onClickDeleteButton
  • onClickDelete + Button
  • ボタンであることを明示
  • ボタンでなくなる可能性があるので変更に弱い
• handleClickDelete / handleOnClickDelete
  • handleDeleteButtonClickedと比較するとclickイベントのハンドラであることが読み始めでわかりやすい

個人的には最近はonClickとonClickDeleteで書いている。補足で書いた通り、削除ボタンであることが自明な場合のコンポーネントのprops名にはonClick。それ以外はonClickDeleteにしている。onClickDeleteButtonのようなボタンであることを明示する命名とonDeleteButtonClickedのような受動態でイベントが読み終わりでわかる命名は避けている。

正直、プロジェクトでこの命名規則の統一はかなり難しいように思うので諦めている。統一されていなくても気持ち悪いだけで実害はそこまで大きくないと思う。