Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
知られざるprops命名の慣習 アクション編
Search
uhyo
August 27, 2025
Technology
12
3.2k
知られざるprops命名の慣習 アクション編
2025-08-27 Findy TECH BATON「実践Next.js!AIアウトプットとコンポーネント設計」 最新事情 LT
uhyo
August 27, 2025
Tweet
Share
More Decks by uhyo
See All by uhyo
AI時代、“平均値”ではいられない
uhyo
8
2.6k
意外と難しいGraphQLのスカラー型
uhyo
5
810
RSCの時代にReactとフレームワークの境界を探る
uhyo
13
4.2k
libsyncrpcってなに?
uhyo
0
700
Next.jsと状態管理のプラクティス
uhyo
7
15k
10ヶ月かけてstyled-components v4からv5にアップデートした話
uhyo
5
660
更新系と状態
uhyo
9
3.8k
React 19アップデートのために必要なこと
uhyo
8
2.8k
color-scheme: light dark; を完全に理解する
uhyo
8
740
Other Decks in Technology
See All in Technology
Dify on AWS 環境構築手順
yosse95ai
0
130
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
470
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
140
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
130
What's new in OpenShift 4.20
redhatlivestreaming
0
240
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
10xinc
0
110
パフォーマンスチューニングのために普段からできること/Performance Tuning: Daily Practices
fujiwara3
2
120
オブザーバビリティが育むシステム理解と好奇心
maruloop
2
1.1k
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
shuta13
3
200
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
180
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
880
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
3
3.4k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
Writing Fast Ruby
sferik
630
62k
It's Worth the Effort
3n
187
28k
We Have a Design System, Now What?
morganepeng
53
7.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
How STYLIGHT went responsive
nonsquared
100
5.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Practical Orchestrator
shlominoach
190
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Balancing Empowerment & Direction
lara
5
700
Transcript
知られざるprops命名の慣習 アクション編 2025-08-27 「実践Next.js!AIアウトプットと コンポーネント設計」 最新事情 LT
発表者紹介 uhyo 株式会社カオナビ フロントエンドエキスパート 実は業務ではNext.jsを扱っていない。 2
アクションとは React 19で登場した概念。 RSCのServer Functionsとも関係がある。 (以前Server Actionsと呼ばれてましたね) アクションはコールバック関数であり、 アクションの中で発生したステート更新は トランジションを発生させる。
3
アクションの例① formのアクション <form action={(data) => { // この関数がアクション // ↓このステート更新がトランジション扱い
setSearchKeyword(data); }}> <p><input …></p> </form> 4
アクションの例② useTransition const [isPending, startTransition] = useTransition(); <button disabled={isPending} onClick={()
=> startTransition(() => { // この関数がアクション // ↓このステート更新がトランジション扱い setState(…); }); }}> Do something fancy </button> 5
ボタンをコンポーネント化した const MyButton = ({ onClick }) => { const
[isPending, startTransition] = useTransition(); return (<button disabled={isPending} onClick={() => startTransition(() => { onClick(); }); }}> Do something fancy </button>); }; 6
ボタンをコンポーネント化した const MyButton = ({ onClick }) => { const
[isPending, startTransition] = useTransition(); return (<button disabled={isPending} onClick={() => startTransition(() => { onClick(); }); }}> Do something fancy </button>); }; 7 onClickをアクションの中で 呼び出してくれる (Suspenseとの親和性◎)
本題: propsの命名規則 const MyButton = ({ action }) => {
const [isPending, startTransition] = useTransition(); return (<button disabled={isPending} onClick={() => startTransition(() => { action(); }); }}> Do something fancy </button>); }; 8 アクションとして呼び出され るコールバックpropsには、 actionという名前を付ける
本題: propsの命名規則 propsにactionと命名するのはルールではないが、 慣習としてReactの公式ドキュメントに記載がある。 9 https://ja.react.dev/reference/react/useTr ansition#functions-called-in- starttransition-are-called-actions
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みたいなノリで)
まとめ React 19では、onClickではなくclickActionという prop命名にすべき場合がある。(単にactionも可) むしろ、汎用コンポーネントにトランジション開始 機能を持たせて、積極的にaction propにしたい。 11