変数名って難しい ~handle〇〇編~

はじめに

変数名って難しいなと思ったことはありますか？？
私は自分でコード書く時や、レビューして他人のコードを読む時によく思います。
みんな何かしら思いや考えがあり、実際の業務で触るコードは結構わちゃわちゃな印象です🙀

意味合いが伝わればOKだったり、命名規則などのルールを明記して統一したり、色々見ますがどこまで徹底されているのでしょうか！？

handle〇〇編

アクションをボタンなどのイベントで発火したいケースにおける命名規則を紹介したいと思います。

例

export const HogePresenter: FC<HogeTypes> = (props) => {
  const { start } = props
  return (
    <>
      <div>Welcome to Hoge</div>
      <button onClick={start}>start</button>
    </>
  )
}

このケースでstartというアクション(Container側でdispatch処理がラップされた関数)は、ボタンをクリックしたときに発火されるのは用意に想像できます。
start以外の関数も一緒に発火させたいケースはどう扱えばいいでしょうか？？

export const HogePresenter: FC<HogeTypes> = (props) => {
  const { start, opneModal } = props
  return (
    <>
      <div>Welcome to Hoge</div>
      <button
        onClick={() => { start(); opneModal(); }}
      >
        start
      </button>
    </>
  )
}

onClickにツッコミますか？
それともhandle〇〇みたいな関数を作成しますか？
(handleClick, handleStart、handleButtonなどなど)

やはり分かり易さが一番じゃい

私としてはこの命名規則を推します！！

handle + 対象 + Event

---

最初、handle + Event + 対象で記載していました。
命名についてご指摘いただき、handle + 対象 + Eventの方がより明確だと思いましたので、採用させていただきました🙏

---

このルールの良いポイントは、何(対象)のどんなイベント(Event)を意味しているかが非常に分かりやすい点です。

export const HogePresenter: FC<HogeTypes> = (props) => {
  const { start, openModal } = props
  // handle + Event名(今回はClick) + 対象(StartButton)
  const handleStartButtonClick = () => {
    start();
    openModal();
  }
  
  return (
    <>
      <div>Welcome to Hoge</div>
      <button onClick={handleStartButtonClick}>作成</button>
    </>
  )
}

handleStartButtonClickがスタートボタンのクリックイベントがハンドリングされているのが分かります。
そのまんまですね！

どんどんボタンや色々なイベントで発火したいアクションが増えていくと、ごちゃごちゃして読みにくくなりメンテしづらくなるはずです。
そういった負債となり得る状況を作りにくくするために、この命名規則は役に立ってくれます！！

そもそもとして

• Presenter側で関数を組み合わせているけど正しい責任分離なのか?
• start自体にopenModalの責任があるはず！
  などなど。。。別の問題も少し見えてきます😅
  これらはコンポーネントの設計、関数の責任によって色々変化してくると思います！

最後に

変数名は設計の思想と大きく関係してくると思ってまして、ContainerやPresenterの責任をどう分けるかなど考えることはいくつもあリます。
その中で100%完璧なものは難しいですが、できるだけ今後の負債になりにくく、コードを読んで意図が分かる変数名をつけることはとても大切です。