知られざるprops命名の慣習 アクション編

2025-08-27 Findy TECH BATON「実践Next.js！AIアウトプットとコンポーネント設計」 最新事情 LT

Transcript

1. 知られざるprops命名の慣習 アクション編 2025-08-27 「実践Next.js！AIアウトプットと コンポーネント設計」 最新事情 LT
2. 発表者紹介 uhyo 株式会社カオナビ フロントエンドエキスパート 実は業務ではNext.jsを扱っていない。 2
3. アクションとは React 19で登場した概念。 RSCのServer Functionsとも関係がある。 （以前Server Actionsと呼ばれてましたね） アクションはコールバック関数であり、 アクションの中で発生したステート更新は トランジションを発生させる。 3
4. アクションの例① formのアクション <form action={(data) => { // この関数がアクション // ↓このステート更新がトランジション扱い setSearchKeyword(data); }}> <p><input …></p> </form> 4
5. アクションの例② useTransition const [isPending, startTransition] = useTransition(); <button disabled={isPending} onClick={() => startTransition(() => { // この関数がアクション // ↓このステート更新がトランジション扱い setState(…); }); }}> Do something fancy </button> 5
6. ボタンをコンポーネント化した const MyButton = ({ onClick }) => { const [isPending, startTransition] = useTransition(); return (<button disabled={isPending} onClick={() => startTransition(() => { onClick(); }); }}> Do something fancy </button>); }; 6
7. ボタンをコンポーネント化した const MyButton = ({ onClick }) => { const [isPending, startTransition] = useTransition(); return (<button disabled={isPending} onClick={() => startTransition(() => { onClick(); }); }}> Do something fancy </button>); }; 7 onClickをアクションの中で 呼び出してくれる （Suspenseとの親和性◎）
8. 本題: propsの命名規則 const MyButton = ({ action }) => { const [isPending, startTransition] = useTransition(); return (<button disabled={isPending} onClick={() => startTransition(() => { action(); }); }}> Do something fancy </button>); }; 8 アクションとして呼び出され るコールバックpropsには、 actionという名前を付ける
9. 本題: propsの命名規則 propsにactionと命名するのはルールではないが、 慣習としてReactの公式ドキュメントに記載がある。 9 https://ja.react.dev/reference/react/useTr ansition#functions-called-in- starttransition-are-called-actions
10. action propsの注意点 const MyButton = ({ clickAction }) => { const [isPending, startTransition] = useTransition(); return (<button disabled={isPending} onClick={() => startTransition(async() => { await clickAction(); }); }}> Do something fancy </button>); }; 10 アクションpropが同期でも非同期 でも対応できるように、 awaitするのがベストプラクティス xxxActionという命名も可 （onXXXみたいなノリで）
11. まとめ React 19では、onClickではなくclickActionという prop命名にすべき場合がある。（単にactionも可） むしろ、汎用コンポーネントにトランジション開始 機能を持たせて、積極的にaction propにしたい。 11