Transcript
00:00:00Reactに、UI要素のレンダリングに関する考え方を
00:00:05根本から変えてしまうような、興味深いツールが登場しました。
00:00:11それが「React Call」です。
00:00:13Reactで複雑なステップ形式のフォームウィザードや確認ダイアログ、
00:00:18アイテムピッカーなどを作ったことがあるなら、開閉状態の管理や成功時のコールバック、
00:00:24Promiseの処理でコードがスパゲッティ化するのは経験済みでしょう。
00:00:28React Callは、まさにその問題を解決します。
00:00:31今回の動画では、React Callがどのような仕組みなのか、
00:00:36コード例を交えて見ていきます。
00:00:37面白い内容ですので、さっそく始めましょう。
00:00:44では、React Callとは一体何なのでしょうか？
00:00:47これは、Reactコンポーネントを非同期関数のように呼び出せる、
00:00:52軽量なユーティリティです。
00:00:53ブラウザ標準のwindow.confirm APIを想像してみてください。
00:00:57呼び出すとコードの実行が一時停止し、ユーザーがOKかキャンセルを押すのを待ってから、
00:01:03真偽値をそのまま返してくれます。
00:01:06ビジネスロジックを呼び出し元に局所化できるのです。
00:01:09React Callは、まさにその直感的なモデルを現代のReactにもたらします。
00:01:16「isModalOpen」のような状態変数を作ったり、onCloseやonSubmitプロパティを渡したり、
00:01:22複雑なContextプロバイダーやPortalを設定したりする代わりに、単にレスポンスを待つだけでいいのです。
00:01:29（awaitを使って）
00:01:30内部的にはPromise管理を抽象化し、型定義も最初からサポートしており、
00:01:36HMR（ホットモジュール置換）にも対応しているため、開発のスピードも維持されます。
00:01:41素晴らしいですね。
00:01:42React Callには「Root and Stack」「Upsert」「Mutation Flow」という3つの概念があります。
00:01:48まず一つ目は「Root and Stack」です。
00:01:50React Callで作るコンポーネントは、通常の関数ではありません。
00:01:54アプリケーションツリーにおいて、それ自体がマウントポイントとして機能します。
00:01:58アプリやレイアウトファイルのルートなど、見える場所にコンポーネントを配置しておくと、
00:02:03リスナーのように待機状態になります。
00:02:06複数の呼び出しをトリガーすると、React Callは内部スタックを使用してそれらを管理し、
00:02:11自動的にレンダリングされます。
00:02:14終了時のアニメーション処理も行われ、各インスタンスは互いに干渉しないよう分離されています。
00:02:20非常にうまく設計されています。
00:02:22次は、シングルトンUIパターンに必須の「Upsert」です。
00:02:27通常、コンポーネントを複数回呼び出すと、スタックに新しいインスタンスが追加されます。
00:02:33しかし、グローバル通知や読み込み中オーバーレイ、プログレスバーのように、
00:02:39画面上に常に一つだけ表示させたいものもありますよね。
00:02:45そんな時は「call」ではなく「upsert」を使います。
00:02:48既にインスタンスがあれば、重複して作成するのではなく、
00:02:52新しいデータで既存のコンポーネントをシームレスに更新します。
00:02:56最後は「Mutation Flow」です。
00:02:58ライブラリには、CallableなUIを非同期アクションに直結させる「useMutationFlow」フックが含まれています。
00:03:04これが非常に便利です。
00:03:06例えば、送信時に重いAPIリクエストを送る確認ダイアログの場合、このフックが
00:03:12自動的に処理中の状態を管理してくれます。
00:03:15非同期処理の間はダイアログを開いたまま読み込みスピナーを表示し、
00:03:21Promiseが解決した時にだけ呼び出しを終了させます。
00:03:25UIの状態とデータの変化を完璧に繋いでくれるのです。
00:03:29では公式サイトの実用的な例を見てみましょう。どれも非常に分かりやすいです。
00:03:34（公式サイトの例）
00:03:36実装に必要なコードがいかに少ないかもよく分かります。
00:03:41例えば確認ダイアログなら、callableを作成し、
00:03:48createCallableフックでコンポーネントをラップするだけです。
00:03:54そしてボタンのクリック時に関数を渡します。
00:04:01Callableオブジェクトに必要なのはこれだけです。
00:04:04ルートにはコンポーネント自体をインポートするだけ。
00:04:08削除ボタンなどでは、createCallableでラップされているため、
00:04:14クリックハンドラ内で非同期に呼び出すことができます。
00:04:21非常にすっきりしており、ボイラープレートも少ないですね。
00:04:26ContextプロバイダーもReduxもZustandも不要です。
00:04:31他のユースケースは、サイト内のExampleセクションを見てみてください。
00:04:36コードスニペットも用意されています。
00:04:40非同期アクションを伴うものなど、かなり複雑な例も紹介されています。
00:04:46（バックグラウンド実行）
00:04:49ぜひチェックしてみてください。
00:04:52本当にクールで軽量です。
00:04:55見事です。
00:04:56というわけで皆さん、
00:04:57これがReact Callの概要です。
00:04:59単純なPromiseラッパーやモーダルなら自作もできますが、
00:05:06このライブラリは、スタック処理やUpsertによるシングルトン管理、
00:05:11重いバックエンド処理との連携など、難しいエッジケースを美しく処理しています。
00:05:17（バックエンド処理）
00:05:18フロントエンドのツールキットに入れておくと、コードがよりきれいで
00:05:24読みやすくなる素晴らしいユーティリティです。
00:05:26皆さんはReact Callをどう思いますか？
00:05:28このパターンは好きですか？
00:05:29自分のプロジェクトで使ってみたいですか？
00:05:31下のコメント欄で教えてください。
00:05:33もしこのような技術解説がお好きなら、
00:05:37動画下の高評価ボタンを押してください。
00:05:39チャンネル登録もお忘れなく。
00:05:42BetterStackのAndrusでした。また次の動画でお会いしましょう。
00:05:58（動画終了）
Community Posts
No posts yet. Be the first to write about this video!
Write about this video