create-code-app

📋 共通指示：shared-instructions.md - 横断的な考慮事項。

参考資料：

• prerequisites-reference.md - 前提条件と必要なアクセス許可
• troubleshooting.md - よくある問題、npm スクリプト、リソース

Power Apps コードアプリの作成

ワークフロー

1. 前提条件 → 2. 要件の収集 → 3. 計画 → 4. スキャフォールディング → 5. 初期化 → 6. ビルドとデプロイ（ベースライン）→ 7. データソースの追加 → 8. アプリの実装 → 9. 最終ビルドとデプロイ → 10. 概要

---

ステップ 0：メモリーバンクを確認する

shared-instructions.md に従って memory-bank.md を確認します。完了済みのステップはスキップします。

ステップ 1：前提条件を検証する

前提条件のチェックを最初に実行します。環境が整っていない状態で要件を収集しても意味がありません。詳細は prerequisites-reference.md を参照してください。

Node.js と Git を確認します（bash でネイティブに実行します）。

node --version   # Must be v22+
git --version    # Optional but recommended

• Node.js がない場合：「https://nodejs.org/ から Node.js v22 以降をインストールしてください」と報告して、停止します。
• Node.js が v22 未満の場合：「Node.js 22 以降が必要です。nvm use 22 でアップグレードするか、バージョンを切り替えてください」と報告して、停止します。
• Git がない場合：「推奨ですが、必須ではありません」と報告します。承認された場合は続行します。
• すべて揃っている場合：バージョンを報告して続行します。

ステップ 2：要件を収集する

ユーザーが最初の指示ですでに回答している質問はスキップします。

ユーザーが作成したいものを説明していない場合（つまり、/create-code-app が引数なし、または曖昧なプロンプトで呼び出された場合）は、ほかの質問をする前に、まず自由回答形式の質問を 1 つだけします。

「何を作成したいですか？どのようなことをするのか、誰が使うのか、どのような問題を解決するのかを、ご自身の言葉で説明してください。」

回答を待ちます。その内容を、その後の質問すべての基準として使います。ユーザーがアイデアを説明する前に、アプリの種類を複数選択肢で提示してはいけません。

説明を受け取ったら：

1. アプリ名を確認し、必要に応じて目的を明確にします
2. データについて尋ねます。特定の技術ではなく、アプリに必要な処理に焦点を当てます。
   • 「アプリで扱う必要があるデータは何ですか？」（例：会社のメール、プロジェクトのタスク、カスタムの業務レコード）
   • 「既存の情報を検索する必要がありますか、それともアプリ独自のデータを管理する必要がありますか。あるいは両方ですか？」
   • 回答に基づいて、最適な方法を提案します。
     • カスタムの業務データを保存・管理する（テーブル、フォーム、CRUD）→ Dataverse（/add-dataverse）
     • 特定のサービスと連携する（メールの送信、メッセージの投稿、ファイルの管理）→ 適切なコネクタ
     • M365 データを検索する、または AI を活用した回答を取得する（メール、ファイル、ユーザー、社内ナレッジ）→ Work IQ（/add-workiq）
   • 既存の Dataverse テーブル、SharePoint リスト、または名前が挙がったコネクタがある場合は、それらを直接使います。
3. UI の要件について尋ねます。主要な画面、レイアウト、操作、テーマの希望などを確認します。
4. 必要な確認事項をここで質問します。計画モードに入る前に、曖昧な点をすべて解消します。

ステップ 3：計画する

1. EnterPlanMode で計画モードに入ります
2. 実装全体のアプローチを設計します。
   • データソースに使用する /add-* スキル
   • アプリのアーキテクチャ：コンポーネント、ページ、状態管理
   • 優先順位を付けた機能一覧
3. 計画を提示して承認を求めます。prerequisites-reference.md の allowedPrompts を含めてください。
4. 承認されたら ExitPlanMode で計画モードを終了します

ステップ 4：スキャフォールド

ユーザーにフォルダー名を尋ねます。希望がない場合は、powerapps-{app-name-slugified}-{timestamp} をデフォルトとして使用します。

重要：テンプレートのダウンロードには npx degit を使用してください。git clone は使用せず、ファイルを手動で作成したり、GitHub UI からダウンロードしたりしないでください。degit は Git の履歴を含めずにテンプレートをダウンロードします。

npx degit microsoft/PowerAppsCodeApps/templates/vite {folder} --force
cd {folder}
npm install

注意：

• ディレクトリにすでにファイルがある場合（計画セッションで作成した .claude など）は、上書きするために --force を使用します
• 既存のディレクトリを対象にする場合は、フォルダー名として . を使用します：npx degit microsoft/PowerAppsCodeApps/templates/vite . --force
• npx degit が失敗した場合（ネットワークの問題、npm が見つからないなど）は、一度だけ再試行し、その後ユーザーに手動で実行するよう依頼します

確認：package.json が存在し、node_modules/ が作成されていること。

ステップ 5：初期化

まず CLI を解決します（cli-binary.md を参照）：$PA app init …（npx --no-install pa …）として実行し、裸の pa は使用しないでください。power-apps のみを使用するプロジェクトでは、power-apps init … に置き換えます（init 動詞とその -n／-e フラグは、どちらのバイナリでも変わりません）。

pa app init -n '{user-provided-app-name}' -e <environment-id>

環境 ID の確認方法： make.powerapps.com の URL に含まれる GUID です：https://make.powerapps.com/environments/<env-id>/home。-e を指定しない場合、CLI が対話形式で入力を求めます。

認証： 初回実行時に、Microsoft サインイン用のブラウザーウィンドウが開きます。ログインを完了すると、コマンドが続行されます。別途認証を設定する必要はありません。

環境の選択について詳しくは、preferred-environment.md を参照してください。

pa app init の失敗：

• 終了コードが 0 以外：正確な出力を報告し、停止します。ステップ 6 に進まないでください。
• 「environmentId not found」または環境の検証エラー：環境 ID が正しいこと、およびユーザーにその環境でのメーカー権限があることを確認してから、再試行します。
• 例：「pa app init コマンドが失敗しました：[error text]。環境 ID 32a51012-... が正しいこと、およびその環境でメーカー権限があることを確認してください。」

重要： 初期化後に power.config.json を読み込み、environmentId が正しく設定されていることを確認してください。

ステップ 6：ビルドとデプロイ（ベースライン）

事前承認済み：このベースラインのデプロイはスキャフォールドのフローに含まれており、別途確認を求める必要はありません。

データソースを追加する前に、テンプレートのままビルドしてデプロイし、パイプラインが動作することを確認します。

npm run build

dist/ フォルダーが作成され、index.html と assets/ が含まれていることを確認します。

解決済みの CLI を使用してデプロイします：pa の場合は $PA app push、power-apps のみを使用するプロジェクトの場合は power-apps push（cli-binary.md を参照）。

pa app push

出力からアプリ URL を取得します： https://apps.powerapps.com/play/e/{env-id}/app/{app-id}

よくあるデプロイエラー： troubleshooting.md を参照してください。

ここでプロジェクトのルートに memory-bank.md を作成または更新します -- 最後まで待たないでください。次の内容を含めます：

• プロジェクトのパス、アプリ名、環境 ID、アプリ URL
• 完了したステップ：スキャフォールド、初期化、ベースラインのデプロイ
• 計画中のデータソース（ステップ 2 の内容）

これにより、セッションが予期せず終了しても進捗が保存されます。

ステップ 7：データソースを追加する

計画（ステップ 3）で特定した /add-* スキルを呼び出します。それぞれ順番に実行してください。サブスキルが重複する質問（プロジェクトのパス、コネクタ名など）を省略できるよう、コンテキストを引数として渡します。

アプリに必要なこと	呼び出すスキル
カスタムの業務データを保存・管理する	/add-dataverse
作業項目、バグ、パイプラインを追跡する	/add-azuredevops
Teams メッセージを送信・読み取る	/add-teams
Excel スプレッドシートのデータを読み書きする	/add-excel
ファイルをアップロード、ダウンロード、管理する	/add-onedrive
SharePoint のリストやドキュメントを操作する	/add-sharepoint
メールを送信し、受信トレイを読み取り、カレンダーを管理する	/add-office365
Copilot Studio エージェントを呼び出す	/add-mcscopilot
M365 データを検索する、または AI を活用した回答を取得する	/add-workiq
別のサービスに接続する	/add-connector

各 /add-* スキルは、エラーを検出するために npm run build を実行します。まだデプロイしないでください。

**データソースが不要な場合：**ステップ 8 に進みます。

ステップ 8：アプリを実装する

**ここが中心となるステップです。**ステップ 3 の計画に記載された実際のアプリ機能を構築します。

1. 生成されたサービスを確認する：Grep を使用して、生成されたサービスファイル内のメソッドを検索します（非常に大きい場合があります。connector-reference.md を参照）。生成されたファイル全体を読み込まないでください。
2. コンポーネントを構築する：計画にある画面や機能ごとに React コンポーネントを作成します
3. データを接続する：コンポーネントを生成されたサービスに接続します（*Service.getAll()、*Service.create() などを使用）
4. テーマを適用する：ユーザーのテーマ設定を使用します（デフォルト：開発基準に従ってダークテーマ）
5. ユーザーと反復する：進捗を示し、フィードバックを求め、必要に応じて調整します

重要なルール：

• すべてのデータアクセスに生成されたサービスを使用してください。fetch／axios を直接使用してはいけません
• Dataverse を使用する場合は、dataverse-reference.md を読んでください（選択リストフィールド、仮想フィールド、ルックアップには重要な注意点があります）
• ビルド前に未使用のインポートを削除してください（厳格モードの TS6133）
• 既知の問題を修正する場合を除き、src/generated/ 内のファイルを編集しないでください

ステップ 9：最終ビルドとデプロイ

npm run build

TypeScript のエラーがあれば修正してください。dist/ に更新されたアプリが含まれていることを確認します。

ユーザーに次のように尋ねます： 「[環境名] にデプロイする準備はできていますか？これにより、稼働中のアプリが更新されます。」 続行する前に、明示的な確認を待ってください。

pa app push

ステップ 10：概要

以下を提示します。

• アプリ名、環境、アプリ URL、プロジェクトの場所
• 構築した内容：機能、データソース、コンポーネント
• 次のステップ：反復方法（npm run build && pa app push）、データソースを追加する方法
• アプリに追加できる機能を提案します。
  • /add-datasource -- 別のデータソースを追加する（必要な内容を説明すると、プラグインが最適な方法を提案します）
  • /add-dataverse -- カスタムの業務データを保存・管理する
  • /add-azuredevops -- 作業項目、バグ、パイプラインを追跡する
  • /add-teams -- Teams メッセージを送信・読み取る
  • /add-sharepoint -- SharePoint のリストやドキュメントを操作する
  • /add-office365 -- メールを送信し、カレンダーを管理する
  • /add-workiq -- M365 データを検索する、または会社情報に関する AI を活用した回答を取得する
  • /add-connector -- その他のサービスに接続する
• https://make.powerapps.com/environments//home で管理する

メモリバンクを更新する

最終状態を反映するため、ステップ 6 で作成したメモリバンクを更新します。

• 完了したすべてのステップ（スキャフォールド、データソース、実装、デプロイ）
• 実装した機能と作成したコンポーネント
• 接続したデータソース
• 提案する次のステップ

---

実行例

これらの実行例では、ユーザーのリクエストから最終出力までの一連の流れを示します。実行したコマンド、変更したファイル、アシスタントが使用する最終概要の逐語的な形式を含みます。

---

例 1：Dataverse でタスク追跡アプリを作成する

ユーザーのリクエスト：

「Dataverse にタスクを保存するシンプルなタスク追跡アプリを作成してください。タスクの追加、完了への変更、一覧の表示ができるようにしたいです。」

実行したコマンド（順番どおり）：

# Step 1: Prerequisites
node --version   # → v22.4.0

# Step 4: Scaffold
npx degit microsoft/PowerAppsCodeApps/templates/vite powerapps-task-tracker-20260302 --force
cd powerapps-task-tracker-20260302
npm install

# Step 5: Initialize (browser login prompt on first run; CLI prompts for env ID if -e omitted)
pa app init -n 'Task Tracker' -e <environment-id>

# Step 6: Baseline deploy (pre-approved as part of scaffold flow)
npm run build
pa app push
# → App URL: https://apps.powerapps.com/play/e/32a51012-.../app/<app-id>

# Step 7: Add Dataverse (via /add-dataverse)
pa app add data-source --connector dataverse --table cr123_task
npm run build   # verify connector — no deploy yet

# Step 9: Final deploy (requires user confirmation)
npm run build
pa app push

変更したファイル：

ファイル	変更内容
power.config.json	pa app init によって作成 — environmentId を含む
src/generated/models/Cr123_taskModel.ts	pa app add data-source によって生成
src/generated/services/Cr123_taskService.ts	pa app add data-source によって生成
src/components/TaskList.tsx	作成 — ステータスフィルター付きのタスクリストを表示
src/components/AddTaskForm.tsx	作成 — 新しいタスクを追加するフォーム
src/App.tsx	更新 — コンポーネントを Cr123_taskService に接続
memory-bank.md	ステップ 7 で作成、ステップ 11 で更新

アシスタントの最終要約（原文の形式）：

Task Tracker is live.

App: Task Tracker
Environment: <your-environment-name> (<environment-id>)
URL: https://apps.powerapps.com/play/e/<environment-id>/app/<app-id>
Project: ~/powerapps-task-tracker-20260302/

What was built:
- Task list view with Active / Completed filter
- Add task form (title, description, due date)
- Mark complete / delete actions
- Dataverse table `cr123_task` (Title, Description, DueDate, IsComplete)

To redeploy: npm run build && pa app push (from the project folder)

What you can add next:
- /add-teams — post task updates to a Teams channel
- /add-office365 — send email notifications on completion

memory-bank.md に記録する内容：

# Task Tracker — Memory Bank

## Project

- Path: ~/powerapps-task-tracker-20260302/
- App name: Task Tracker
- Environment: <your-environment-name> (<environment-id>)
- App URL: https://apps.powerapps.com/play/e/<environment-id>/app/<app-id>

## Completed Steps

- [x] Step 1: Prerequisites validated
- [x] Step 4: Scaffold (npx degit)
- [x] Step 5: Initialize (pa app init)
- [x] Step 6: Baseline deploy
- [x] Step 7: Add Dataverse (cr123_task)
- [x] Step 8: Implement app (TaskList, AddTaskForm)
- [x] Step 9: Final deploy

## Data Sources

- Dataverse: cr123_task (Title, Description, DueDate, IsComplete)

## Components

- TaskList.tsx — filtered list, mark complete, delete
- AddTaskForm.tsx — create new tasks

## Next Steps

- Consider /add-teams for task assignment notifications

---

例 2：既存のアプリに SharePoint コネクタを追加する

ユーザーのリクエスト：

「アプリはすでにあります。『Project Milestones』というリストからアイテムを読み取れるように、SharePoint を追加してください。」

実行したコマンド（順番どおり）：

# Step 6: Get connection ID (via /list-connections)
pa connection list
# → ConnectionId: conn-sp-xyz789  (SharePoint Online)

# Step 7: Discover sites
pa connector list-datasets --connector sharepointonline -c conn-sp-xyz789
# → https://contoso.sharepoint.com/sites/Projects

# Step 8: Discover tables
pa connector list-tables --connector sharepointonline -c conn-sp-xyz789 -d 'https://contoso.sharepoint.com/sites/Projects'
# → Project Milestones, Documents, Team Wiki

# Step 9: Add connector
pa app add data-source --connector sharepointonline -c conn-sp-xyz789 -d 'https://contoso.sharepoint.com/sites/Projects' --table 'Project Milestones'

# Step 11: Build to verify
npm run build   # → success

変更したファイル：

ファイル	変更内容
src/generated/services/SharePointOnlineService.ts	生成 — GetItems、PostItem などを含む
src/generated/models/SharePointOnlineModel.ts	生成 — TypeScript インターフェイス
.power/schemas/sharepointonline/	スキーマファイルを生成
memory-bank.md	更新 — コネクタを記録

アシスタントの最終要約（原文の形式）：

SharePoint Online connector added.

Connector: SharePoint Online
Site: https://contoso.sharepoint.com/sites/Projects
List: Project Milestones
Build: Passed ✓

Usage:
  const result = await SharePointOnlineService.GetItems({
    dataset: "https://contoso.sharepoint.com/sites/Projects",
    table: "Project Milestones"
  });
  const milestones = result.data?.value || [];

Next: Implement your UI components using the generated service, then run /deploy when ready.