GUIの状態遷移の命名はイベントを冠したものにしたい
理由
GUIでViewが状態遷移を伴うイベントハンドラを扱う場合は、対象の関数はイベントを表す命名にすると設計の一貫性を得られやすい ↓これじゃなくて
code:.tsx
// hooksの命名をCRUDのような技術的な関心毎を軸にしてしまうとスケールしづらい
// 状態遷移がコンポーネントに委ねられてしまいアクターが増えたときの影響範囲が大きい
const useUpdateForm = () => /*~*/
const useUpdateUrl = () => /*~*/
const Hoge = () => {
const updateForm = useUpdateForm()
const updateUrl = useUpdateHoge()
const onHoge = (event) => {
updateForm(event)
updateUrl(event)
}
return (
/*~*/
<button type="button" onClick={updateHoge}
/*~*/
)
}
↓これ
code:.tsx
// hooksの名前をUIから見た時の関心(イベント)にする
// 命名の工夫だけでUIとロジックは疎結合となる
const useHogeAction() => {
const callback = (event) => {
// zodみたいなやつでバリデーション/変換する
const validated = schema.parse(event)
// アクターへ状態変化を伝える (reducerとか、mutatorとか、updaterとかいろんな呼び方がある)
// この例だと、form, urlがアクター
form.setValue(validated)
url.replace(validated)
}
return callback
}
// コンポーネントはイベントハンドラの割り当てだけでよい
const Hoge = () => {
const onHoge = useHogeAction()
return (
/*~*/
<button type="button" onClick={onHoge}
/*~*/
)
}