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.4k
意外と難しい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
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
200
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
serverless team topology
_kensh
3
190
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
tenforward
1
120
RDS の負荷が高い場合に AWS で取りうる具体策 N 連発/a-series-of-specific-countermeasures-available-on-aws-when-rds-is-under-high-load
emiki
7
4.6k
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
5.4k
旅で応援する✈️ NEWTが目指すコミュニティ支援とあたらしい旅行 / New Travel: Supporting by NEWT on Your Journey
mii3king
0
150
Kubernetes self-healing of your workload
hwchiu
0
410
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
13
9.4k
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
120
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
1
280
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
710
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
526
40k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Unsuck your backbone
ammeep
671
58k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Navigating Team Friction
lara
190
15k
RailsConf 2023
tenderlove
30
1.3k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Automating Front-end Workflow
addyosmani
1371
200k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
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