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