AI を活用した開発
PlayCanvas Engine アプリケーションは通常の JavaScript または TypeScript プロジェクトであるため、ファイルの読み取り、コードの編集、コマンドの実行が可能なコーディングアシスタントを使用できます。人間の開発者と同じ Engine の参考資料と検証手順をアシスタントに提供してください。
コードが PlayCanvas Editor プロジェクトに保存されている場合は、代わりに VS Code Extension を使用してください。
AI クライアントとインターフェースを選択する
| クライアント | インターフェース | 推奨される用途 |
|---|---|---|
| Cursor | コードエディター | インライン変更、視覚的な差分レビュー、エディター中心のエージェントワークフロー |
| Claude Code | CLI、IDE 連携、Claude Desktop の Code タブ | ターミナル、エディター、または視覚的な差分とアプリのプレビューを備えたデスクトップワークスペースから行うリポジトリ全体の作業 |
| OpenAI Codex | CLI、IDE 拡張機能、ChatGPT デスクトップアプリ内の Codex | ターミナル、エディター、または並列チャットとワークツリーを備えたデスクトップワークスペースから行うローカル実装とレビュー |
クライアントごとにプランと対応プラットフォームが異なります。最新のインストール方法と利用条件については、各クライアントの公式ドキュメントを参照してください。
プロジェクトのコンテキストを提供する
アシスタントをリポジトリのルートで起動し、最初にプロジェクトの依存関係をインストールします。これにより、PlayCanvas パッケージ、TypeScript 宣言、スクリプト、既存のコードパターンを利用できます。
プロジェクトで実際に使用する開発コマンドと規約を、AGENTS.md、CLAUDE.md、Cursor Rules などのクライアント用リポジトリ指示に追加します。指示は短く保ち、次の内容を含めてください。
- 開発、lint、テスト、ビルドのコマンド
- ソースディレクトリと生成ディレクトリ
- ブラウザー対応とパフォーマンス上の制約
- タスクの完了に必要な観察可能な結果
可能な限り、共有する指示を AGENTS.md にまとめます。Claude Code から再利用するには、CLAUDE.md の内容を次の 1 行だけにできます。
@AGENTS.md
クライアントごとに別のファイルを作成するのは、そのクライアントだけに必要な指示がある場合に限ります。
アシスタントに記憶だけで API を推測させず、次の PlayCanvas リソースを参照させてください。
コードを書く前に Engine の機能を再利用する
カメラ制御、キャラクターコントローラー、トゥイーン、水面、空、ポストエフェクト、XR のコードを書く前に、playcanvas/scripts/* から利用できるプロダクション品質の Engine スクリプトを確認してください。
慣れていない Engine 機能を実装する場合は、対応する Engine サンプルを探し、Engine の設定や更新ロジックを取り入れます。サンプルはインポートするモジュールではなく、読んで移植するレシピとして扱ってください。
結果と検証方法を説明する
観察可能な結果を 1 つ指定し、維持する制約と結果を証明するチェックを伝えます。次に例を示します。
編集する前に、この PlayCanvas Engine プロジェクトを確認してください。既存のパターンを再利用し、
API を推測せずに、インストール済みの PlayCanvas 型定義または公式 API リファレンスを確認してください。
[制約] を変更せずに [結果] を実装してください。[テストまたはビルドコマンド] を実行し、
アプリを起動して [操作] を行い、ブラウザーコンソールを確認してください。最後に差分と、
結果が動作することを示す証拠をまとめてください。
推奨プラグインと MCP サーバー
タスクに必要な連携機能だけを使用してください。ブラウザー用の MCP サーバーを追加する前に、選択したデスクトップクライアントに組み込まれているブラウザーまたはアプリのプレビューで検証を行えるか確認してください。追加する場合は、最初はブラウザーツールを 1 つ選択し、不足する機能がある場合にだけ別のツールを追加します。
- Context7 MCP: クライアントで MCP による検索が役立つ場合に、インデックス化された PlayCanvas Engine ドキュメントを取得します。信頼できる情報源としては、上記の公式 AI 向けドキュメントを優先してください。
- Playwright MCP: ブラウザーでアプリケーションを起動、操作し、ユーザーフローを実行してスクリーンショットを取得します。
- Chrome DevTools MCP: コンソール、ネットワーク、パフォーマンスの診断が主な目的の場合に Playwright の代わりに使用します。
- PlayCanvas VS Code Extension: Editor で管理されているテキストアセットを、Cursor などのコーディングアシスタントが操作できるローカルファイルとして公開します。
すべての変更を検証する
ソースコードの確認だけでは、インタラクティブな動作を証明できません。結果を受け入れる前に、次の手順を行います。
- 完全な差分をレビューし、無関係な変更を除外します。
- プロジェクトで利用できる関連テスト、lint、プロダクションビルドを実行します。
- アプリケーションを起動し、ブラウザーコンソールに新しいエラーや警告がないことを確認します。
- 実際のブラウザー入力で変更した操作を実行します。外観にはスクリーンショットを使用し、状態、数、位置、その他の動作にはランタイムクエリを使用してください。証拠を作るために状態を変更してはいけません。
- 複雑な状態には、変更用メソッドを公開せず、JSON に変換できるデータを返す開発時専用の
window.snapshot()を検討します。 - 失敗したチェックを修正して再検証し、影響を受けるブラウザーまたはデバイスでテストして、検証できなかった項目を報告します。
AI ツールの公式ドキュメント
OpenAI
Anthropic
- Claude Code の概要
- Claude Code の IDE 連携
- デスクトップ版 Claude Code
- Claude Code MCP
- Claude Code プラグイン
- Claude Code のメモリと
CLAUDE.md