sf-multiframework

Salesforce Multi-Framework

Salesforce が UIBundle メタデータとしてホストする、自己完結型のフロントエンドアプリを構築します。React と Angular にはドキュメント化されたテンプレートがあります。ユーザーが選択したフレームワークとオーサリングツールを維持してください。再利用可能なプラットフォームコンポーネントには、引き続き LWC がネイティブな選択肢です。

このスキルは2026 年 10 月 8 日にレビューされました。最新の一次リンク、調査結果、スコープ別のリリース状況については、official-sources.md を参照してください。詳細が異なる場合は、対象の組織、インストール済み CLI のヘルプ、パッケージロックファイル、パッケージ宣言を確認してください。過去のデモの修正内容やレシピの慣例は、ローカルのガイダンスとして扱ってください。

関連するリファレンスを選ぶ

タスクに必要なものだけを読んでください。任意のアプリパターンは必須ではありません。

タスク	読むもの
初めてのアプリ、組織の利用資格、ドメインの設定	overview.md、setup.md、activation-checklist.md
メタデータのスキャフォールドまたは修復	templates.md、project-structure.md、cli-guide.md
Angular の実装	angular.md
レコードのクエリ、ミューテーション、REST、スキーマ／コード生成	data-sdk.md、graphql-workflow.md、error-handling.md
カスタムラベル、SDK の拡張、ロケールに応じたフォーマット、アプリの識別情報、ホスト UI	platform-capabilities.md
Agentforce Employee Agent のチャット	acc-integration.md
Lightning または Experience ページへのアプリの埋め込み	microfrontends.md
外部サイト、ゲストユーザーと認証済みユーザー	templates.md、experience-cloud-runbook.md、permissions-csp.md
テスト、デプロイ、App Manager、アクセス	testing.md、ci-deploy.md、permissions-csp.md
マネージド／アンロック 2GP の配布	packaging.md
既存の Beta アプリ	beta-to-ga-migration.md
フレームワークの選択、失敗の診断	lwc-vs-react.md、troubleshooting.md
スタイリングまたは React のナビゲーション	styling.md、react-router.md
オーサリングツールのセットアップ	authoring-surface.md
教育用レシピ	recipe-conventions.md
ワークスペースシェルまたはカスタム LLM インターフェースのリクエスト	layout-patterns.md、llm-ui-patterns.md
採点付き監査のリクエスト	scoring-rubric.md — ローカルのルーブリックであり、Salesforce の認定ではありません

重要な判断事項

質問する前に、ワークスペースからフレームワーク、対象ユーザー、組織エイリアス、既存のプロジェクト構成、リクエストされた機能を推測してください。内部向けの CustomApplication アプリと外部向けの Experience アプリコンテナを区別し、さらにその両方と iframe による埋め込みも区別してください。新しいアプリがあるからといって、組織全体の設定を変更したり公開したりする権限があるとは限りません。

利用資格があるのは、Alibaba Cloud と Government Cloud を除く Hyperforce 上の Enterprise、Performance、Unlimited、Developer、または Partner Developer エディションです。内部ホスティングには Salesforce アプリドメインと Salesforce Edge Network が必要です。「sandbox」または「production」というラベルだけで利用資格を推測しないでください。

プラットフォームの不変条件

• npm コマンドは DX プロジェクトのルートではなく、バンドルディレクトリで実行してください。生成されたフレームワークスクリプトに従い、Salesforce のビルド／プロキシ統合を維持してください。
• バンドルの XML では isActive と整数のスキーマ version（通常は 1）を使用します。内部アプリには、c__myApp のような修飾済みの uiBundle 参照を持つ CustomApplication が必要です。外部アプリには、4 種類すべてのサイトメタデータが必要です。
• ui-bundle.json.outputDir にはビルド済みアセットを格納する必要があります。SPA では routing.fallback: "index.html" を使用してください。任意の apiVersion は、DX の sourceApiVersion: "XX.X" とは異なる、仕様で定義された vXX.X 形式の文字列です。
• Salesforce リクエストには @salesforce/platform-sdk/data を使用してください。読み取りには sdk.graphql?.query({ query, variables })、書き込みには sdk.graphql?.mutate({ mutation, variables }) を優先してください。サポートされている REST API には sdk.fetch?.() を使用してください。Salesforce に対して、生の fetch や axios を代わりに使用してはいけません。
• SDK の機能や result.data がない場合に備えてガードしてください。サーフェスが利用できない場合やリクエストが失敗した場合と、クエリが成功して行が 0 件だった場合を区別してください。組織のスキーマ／生成型を使用してください。Name { value } のようなフィールドエンベロープと、Id のようなスカラーが共存します。
• クエリは subscribe() と refresh() を提供します。サブスクリプションはクリーンアップしてください。これらはキャッシュ／更新の通知であり、サーバープッシュのサブスクリプションではありません。ミューテーションはクエリキャッシュを更新しないため、書き込み後は該当するクエリを更新してください。
• キャッシュストアは ベース URL と API バージョンごとに分割されます。クエリキーには ヘッダーも含まれます。キャッシュが空の状態で only-if-cached リクエストを行うと、例外がスローされるのではなく、errors[].extensions.code === "CACHE_MISS" が返されます。
• HTTP コールバックは webapp.onStatus の下に、ステータスコードをキーとして定義してください。通常のサーフェス検出を許可し、小文字の "webapp" によるオーバーライドを独自に追加してはいけません。
• アプリの表示権限、API Enabled、オブジェクト／項目へのアクセス権、レコード共有はそれぞれ別の権限です。アクセス権セットをデプロイしても割り当ては行われません。UI API のセキュリティは、独自の Apex REST ロジックを自動的に保護するものではありません。
• アプリ内では標準の npm／フレームワーク API を使用してください。@salesforce/apex/*、@salesforce/schema/*、lightning/*、@wire などの LWC 仮想インポートは使用できません。サポートされているプラットフォーム SDK の /view、/i18n、/data/extensions エントリーポイントは有効です。すべての @salesforce/* パッケージを禁止してはいけません。
• ACC で検証済みのパッケージエクスポートは embedAgentforceClient で、ネストされた agentforceClientConfig を持ちます。古い createAccWidget の例をコピーする前に、宣言を確認してください。External Service Agent のチャットには Enhanced Chat v2 を使用します。
• メタデータをデプロイする前にビルドしてください。関連メタデータを含め、想定するユーザーとしてデプロイ済みアプリを確認してください。バンドルの上限は 最大 2,500 ファイルです。管理対象 AppExchange の審査で必要な場合は、ソースマップを保持してください。

一般的な作成手順

新しい完全なアプリを作成する場合は、sf template generate project で reactinternalapp、reactexternalapp、angularinternalapp、または angularexternalapp を選択します。既存の DX プロジェクトにバンドルを追加する場合は、sf template generate ui-bundle で reactbasic または angularbasic を選択し、対応するメタデータは別途用意します。完全なプロジェクト用テンプレートをレガシーのバンドル用テンプレートとして扱わず、インストール済みコマンドのヘルプを確認してください。

バンドル内に依存関係をインストールします。必要に応じて認証済み組織の GraphQL スキーマを取得し、プロジェクトのスクリプトでオペレーションの型を生成して、フレームワークの開発サーバーを実行します。ローカル開発や Live Preview だけでは、デプロイ後の権限、セッション、CSP、ディープルートが機能することは確認できません。

既存の lint／ビルドと関連するテストを実行します。ユーザーの CLI または利用可能な Salesforce DX MCP ツールを使い、依頼された範囲内でデプロイします。ハードコードしたツール識別子ではなく、実際に公開されている MCP スキーマを使用してください。App Launcher または Experience サイトから起動し、許可されたアクセス許可を割り当て、レコード、書き込み結果、ルートの更新を確認します。どのチェックをローカルで行い、どれをデプロイ済みの組織で行ったかを記録してください。

assets/README.md では、適応可能なメタデータと React の例を紹介しています。完全な React または Angular プロジェクトには、公式テンプレートを使用してください。オプションのレイアウト、チャット、スコアリングのリソースは、追加作業を許可するものではありません。