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

Claude Code で Squid を構築する

Claude Code は、terminal で直接動作する Anthropic の AI coding agent です。Squid と組み合わせると強力な組み合わせになります。Claude は codebase を理解し、Squid は backend infrastructure、database、AI agent layer を処理します。

この guide は、Squid Console から frontend および backend project を初期化済みであることを前提としています。この project には Claude Code skill が out of the box で含まれています。

Squid Project で Claude を使用する​

Claude Code を開く​

project root から Claude Code を起動します。

claude

Claude が project を index 化し、bundled skill をすぐに利用できるようになります。

IntelliJ で Claude Code を使用する​

Claude Code は IDE 内でも直接動作します。Claude Code IntelliJ plugin を install すると、editor を離れずに使用できます。

IntelliJ に統合された Claude Code

Built-in Skill を使用する​

生成された projectには、project root の .claude/skills/ に Claude Code skill が含まれています。これらの skill は、built-in feature を使用して Squid 上で開発する方法に関する詳細かつ structured な knowledge を Claude に提供します。Claude Code prompt で /skills と入力すると、利用可能な skill を確認できます。対象は次のとおりです。

  • Squid Backend SDK pattern（executable、scheduler、trigger、webhook）
  • Squid Client SDK の使用方法（real-time query、mutation、auth）
  • Security rule と RBAC
  • AI agent と connector の configuration
Claude Code skill の使用

Claude に Feature の構築を依頼する​

Claude Code で project を開いたら、必要な内容を plain English で説明できます。

  • 「built-in database からすべての user を fetch し、creation date で sort して返す backend executable を追加してください。」
  • 「orders collection の real-time update を subscribe する React component を作成してください。」
  • 「order の完了時に、customers collection の document にある status field を update してください。」

Claude は Squid SDK convention を理解しており、@squidcloud/backend と @squidcloud/client package で動作する code を生成します。

迅速に Iteration する​

Claude Code を開いたまま、別々の terminal で backend と frontend を実行します。

# Terminal 1: backend
cd backend && squid start

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

Claude に変更を依頼し、live reload を確認してから、次に修正・拡張する内容を説明します。

最良の結果を得るためのヒント​

Claude に全体像を伝える。 feature を依頼する場合は、関連する collection または connector と、backend と frontend の両方の変更が必要かを伝えます。例: 「invoices collection（crm という名前の MongoDB connector）を read する executable を backend に追加し、React dashboard page から呼び出してください。」

Error message を直接 paste する。 squid start または npm run dev が error を表示した場合は、Claude Code に paste します。Claude は source file を読み取り、root cause を修正できます。

Squid docs を参照する。 Claude Code は web から documentation を fetch できます。最新の API detail が必要な場合は、Squid Backend SDK docs または Client SDK docs を確認するよう依頼してください。

次のステップ​