メインコンテンツまでスキップ

Claude Code を使って Squid 上で開発する

Claude Code は Anthropic の AI コーディングエージェントで、ターミナル上で直接動作します。Squid と組み合わせることで強力なペアになります。つまり、Claude はあなたのコードベースを理解し、Squid はバックエンドのインフラ、データベース、そして AI エージェント層を担当します。

このガイドでは、Squid Console からすでにフロントエンドとバックエンドのプロジェクトを初期化していることを前提とします。そのプロジェクトには、Claude Code skills が最初から含まれています。

Squid プロジェクトで Claude を使う​

Claude Code を開く​

プロジェクトルートから Claude Code を起動します:

claude

Claude がプロジェクトをインデックス化し、バンドルされた skills がすぐに利用可能になります。

IntelliJ での Claude Code​

Claude Code は IDE の中でも直接動作します。エディタを離れずに使うには、Claude Code IntelliJ plugin をインストールしてください。

Claude Code integrated in IntelliJ

組み込み skills を使う​

生成されたプロジェクトには、プロジェクトルートの .claude/skills/ に Claude Code skills が含まれています。これらの skills は、組み込み機能を使って Squid 上で開発する方法について、詳細で構造化された知識を Claude に提供します。Claude Code のプロンプトで /skills と入力すると、利用可能な skills を確認できます。内容は以下をカバーしています:

  • Squid Backend SDK のパターン（executables、schedulers、triggers、webhooks）
  • Squid Client SDK の使い方（real-time queries、mutations、auth）
  • セキュリティルールと RBAC
  • AI agent と connector の設定
Using Claude Code skills

Claude に機能を作らせる​

Claude Code でプロジェクトを開いた状態で、やりたいことを平易な英語で説明できます:

  • "Add a backend executable that fetches all users from the built-in database and returns them sorted by creation date."
  • "Create a React component that subscribes to real-time updates from the orders collection."
  • "Update the status field on a document in the customers collection when an order is completed."

Claude は Squid SDK の慣習（conventions）を理解しており、@squidcloud/backend と @squidcloud/client パッケージで動作するコードを生成します。

すばやく反復する​

Claude Code を開いたまま、別々のターミナルで backend と frontend を実行します:

# Terminal 1 — backend
cd backend && squid start

# Terminal 2 — frontend
cd frontend && npm run dev

Claude に変更を依頼し、ライブでリロードされるのを確認し、次に直す／拡張する点を説明します。

より良い結果を得るためのヒント​

Claude に全体像を伝える。 機能を依頼するときは、どの collection または connector が関係するか、backend と frontend の両方の変更が必要かを明記してください。例: "Add an executable in the backend that reads from the invoices collection (MongoDB connector named crm), and call it from the React dashboard page."

エラーメッセージはそのまま貼り付ける。 squid start や npm run dev がエラーを出したら、それを Claude Code に貼り付けてください。Claude はソースファイルを読んで根本原因を修正できます。

Squid docs を参照する。 Claude Code は web からドキュメントを取得できます。最新の API 詳細が必要なときは、Squid Backend SDK docs や Client SDK docs を確認するよう依頼してください。

次のステップ​