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.1k
知られざる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
意外と難しいGraphQLのスカラー型
uhyo
5
560
RSCの時代にReactとフレームワークの境界を探る
uhyo
12
3.8k
libsyncrpcってなに?
uhyo
0
690
Next.jsと状態管理のプラクティス
uhyo
7
13k
10ヶ月かけてstyled-components v4からv5にアップデートした話
uhyo
5
650
更新系と状態
uhyo
9
3.8k
React 19アップデートのために必要なこと
uhyo
8
2.7k
color-scheme: light dark; を完全に理解する
uhyo
8
730
React 19 + Jotaiを試して気づいた注意点
uhyo
9
3.6k
Other Decks in Technology
See All in Technology
履歴 on Rails: Bitemporal Data Modelで実現する履歴管理/history-on-rails-with-bitemporal-data-model
hypermkt
0
2k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
390
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.7k
Pythonによる契約プログラミング入門 / PyCon JP 2025
7pairs
5
2.4k
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
880
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
240
Green Tea Garbage Collector の今
zchee
PRO
2
380
pprof vs runtime/trace (FlightRecorder)
task4233
0
150
実装で解き明かす並行処理の歴史
zozotech
PRO
1
280
Trust as Infrastructure
bcantrill
0
290
VCC 2025 Write-up
bata_24
0
150
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing for humans not robots
tammielis
254
25k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Visualization
eitanlees
148
16k
Practical Orchestrator
shlominoach
190
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Git: the NoSQL Database
bkeepers
PRO
431
66k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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