react-callを使ってダイヤログをいろんなとこで再利用しよう！

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

応用編？リピめしでの活用事例「リピあり」と「リピなし」の２択で飲食店の口コミが投稿できるサービスを開発してます 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

レビュー作成用のモーダルを callableとして登録応用編？：リピめしでの活用事例 - レビュー用モーダルを表示する 20 / 23 shinaps

「レビューを初期化してレビュー用のモーダルを開くボタン」として再利用できる応用編？：リピめしでの活用事例 - レビュー用モーダルを表示する 22 / 23 shinaps

ありがとうございました 23 / 23

react-callを使ってダイヤログをいろんなとこで再利用しよう！

react-callを使ってダイヤログをいろんなとこで再利用しよう！

shinaps

More Decks by shinaps

Other Decks in Technology

Featured

Transcript