📌

Reactにおけるイベントハンドラの命名規則

2023/09/04に公開

Responding to Events では、イベントハンドラの追加方法だけではなく、その命名規則についても触れられているので良いですね。 今回はそれを紹介します。

https://react.dev/learn/responding-to-events

基本的な命名規則

Have names that start with handle, followed by the name of the event. By convention, it is common to name event handlers as handle followed by the event name. You’ll often see onClick={handleClick}, onMouseEnter={handleMouseEnter}, and so on.

By convention, event handler props should start with on, followed by a capital letter.

まとめるとシンプルに以下のルールで良いです。

  • propsとしてのイベントハンドラはonEventnameonClickなど)
  • それ以外はhandleEventnamehandleClickなど)

イベントハンドラの命名用のESLintルールもあるみたいなので、チームで命名規則を統一したい場合は使ってみると良いかもしれません。

https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-handler-names.md

handleButtonClick?handleClickButton?

個人的にはデフォルトイベントの命名に習って、最近はhandleButtonClick派です。

https://developer.mozilla.org/ja/docs/Web/Events#イベントの一覧

ちなみにReactのドキュメントでは、handlePlayClickonPlayMovieという命名が使われています。
handlePlayClickhandleButtonClickパターンで、onPlayMoviehandleClickButtonパターンのように見え、命名規則が統一されていない印象を受けます。 と思ったのですが、clicktouchのようなEvent名を命名に使わない場合はplayMovieのように命名するのが自然なんですかね。
英語がわからなくて「英語の文法的に〜」というのが言えないので、詳しい方がいたら教えてください🫠

Event名に依存した命名規則

Here, Toolbar passes them down as onClick handlers to its Buttons, but it could later also trigger them on a keyboard shortcut. Naming props after app-specific interactions like onPlayMovie gives you the flexibility to change how they’re used later.

export default function App() {
  return (
    <Toolbar onPlayMovie={() => alert('Playing!')} />
  );
}

function Toolbar({ onPlayMovie }) {
  return (
    <Button onClick={onPlayMovie}>Play Movie</Button>
  );
}

上記の例では、onPlayMovieonPlayClickのように命名することもできます。
しかし、Event名にちなんだ命名は、簡単で命名規則を統一できる一方で、そのEvent名が該当するイベントハンドラに使用するに限られます。

つまりonPlayClickというpropsは、clickイベントハンドラ以外に渡すことはできないということです。 仮にキーボードイベントでも同様の処理を実行したくなったときに、onPlayClickという命名のままだと困るという状況が発生する可能性があります。

そこで、あらかじめonPlayMovieのようにアプリケーション固有のインタラクションにちなんだ命名をすることで、propsをあらゆるイベントハンドラに渡しやすくなり、より柔軟に使うことができるようになります。

まとめ

基本的にはhandleEventname or onEventnameでEvent名を元に命名をすれば良いと思いますが、アプリケーション固有のインタラクションにちなんだ命名という引き出しを持っておくと、より改修に強いコードを書くことができそうです。

GitHubで編集を提案
frontend flat

Discussion