Salesforce マルチフレームワークについて知る
学習の目的
この単元を完了すると、次のことができるようになります。
- Salesforce マルチフレームワークとは何か、どのような問題を解決できるかを説明する。
- React アプリケーションが Salesforce 組織に UI バンドルとしてどのようにリリースされるかを説明する。
- データ SDK によって React アプリケーションが Salesforce データにどのように関連付けられるかを説明する。
- マルチフレームワークによって作成できるものをいくつか挙げる。
Salesforce マルチフレームワークについて知る
React を使用して Salesforce アプリケーションを作成できれば、と願ったことはありませんか? Salesforce マルチフレームワークによって、それが可能になりました。従業員ツール、カスタマーポータル、ダッシュボード、ウィザードといったリッチでインタラクティブな React アプリケーションを作成し、それを直接 Salesforce 組織にリリースできます。ほかのすべての Salesforce アプリケーションと同じように、ユーザーはデスクトップのアプリケーションランチャーまたは Salesforce モバイルアプリケーションからアクセスできます。
マルチフレームワークでは、React の完全なエコシステムを利用できます。つまり、お気に入りのコンポーネントライブラリ、スタイル設定フレームワーク、ルーティングソリューション、npm パッケージをすべて、Agentforce 360 Platform 上で実行できます。認証、データアクセス、リリースインフラストラクチャは Salesforce によって処理されるため、 お客様は優れたエクスペリエンスを作成することに集中できます。
マルチフレームワークは現在 React をサポートしており、今後さらにフレームワークが追加されます。この機能はベータであり、スクラッチ組織と Sandbox で使用できます。
UI バンドル
では、React アプリケーションはどのようなしくみで Salesforce 組織内で実行されるのでしょうか? そこで使用されるのが UI バンドルです。これは、最新のフレームワークアプリケーション向けの専用のメタデータ型です。
この React アプリケーションは、ほかの React アプリケーションと同じように Vite と TypeScript を使用してローカルで開発します。準備ができたら、ビルドして、Salesforce CLI を使用して組織にリリースします。UI バンドルは、Apex クラス、カスタムオブジェクト、権限セットと同じように標準 Salesforce DX プロジェクト構造内に含まれます。つまり、使い慣れたバージョン管理、CI/CD、チームコラボレーションはすべてこれまでと同じように機能します。
リリースフローはシンプルです。
- React アプリケーションをローカルでビルドします。
- UI バンドルとしてパッケージ化します。
- Salesforce 上でアプリケーションをホストします。
外部ホスティング、iframe 組み込み、別個の認証フローは必要ありません。ビルドアーティファクトとメタデータを Salesforce にリリースすれば、そのまま機能します。リリース後は、Salesforce のアプリケーションランチャーからアプリケーションにアクセスできます。
データ SDK
特筆すべき点は、React が Salesforce データとやり取りを行う方法です。データ SDK を利用することで、コンポーネントには Salesforce データにアクセスするための統合インターフェースが備わります。これを使用して、UI API に対して GraphQL クエリや変異を実行したり、Apex REST エンドポイントをコールしたり、Connect API を使用したりでき、手動で認証を管理する必要はありません。
データ SDK の特長はランタイムを認識できるということです。作成するアプリケーションがアプリケーションランチャーからアクセスする内部従業員ツールであっても、Experience Cloud サイト上の顧客向けポータルであっても、記述するデータアクセスコードは同じです。SDK によってランタイムコンテキストが検出され、それに応じた処理が行われます。
Lightning Web コンポーネントで @wire(getRecord) を使用したことがあれば、お馴染みの考え方です。つまり、同じ基盤 UI API データレイヤーに照会しているということです。違いは、反応型のワイヤーアダプターを使用するのではなく、useEffect や useState といった標準 React パターンによって、データ SDK を使用して命令的にレコードを操作する点です。
作成できるもの
マルチフレームワークでは React とその広大なオープンソースエコシステムを使用して、完全にカスタムなアプリケーションを作成できます。プロジェクトに合わせてコンポーネントライブラリ、スタイル設定フレームワーク、ルーティングソリューションを選択します。認証、データアクセス、リリースインフラストラクチャといった煩雑な部分は Salesforce によって処理されます。
-
従業員向けアプリケーション: オープンソースパッケージを使用して、標準 Lightning ページでは作成できないような複雑な複数ステップのワークフロー、リッチデータの視覚化、高度にインタラクティブなインターフェースなどを含む内部ツールを作成します。
-
カスタマーポータル: 完全に自由なデザインで、ブランド設定された顧客向けエクスペリエンスを作成します。ブランドに合わせて任意の React UI ライブラリを使用し、認証とデータの処理は Salesforce に任せることができます。
マルチフレームワークをさらに活用する
そのほかにマルチフレームワークアプリケーションでは次のような機能を使用できます。
- GraphQL クエリと変異を使用して組織データを参照および更新する。
- fetch を使用してコンポーネントから Apex REST エンドポイントや Connect API をコールする。
-
SLDS、Tailwind CSS、shadcn/ui、または任意の CSS アプローチを使用してスタイルを設定する。
- アプリケーションに Agentforce 会話クライアントを追加する。
これで、マルチフレームワークで何ができるかを理解できました。次は、以下のリソースを参照して、Salesforce ではじめての React アプリケーションの作成を開始しましょう。