📌

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

ito

2023/09/04に公開

React

命名規則

tech

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としてのイベントハンドラはonEventname（onClickなど）
それ以外はhandleEventname（handleClickなど）

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

handleButtonClick？handleClickButton？

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

ちなみにReactのドキュメントでは、handlePlayClickやonPlayMovieという命名が使われています。
handlePlayClickはhandleButtonClickパターンで、onPlayMovieはhandleClickButtonパターンのように見え、命名規則が統一されていない印象を受けます。と思ったのですが、clickやtouchのような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>
  );
}

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

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

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

まとめ

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

GitHubで編集を提案

株式会社FLAT テックブログPublication

フロントエンドに強みを持つシステム開発会社、株式会社FLAT（wd-flat.com/）のテックブログです。

基本的な命名規則

handleButtonClick？handleClickButton？

Event名に依存した命名規則

まとめ

Discussion