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
620
RSCの時代にReactとフレームワークの境界を探る
uhyo
12
3.9k
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
「技術負債にならない・間違えない」 権限管理の設計と実装
naro143
35
11k
Pythonによる契約プログラミング入門 / PyCon JP 2025
7pairs
5
2.5k
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
6
2k
いまさら聞けない ABテスト入門
skmr2348
1
190
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
po3rin
2
240
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
400
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
0
230
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
3.1k
How to achieve interoperable digital identity across Asian countries
fujie
0
110
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
140
SOC2取得の全体像
shonansurvivors
1
360
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
470
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
331
21k
For a Future-Friendly Web
brad_frost
180
9.9k
Embracing the Ebb and Flow
colly
88
4.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
A Modern Web Designer's Workflow
chriscoyier
697
190k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Navigating Team Friction
lara
189
15k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Rails Girls Zürich Keynote
gr2m
95
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
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