Salesforce Multi-FrameworkによるReactデプロイとApex/LWC実装ポイント

どんな取り組みか

Salesforce Multi-Frameworkは、Reactのような一般的なWebフレームワークを使用してSalesforceプラットフォーム上に直接アプリケーションを構築できる新しい仕組みです。これまでのSalesforce開発では、LWC（Lightning Web Components）やAuraといった専用のフレームワークが必須でしたが、Multi-Frameworkの導入により、Reactのコードをそのままデプロイすることが可能になりました。これにより、Reactの経験を持つ開発者がSalesforce開発に参画しやすくなることが期待されます。

この記事では、Salesforce Multi-Frameworkを用いたReactアプリケーションのデプロイ方法と、それに伴うApexやLWCの実装における変更点やポイントを整理しています。特に、Apexのwith sharingデフォルト化やLWCのState Managerといった、実装に影響を与える可能性のある変更点にも触れ、導入前の確認に役立つ情報を提供します。

使われた技術スタック

• Salesforce Multi-Framework: Reactなどの外部フレームワークをSalesforce上で動作させるための基盤です。
• React: UI構築のためのJavaScriptライブラリです。
• Salesforce CLI: Salesforce開発のためのコマンドラインインターフェースです。特に、sf template generate ui-bundleコマンドがReactアプリケーションのひな形生成に使用されます。
• @salesforce/platform-sdk: SalesforceデータへのアクセスやApexメソッドの呼び出しを担うパッケージです。GraphQLクエリを通じてレコードを取得する際に利用されます。
• GraphQL: APIのためのクエリ言語です。@salesforce/platform-sdkを通じてSalesforceデータの取得に用いられます。
• LWC (Lightning Web Components): 既存のSalesforceコンポーネントフレームワークです。Multi-Frameworkと並行して動作し、ReactコンポーネントをLightningページに埋め込むマイクロフロントエンドの仕組みも開発者向けプレビューとして進められています。
• Apex: Salesforceのサーバーサイドプログラミング言語です。with sharingのデフォルト化など、セキュリティモデルに関する変更点が言及されています。
• Vite: Reactテンプレートのビルドツールとして利用されます。

実装のポイント

Salesforce Multi-Frameworkを用いたReactアプリケーションの実装には、いくつかの重要なポイントがあります。

ひな形の生成と初期設定

アプリケーションのひな形は、Salesforce CLIのsf template generate ui-bundleコマンドを使用して生成します。具体的には、sf template generate ui-bundle --name MyReactApp --template reactbasic --output-dir force-app/main/default/uiBundlesのようなコマンドを実行し、React用のVite設定一式を含むプロジェクトを作成します。生成後、プロジェクトディレクトリに移動し、npm installで依存関係をインストールします。

プロジェクト構造の理解

生成されたテンプレートのプロジェクト構造を理解することが重要です。特に、package.jsonファイルで@salesforce/platform-sdkがデータ取得を担当していることを確認します。また、srcディレクトリ内の構成として、src/app.tsxがアプリケーションのエントリーポイント、src/routes.tsxがURLとページの対応表、src/pages/Home.tsxがトップページの内容、src/components/が自作コンポーネントの置き場所となっています。画面の内容を編集する際は、エントリーポイントではなくsrc/pages配下のページを直接編集するのが正しいアプローチです。

Salesforceデータとの連携

Salesforceデータの取得には、@salesforce/platform-sdkパッケージを使用します。createDataSDK()はPromiseを返す非同期関数であるため、awaitキーワードが必要です。データ取得はsdk.graphql.queryメソッドを通じてGraphQLクエリを実行する形で行われます。記事では、Case（取引先ケース）の一覧を表示するコンポーネントの例が示されており、GraphQLクエリでId、Subject、Status、Priorityといったフィールドを取得しています。

Summer ’26で導入された変更点への対応

Salesforceの更新に伴い、Apexのwith sharingデフォルト化やLWCのState Managerなど、実装に影響を与える変更点が導入されています。これらの変更点を考慮した上で、セキュリティモデルやコンポーネント間の状態管理を適切に設計する必要があります。

ベータ機能としての制約

現時点ではオープンベータ機能であり、スクラッチ組織とサンドボックスでのみ利用可能です。本番環境へのデプロイはまだサポートされていません。この制約を理解した上で、開発を進める必要があります。

得られた成果や学び

Salesforce Multi-Frameworkの導入により、React開発者はSalesforceプラットフォーム上で直接アプリケーションを構築できるようになりました。これにより、既存のReactスキルを活かしてSalesforce開発に参画する道が開かれ、開発の選択肢が大きく広がったと言えます。

具体的な実装を通じて、sf template generate ui-bundleコマンドによるひな形生成から、@salesforce/platform-sdkを用いたSalesforceデータ連携、そして生成されたプロジェクトのファイル構造の理解が重要であることが確認されました。特に、ブログの紹介コードと実際のテンプレート内容に差異がある場合があるため、生成されたファイルの中身を自身の目で確認することの重要性が強調されています。

また、Apexのwith sharingデフォルト化やLWCのState Managerといったプラットフォームの変更点に対応しながら、効率的かつセキュアなアプリケーションを構築するための知見が得られました。ベータ機能であることの制約を認識しつつ、今後の機能拡張に期待が寄せられます。

まとめ

Salesforce Multi-Frameworkは、ReactのようなモダンなWebフレームワークをSalesforce上で直接利用可能にする画期的な仕組みです。これにより、Salesforce開発の敷居が下がり、より多くの開発者がプラットフォームに参加する機会が生まれます。実装においては、CLIコマンドによるひな形生成、プロジェクト構造の理解、@salesforce/platform-sdkを通じたデータ連携が主要なポイントとなります。また、プラットフォームのアップデートに伴うApexやLWCの変更点、およびベータ機能としての制約を把握しておくことが、スムーズな開発には不可欠です。この新しいアプローチは、Salesforce開発の未来を大きく変える可能性を秘めています。

出典: https://qiita.com/ubakichi_sr_mc_ai_06/items/3733586759b0e80f862a