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
react-callを使ってダイヤログをいろんなとこで再利用しよう!
Search
shinaps
September 07, 2025
Technology
2
330
react-callを使ってダイヤログをいろんなとこで再利用しよう!
https://ui-devs.connpass.com/event/364448/
shinaps
September 07, 2025
Tweet
Share
More Decks by shinaps
See All by shinaps
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
520
CloudflareとHonoを使って飲食店のレビューができるLINEアプリを作った
shinaps
3
1.4k
Other Decks in Technology
See All in Technology
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
0
150
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
0
220
難しいセキュリティ用語をわかりやすくしてみた
yuta3110
0
340
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
100
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
5.2k
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
CoRL 2025 Survey
harukiabe
1
230
ビズリーチ求職者検索におけるPLMとLLMの活用 / Search Engineering MEET UP_2-1
visional_engineering_and_design
1
180
ソースを読むプロセスの例
sat
PRO
15
9.6k
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
1
400
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
940
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
How to Ace a Technical Interview
jacobian
280
24k
Producing Creativity
orderedlist
PRO
347
40k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
The Invisible Side of Design
smashingmag
302
51k
Context Engineering - Making Every Token Count
addyosmani
7
270
Become a Pro
speakerdeck
PRO
29
5.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Making Projects Easy
brettharned
120
6.4k
Site-Speed That Sticks
csswizardry
13
910
Transcript
react-callを使ってダイヤログを いろんなとこで再利用しよう! 2025/09/08 Web UI 実装勉強会 #1 @siipdog @shinaps 1
/ 23
react-callとは? window.confirm()のようにコンポーネントを呼び出し、ユーザーの応答を受け取ることができる 2 / 23 shinaps
使い方 コンポーネントの作成 createCallable()という関数を使用して 呼び出し可能なコンポーネントを定義する 3 / 23 shinaps
使い方 コンポーネントの作成 createCallable()という関数を使用して 呼び出し可能なコンポーネントを定義する propsでダイヤログのUIを制御 4 / 23 shinaps
使い方 コンポーネントの作成 今回はユーザーからの入力を使用しないので Responseの方の型は void にしている createCallable()という関数を使用して 呼び出し可能なコンポーネントを定義する export function
createCallable ( UserComponent: UserComponent<Props, Response, RootProps>, unmountingDelay?: number, ): Callable<Props, Response, RootProps> <Props = void, Response = void, RootProps = {}> 5 / 23 shinaps
使い方 コンポーネントの作成 call.end()を実行すると コンポーネント呼び出しが終了する createCallable()という関数を使用して 呼び出し可能なコンポーネントを定義する 6 / 23 shinaps
使い方 コンポーネントの配置 ConfirmDialog.Rootをダイヤログを 埋め込みたい位置に配置 7 / 23 shinaps
使い方 コンポーネントの配置 ConfirmDialog.Rootをダイヤログを 埋め込みたい位置に配置 8 / 23 shinaps
使用例:ダイヤログの再利用 9 / 23 shinaps
使用例:ダイヤログの再利用 10 / 23 shinaps
使用例:ダイヤログの再利用 11 / 23 shinaps
使用例:ダイヤログの再利用 12 / 23 shinaps
使用例:ダイヤログの再利用 13 / 23 shinaps
応用編? リピめしでの活用事例 「リピあり」と「リピなし」の2択で飲食店の 口コミが投稿できるサービスを開発してます 14 / 23 shinaps
応用編?:リピめしでの活用事例 mutationのhookで使用する useMutationを使用しているアプリケーションでは mutationの中からConfirmDialog.callを使用す ることで、ユーザーに確認が必要なアクションに対し てのダイヤログ表示を管理しやすくなります 15 / 23 shinaps
応用編?:リピめしでの活用事例 mutationのhookで使用する useMutationを使用しているアプリケーションでは mutationの中からConfirmDialog.callを使用す ることで、ユーザーに確認が必要なアクションに対し てのダイヤログ表示を管理しやすくなります mutationのhookの中でDialogを呼び出すようにすることで コンポーネント側の実装をシンプルにできる 16 /
23 shinaps
応用編?:リピめしでの活用事例 レビュー用モーダルを表示する 店舗詳細や店舗検索など、いろいろな場所からレビュー作成 を開始できるように、レビュー作成用モーダルをcallable にしています レビュー作成用モーダル 17 / 23 shinaps
応用編?:リピめしでの活用事例 - レビュー用モーダルを表示する 18 / 23 shinaps
応用編?:リピめしでの活用事例 - レビュー用モーダルを表示する 19 / 23 shinaps
レビュー作成用のモーダルを callableとして登録 応用編?:リピめしでの活用事例 - レビュー用モーダルを表示する 20 / 23 shinaps
応用編?:リピめしでの活用事例 - レビュー用モーダルを表示する 21 / 23 shinaps
「レビューを初期化してレビュー用のモーダルを開くボタン」として再利用できる 応用編?:リピめしでの活用事例 - レビュー用モーダルを表示する 22 / 23 shinaps
ありがとうございました 23 / 23