# イベントハンドラ

## イベント / イベントハンドラとは？
イベントハンドラというのは「**A**が起きたときに**B**してほしい」を設定するもの。

```javascript

const Props = {
  onSubmit: () => void;
}

const MyComponent = (props) => {
...
}

```

## よくあるミス

- e.g. 「Run test」ボタンがクリックされた時に、`testConnection` というメソッドを実行させたい
    - `testConnection` と命名
    - `onConnectionTest` と命名
    - この例では、一見「**A**が起きたときに**B**してほしい」の**A**を命名に使おうが**B**を命名に使おうがどちらも「テスト」に関わるため違和感がない**かのように見える**

**しかし B を命名に使うのは実は誤りである** -> `testConnection` も `onConnectionTest` も両方NG

## 原則
少なくとも js では、「**A**が起きたときに**B**してほしい」状況下でイベントハンドラの命名は `on{Aが起きる}` となるべき。

極端な例を挙げると、「カラスが鳴いたときに町を爆破する」場合、カラスコンポーネントのイベント名に town や bom を関与させるのはおかしい。

## 修正案
そのため、先の例では `onTestInvoked` や `onTestFormSubmitted` 等が相応しい。

---

## Page Navigation

- Canonical URL: https://tips.weseek.co.jp/Tips/JavaScript/命名規則
- Permalink: https://tips.weseek.co.jp/60ae84d41091010049bed55d
- Parent: [JavaScript](/5fb74e7aa1ba4200489a4bd1.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 6 total
  - [Express](/65069da24603e7ff39a6b3db.md)
  - [Sequelize](/65069da24603e7ff39a6b3d7.md)
  - [Streams](/5fb74f7ea1ba4200489a4bf8.md)
  - [nodist](/5fb74fa7a1ba4200489a4c05.md)
  - [yarnとnpmの違い](/5fb74fd9a1ba4200489a4c0e.md)
  - [デバッグの勘所](/5fb75061a1ba4200489a4c26.md)
- Last updated: 2021-10-06T13:37:03.067Z by yuki
- Full page listing (all children regardless of count): https://tips.weseek.co.jp/_api/v3/page-listing/children?id=60ae84d41091010049bed55d