みなさん、こんにちは！ TDX 2026 では新機能「Salesforce Multi-Framework」が発表され、Salesforce の UI を React を使って開発することができるようになりました。
注意: 2026年4月時点ではまだ Beta 版です。
この記事では、Developer Edition で作成したスクラッチ組織を使い、内部ユーザーが利用する想定のシンプルなアプリを作成する手順を紹介します。スクラッチ組織の作成方法については、かこのブログ記事「Developer Edition + スクラッチ組織で、複数の開発・検証組織を手にいれる」をご参照ください。ログインして表示言語を日本語化した状態から進めていきます。
事前準備
まずは VS Code で新規に「Standard」で作成したプロジェクトを用意します。
React External App や React Internal App もあるのですが、結構作り込まれたテンプレートが展開されます。構造を理解することがやや大変なので、今回はシンプルなテンプレートからの作成を紹介します。
このあと、スクラッチ組織を作成、もしくは既存のスクラッチ組織に接続します。組織にログインして機能有効化を行ってください。
- 設定 > アプリケーション > Salesforce Multi-Framework を使用した React 開発 (ベータ)
- 「Enable Beta」ボタンを押す
この機能はオフにできませんので、必ず Developer Edition や Sandbox などで試すようにしてください。
このあとはローカルの VS Code での操作を進めます。Standard で作成したプロジェクトで、スクラッチ組織に接続した状態にしておきます。
ステップ1: テンプレートを展開
まずターミナルを開き、次のコマンドを実行します。
force-app/main/default/myreactapp ディレクトリに必要なファイルが展開されます。
このディレクトリに移動して、install と run dev を実行します。
ブラウザを開いて、表示された URL にアクセスしてみます。次のように表示されたら成功です。
ターミナルで Ctrl + C でローカルのサーバーを止めておきます。
ステップ2: ビルドとデプロイ
2026年4月25日時点ですが、graphqlClient.ts でエラーを検出しています。当該ファイルの13行目を次のように修正します。
それではビルドを行います。同じフォルダで次のコマンドを実行します。
エラーが出なければ成功です。
それでは組織にデプロイしてみましょう。次のコマンドを実行します。(スクラッチ組織の場合のコマンドです)
Status が Succeeded で完了すれば成功です。
ステップ3: 動作確認
それでは組織にデプロイされた React アプリを見てみましょう。
- アプリケーションランチャー > Myreactapp
先ほどのローカルテストと同じように表示されれば成功です。
ステップ4: 取引先のデータを表示できるように修正
pages ディレクトリの下に「Accounts.tsx」ファイルを作成します。(Agentforce Vibes に作ってもらいましたので、切り詰めればもっとシンプルにできるかもしれません。)
routes.tsx ファイルを次の内容に置き換えます。
ステップ5: 再ビルドとデプロイ
ファイルの修正が完了したら、再度ビルドを行い組織にデプロイします。
Status が Succeeded で完了すれば成功です。
ステップ6: 動作確認
スクラッチ組織の場合、取引先にはデータが何もないのでいくつか作成しておきます。
再度 Myreactapp を表示します。画面右上のメニューアイコンを押すと「取引先」選択肢が出現し、選択すると取引先の一覧が表示されれば成功です。
おわりに
今までは Lightnign Experience & Lightning Web Components と Visualforce に頼っていた Web ブラウザへの UI 提供ですが、React にも対応したことで、そのデータの表現力が格段に向上しました。いわゆる社内向けの UI はもちろん、Experience Cloud での社外向けサイトでの利用も可能です。正式リリースまで今しばらくお待ちください。
今回はすべて手動での作業手順でご紹介しましたが、もちろんバイブコーディングで開発を進めていくこともできます。Agentforce Vibes はもちろん、その他のコーディング支援ツールでも利用できるようにスキルを公開していたりしますので、ぜひご活用ください。
SFDX プロジェクトの新規作成を行う際に、React Internal App を選ぶとより作り込まれたテンプレートが展開されます。Agentforce で作成したエージェントとのチャットも行える UI も組み込まれています。こちらもぜひ試してみてください。
