experience-ui-bundle-project-generate について
Salesforce 開発者向けのワークフロースキルです。Salesforce CLI のスターターテンプレートからデプロイ可能な UI bundle を生成し、フレームワーク選択から依存関係のインストールまで案内します。
主な機能
- 01対応フレームワークとスターターの選択
- 02指定ルートへのプロジェクト生成
- 03生成されたプロジェクト階層の整理
- 04ルートとバンドルの依存関係をインストール
- 05引き渡し前のインストール確認
活用シーン
- 01スターターから Salesforce UI bundle を開始
- 02開発開始前の依存関係セットアップ
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ forcedotcom/ sf-skills --skill experience-ui-bundle-project-generateインストール後、Claude Code で/experience-ui-bundle-project-generateを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/angular-project-generate.mdreact-project-generate.mdscripts/flatten-project.mjsgenerate-project.mjsinstall-deps.mjs詳細
UI バンドルテンプレートの使用
Salesforce UI バンドルアプリをゼロから構築する前に、ユーザーにビルド済みのスターターテンプレートを提示してください。Salesforce CLI は、完全なデプロイ可能な SFDX プロジェクト(UI バンドル + ツールチェーン + npm run setup による自動化)を、1 つのコマンドで生成します。スターターから始めるほうが、手作業で足場を組むよりも速く、エラーも少なくなります。
CLI コマンドは sf template generate project です。
ステップ 1:選択肢を提示する
フレームワークを特定します。 通常は呼び出し元のコンテキストですでに決まっています。このスキルを呼び出したルート/コーディネータースキルから渡されるか、ユーザーのリクエストに記載されています。その情報を使用してください。
このスキルがサポートするフレームワークは、<SKILL_DIR>/references/ 内にある <framework>-project-generate.md という名前のリファレンスファイルに記載されたものに限られます(たとえば react → <SKILL_DIR>/references/react-project-generate.md)。これが唯一の信頼できる情報源です。フレームワークを追加するには、リファレンスファイルを追加するだけで済み、このドキュメントを変更する必要はありません。
- フレームワークが判明している場合 —
<SKILL_DIR>/references/<framework>-project-generate.mdを開きます。 - フレームワークが不明な場合(どのフレームワークか指示されていない単独実行の場合) —
<SKILL_DIR>/references/の一覧を取得し、各ファイル名から-project-generate.mdのサフィックスを取り除いて、サポート対象を特定し、その中から選ぶようユーザーに尋ねます。ユーザーが、対応するリファレンスファイルのないフレームワークを指定した場合、このスキルではサポートされていません。experience-ui-bundle-app-coordinateに引き継ぎ、ゼロから足場を構築します。
各リファレンスには、そのフレームワークの --template フラグと、各スターターに含まれる内容が記載されています。ユーザーの対象(社内向けか社外向けか)に合ったものを選んでください。
ユーザーがゼロから始めることを希望する場合(または適切なテンプレートがない場合)は、ここで終了し、experience-ui-bundle-app-coordinate に新しいプロジェクトの足場を構築させます。このスキルは任意で使用するものです。テンプレートの使用を強制しないでください。
ユーザーが選択したら、その --template フラグをステップ 2 に引き継ぎます。
ステップ 2:プロジェクトをターゲットルートに生成する
プロジェクトの内容は ターゲットルート $DEST に直接配置する必要があります。つまり、sfdx-project.json は $DEST/sfdx-project.json に置かれ、ラッパー用のサブフォルダーは挟みません。sf template generate project は出力を常に --name のサブフォルダー内に生成するため、<SKILL_DIR>/scripts/generate-project.mjs は $DEST に生成し、サブフォルダーの内容を $DEST に移動してまとめ(競合時は既存の内容を上書き)、空になったサブフォルダーを削除します。これらの処理はすべて Node の fs/child_process API を使うため、macOS/Linux/Git Bash と同様に Windows の cmd/PowerShell でも実行できます。
<SKILL_DIR>= このスキル自体のディレクトリへの絶対パス、つまりこのSKILL.mdを含むフォルダーです。コンテキスト内のスキルパスから解決してください。$NAME— プロジェクト名です(英数字のみ。スペース、ハイフン、アンダースコア、特殊文字は使用できません)。ユーザーに確認してください。UI バンドルの名前にも使われるため、プロジェクト内にも表示されます。$DEST— 内容を配置するターゲットルートディレクトリです(現在のディレクトリを使う場合は.を指定してください)。$TEMPLATE— ステップ 1 で選んだフレームワークリファレンスにある--templateフラグの値です(例:reactinternalapp)。
$NAME、$DEST、$TEMPLATE を実際の値に置き換えて、スクリプトを実行してください。シェル変数の代入/展開(NAME=.../$NAME/%NAME%/$env:NAME)は使わないでください。これらの構文は bash、cmd、PowerShell で異なるため、このコマンドは3つすべてで動作する必要があります。
node "<SKILL_DIR>/scripts/generate-project.mjs" "<name>" "<dest>" "<template>"
スクリプトは成功すると OK: project root landed at <dest> (...) と出力し、終了コード 0 で終了します。sf template generate project が失敗した場合、生成されたプロジェクトに sfdx-project.json がない場合、または移動後に有効なプロジェクトルートになっていない場合は、明確なエラーメッセージを stderr に出力して0以外の終了コードで終了します。処理を続けず、失敗を伝えてください。
sfdx-project.json は $DEST/sfdx-project.json に置かれている必要があります。また、プロジェクトには package.json、force-app/main/default/uiBundles/$NAME/(UI バンドル)、scripts/、config/、README.md も含まれます。バンドルの具体的な内容については、ステップ 1 のフレームワークリファレンスを参照してください。
ステップ 3:依存関係をインストールする(あなたが実行すること — インストールせずに引き渡さないでください)
生成されたプロジェクトに node_modules が 含まれていない 場合、プロジェクトを引き渡す前に自分で依存関係をインストールしてください。新しいテンプレートは、依存関係がそろうまで実行できず(プレビュー/ビルド/lint がすべて失敗します)、ユーザーにはすぐ開発を始められるプロジェクトを渡す必要があります。
package.json は複数あり、それぞれでインストールが必要です。
- プロジェクトルート(
$DEST/package.json) - UI バンドルのディレクトリ(
$DEST/force-app/main/default/uiBundles/$NAME/) — プレビューサーバーが読み込むツールチェーンが含まれているため、ここにもnode_modulesが必要です。
<SKILL_DIR>/scripts/install-deps.mjs は、ルートと package.json があるすべての UI バンドルに対して npm install を実行します(Node の child_process を使い、cwd を明示します。cd && によるシェルコマンドの連結は使いません)。その後、インストールしたすべての場所に node_modules が作成されたことを確認します。
node "<SKILL_DIR>/scripts/install-deps.mjs" "<dest>"
<dest> はステップ 2 の $DEST の実際の値に置き換えてください。スクリプトは成功すると OK: all dependencies installed. と出力し、終了コード 0 で終了します。失敗した場合は、どのインストールが失敗したかを一覧にした概要を表示し、0以外の終了コードで終了します。バンドルの初回インストールは時間のかかる処理なので、少し待つことを想定してください。インストールに失敗した場合は、その旨を伝えてください。依存関係のインストールが不完全なプロジェクトを引き渡さないでください。
ステップ 4:確認して引き継ぐ
install-deps.mjs は、ステップ 3 の一環として、ルートと各 UI バンドルの node_modules の検証サマリーをすでに出力しています。生成されたプロジェクトを自分で確認する場合は、シェルの ls ではなく、お使いのファイル一覧表示/読み取りツールを使用してください。基盤となる OS のシェルにかかわらず、同じように機能します。
これで、プロジェクトの開発とデプロイを始める準備が整いました。テンプレートに README.md がある場合は、ユーザー向けの追加手順やガイダンスがないか確認してください。
ここからは、ほかの ui-bundle スキル(experience-ui-bundle-frontend-generate、experience-ui-bundle-salesforce-data-access、experience-ui-bundle-deploy など)を使って、スキャフォールディング済みのプロジェクトで開発を続けてください。スキャフォールディングと依存関係のインストールはすでに完了しています。
注意事項
- スターターは最小限の構成です。サンプルデータやカスタムオブジェクトは含まれていません。ほかの ui-bundle スキルを使って残りを構築してください。
- これらのテンプレートでは、
uiBundlesメタデータ規約を使用します。UI バンドルのディレクトリとメタ XML は、--nameに渡したプロジェクト名にちなんだ名前になります。 - フラグ名が変更された場合は、
sf template generate project --helpを実行すると、利用可能なすべてのテンプレートを確認できます。