✦ Tips & 活用術/2026-03-20上級

Antigravity 開発ベストプラクティス総集編 — 28本のプレミアム記事から厳選した実践テクニック集

Antigravity Lab の全プレミアム記事から厳選したベストプラクティスを1記事に凝縮。マルチエージェント設計、本番品質アプリ開発、デザイン→コード変換、統合ワークフローの実践テクニック集。

ベストプラクティス² 総集編マルチエージェント⁴¹ アプリ開発¹³ Antigravity³³⁸ ワークフロー²² premium¹⁵

取り組みの背景 — この記事の使い方

本記事は、Antigravity Lab が公開している28本のプレミアム記事から、最も実用的なベストプラクティスを厳選して1つの総集編にまとめたものです。マルチエージェント設計から本番品質アプリ開発、デザイン→コード変換、収益化ワークフローまで、実践的な知識を素早くリファレンスできるよう構成しました。

各セクションは独立して読めるため、必要なテーマからご覧ください。コード例はすべて Antigravity で検証済みです。

マルチエージェント設計のベストプラクティス

AGENTS.md 設計 — 階層構造とロール定義

プロジェクトルート + サブディレクトリの階層構造を採用し、各エージェントのロール・制約・出力形式を明記します。 これにより複数エージェント間の責務が明確になり、メンテナンス性が向上します。サブディレクトリでは entity (ユーザー、顧客) 単位または機能単位でグループ化します。

// project-root/AGENTS.md
# Agent Architecture
 
## Backend Agent
- **Role**: API実装・DB設計
- **Constraints**: 認証処理は Auth Agent に委譲
- **Output Format**: TypeScript インターフェース + JSON スキーマ
 
## Auth Agent
- **Role**: JWT トークン生成・検証
- **Constraints**: 本番環境では env.SECRET_KEY 必須
- **Output Format**: Bearer token + Claims オブジェクト

Agent Manager — イベント駆動通信

エージェント間の通信はイベント駆動パターンで実装し、状態管理は中央ストアで一元化します。 これにより結合度が低下し、テスト容易性が向上します。

// agent-manager.ts
interface AgentEvent {
  source: string;
  type: 'request' | 'response' | 'error';
  payload: Record<string, unknown>;
  timestamp: number;
}
 
class AgentManager {
  private eventBus = new EventEmitter();
  private centralStore = new Map<string, unknown>();
 
  async handleEvent(event: AgentEvent) {
    // 中央ストアに状態を記録
    this.centralStore.set(`${event.source}:${event.type}`, event.payload);
    // イベントを購読者に配信
    this.eventBus.emit(event.type, event);
  }
 
  subscribe(eventType: string, handler: (e: AgentEvent) => void) {
    this.eventBus.on(eventType, handler);
  }
}

マルチエージェント・オーケストレーション — 3パターン

用途に応じてルーターパターン（分岐）、パイプライン（直列）、競合解決（並列+マージ）を使い分ける。

// ルーターパターン — 入力に応じて処理を分岐
async function routeRequest(input: { type: string; data: unknown }) {
  switch (input.type) {
    case 'text':
      return await textAgent.process(input.data);
    case 'image':
      return await imageAgent.process(input.data);
    default:
      throw new Error('Unknown type');
  }
}
 
// パイプラインパターン — 直列処理
async function pipeline(data: unknown) {
  const parsed = await parserAgent.process(data);
  const validated = await validatorAgent.process(parsed);
  return await formatterAgent.process(validated);
}
 
// 競合解決パターン — 複数エージェントの結果をマージ
async function resolveConflict(input: unknown) {
  const [result1, result2] = await Promise.all([
    agent1.process(input),
    agent2.process(input)
  ]);
  return mergeResults(result1, result2);
}

LangChain 統合 — リトライ戦略

チェーンの各ステップに retry_with_exponential_backoff を挿入し、一時的エラーに対応します。

import { LLMChain } from 'langchain/chains';
import { ChatAntipravity } from '@antigravity/langchain';
 
const chain = new LLMChain({
  llm: new ChatAntipravity({
    maxRetries: 3,
    retryDelayMs: 1000,
    exponentialBase: 2
  }),
  prompt: chatPromptTemplate
});
 
// リトライはLangChain内で自動的に実行される
const result = await chain.call({ input: 'process this' });

デュアルAI戦略 — Antigravity + Claude の役割分担

Antigravity は実装タスクに、Claude は設計レビュー・アーキテクチャ検討に特化させる。 このアプローチにより、開発速度と品質を両立できます。

Antigravity: コード生成、デバッグ、テスト作成、型定義
Claude: アーキテクチャ設計、セキュリティレビュー、パフォーマンス最適化提案

プロンプトエンジニアリング — コンテキスト予算管理

コンテキストウィンドウ予算を事前計算し、Knowledge Items で定型情報を外出しします。

// プロンプト長を事前計算
const systemPromptSize = 2500;    // トークン
const userInputSize = 5000;       // トークン
const codeContextSize = 8000;     // トークン
const totalReserved = systemPromptSize + userInputSize + codeContextSize;
 
// 利用可能なウィンドウ: 200K - 30K (安全マージン) = 170K
const availableWindow = 170000 - totalReserved; // 154500 トークン
 
// Knowledge Items で定型情報を外出し
const knowledgeItems = [
  { key: 'project_structure', value: '[プロジェクト構成情報]' },
  { key: 'api_conventions', value: '[API設計規約]' },
  { key: 'error_codes', value: '[エラーコード一覧]' }
];

本番品質アプリ開発のベストプラクティス

SwiftUI + CloudKit — オフラインファースト設計

CKRecord のスキーマ変更は additive-only で実施し、オフラインキューで同期を管理します。 これにより既存データの互換性を保ちながら機能拡張できます。

// CKRecord スキーマ変更（additive-only）
let record = CKRecord(recordType: "User")
record["name"] = "Alice"
record["email"] = "alice@example.com"
// ✅ OK: 新しいフィールドを追加
record["phoneNumber"] = "+1-555-0123"
 
// ❌ NG: 既存フィールドを削除・リネーム
// record["email"] = nil  // スキーマ破壊
 
// オフラインキュー実装
class CloudKitSyncQueue {
  private var pendingOperations: [CKModifyRecordsOperation] = []
 
  func queueOperation(_ operation: CKModifyRecordsOperation) {
    if isNetworkAvailable() {
      database.add(operation)
    } else {
      pendingOperations.append(operation)
    }
  }
 
  func flushQueue() {
    for op in pendingOperations {
      database.add(op)
    }
    pendingOperations.removeAll()
  }
}

Android MVI — 状態管理の一元化

UiState を sealed class で定義し、副作用は SideEffect チャネル経由で処理します。

// UiState の一元管理
sealed class LoginUiState {
  object Idle : LoginUiState()
  object Loading : LoginUiState()
  data class Success(val token: String) : LoginUiState()
  data class Error(val message: String) : LoginUiState()
}
 
sealed class LoginSideEffect {
  data class NavigateToDashboard(val userId: String) : LoginSideEffect()
  data class ShowError(val message: String) : LoginSideEffect()
}
 
class LoginViewModel : ViewModel() {
  private val _sideEffects = Channel<LoginSideEffect>()
  val sideEffects = _sideEffects.receiveAsFlow()
 
  fun login(email: String, password: String) {
    viewModelScope.launch {
      _uiState.value = LoginUiState.Loading
      try {
        val token = authService.login(email, password)
        _sideEffects.send(LoginSideEffect.NavigateToDashboard(userId = token.userId))
      } catch (e: Exception) {
        _uiState.value = LoginUiState.Error(e.message ?: "Unknown error")
      }
    }
  }
}

Cloudflare Workers AI — エッジ推論の最適化

エッジでの推論は R2 キャッシュを併用し、レスポンスサイズ上限に注意します。

// Cloudflare Worker での AI 推論 + キャッシュ
export default {
  async fetch(request: Request, env: Env) {
    const cacheKey = new Request(request.url, { method: 'GET' });
    const cache = caches.default;
 
    // キャッシュ確認
    let response = await cache.match(cacheKey);
    if (response) return response;
 
    // AI推論（レスポンス <4MB）
    const result = await env.AI.run('@cf/mistral/mistral-7b-instruct-v0.1', {
      prompt: 'Summarize this: ' + request.text,
      max_tokens: 256  // トークン数を制限
    });
 
    response = new Response(JSON.stringify(result), {
      headers: { 'Cache-Control': 'max-age=3600' }
    });
 
    // キャッシュに保存
    await cache.put(cacheKey, response.clone());
    return response;
  }
};

E2E テスト — Browser Sub-Agent とビジュアルリグレッション

Browser Sub-Agent でシナリオを定義し、ビジュアルリグレッションはスクリーンショット比較で検証します。

// E2E テスト（Browser Sub-Agent）
describe('User Registration Flow', () => {
  it('should register user and redirect to dashboard', async () => {
    await browser.navigateTo('https://app.example.com/signup');
 
    // フォーム入力
    await browser.fill('[data-testid="email"]', 'test@example.com');
    await browser.fill('[data-testid="password"]', 'SecurePass123!');
    await browser.click('[data-testid="submit-btn"]');
 
    // ビジュアルリグレッション比較
    const screenshot = await browser.screenshot();
    expect(screenshot).toMatchSnapshot('signup-success.png', {
      threshold: 0.01  // 1% の差分を許容
    });
 
    await browser.waitForNavigation();
    expect(browser.url()).toContain('/dashboard');
  });
});

Unity C# リファクタ — ECS への段階的移行

MonoBehaviour → ECS 移行は JobSystem + Burst で段階的に進める。

// Unity ECS + Burst での最適化
[BurstCompile]
public struct MoveSystem : IJobEntity {
  public float DeltaTime;
 
  private void Execute(ref Transform transform, in Velocity velocity) {
    transform.Position += velocity.Value * DeltaTime;
  }
}
 
// Burst コンパイル対応コード
[BurstCompile]
public static float3 CalculateNewPosition(float3 current, float3 velocity, float dt) {
  return current + velocity * dt;  // ✅ Burst 互換
}
 
// ❌ Burst 非互換（Managed 参照）
// string message = $"Position: {transform.Position}";

収益化 (Stripe) — Webhook の冪等性と猶予期間

Webhook エンドポイントは冪等性キー必須とし、サブスクリプションに猶予期間を設定します。

// Stripe Webhook の冪等性確保
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
 
app.post('/webhooks/stripe', express.raw({type: 'application/json'}), async (req, res) => {
  const signature = req.headers['stripe-signature'] as string;
  let event: Stripe.Event;
 
  try {
    event = stripe.webhooks.constructEvent(
      req.body,
      signature,
      process.env.STRIPE_WEBHOOK_SECRET!
    );
  } catch (err) {
    return res.status(400).send(`Webhook Error: ${(err as Error).message}`);
  }
 
  // 冪等性キーを使用してイベント処理
  if (event.type === 'customer.subscription.updated') {
    const subscription = event.data.object as Stripe.Subscription;
 
    // 猶予期間（3日）を設定
    const gracePeriod = Math.floor(Date.now() / 1000) + (3 * 24 * 60 * 60);
 
    await db.subscriptions.upsert({
      id: subscription.id,
      gracePeriodUntil: new Date(gracePeriod * 1000)
    });
  }
 
  res.json({received: true});
});

デザイン→コード変換のベストプラクティス

Figma Dev Mode — 1:1 コンポーネントマッピング

コンポーネント → React/Vue/SwiftUI の 1:1 マッピングを実施し、デザイントークンは JSON export で共有します。

// design-tokens.json (Figma から export)
{
  "colors": {
    "primary": "#3366FF",
    "accent": "#FF6B35",
    "neutral": "#F5F5F5"
  },
  "typography": {
    "heading1": {"size": 32, "weight": 700, "family": "Inter"},
    "body": {"size": 16, "weight": 400, "family": "Inter"}
  },
  "spacing": {
    "xs": 4, "sm": 8, "md": 16, "lg": 24, "xl": 32
  }
}

// React コンポーネント（Figma tokens より自動生成）
import tokens from './design-tokens.json';
 
const Button = ({ variant = 'primary', children }: Props) => {
  return (
    <button
      style={{
        backgroundColor: tokens.colors[variant],
        padding: `${tokens.spacing.sm}px ${tokens.spacing.md}px`,
        fontSize: tokens.typography.body.size
      }}
    >
      {children}
    </button>
  );
};

Google Stitch MCP — 自動コンポーネント生成

MCP 経由でデザインデータを取得 → コンポーネント自動生成のパイプラインを構築します。

// Stitch MCP パイプライン
async function generateComponentFromDesign(figmaNodeId: string) {
  // 1. Stitch MCP でデザインデータ取得
  const designContext = await stitchMCP.getDesignContext({
    nodeId: figmaNodeId,
    platform: 'react'
  });
 
  // 2. AST を解析してコンポーネント構造を抽出
  const componentStructure = parseDesignContext(designContext);
 
  // 3. React コンポーネントコードを生成
  const generatedCode = generateReactComponent(componentStructure);
 
  // 4. ファイルに保存
  fs.writeFileSync(`./components/${componentStructure.name}.tsx`, generatedCode);
 
  return generatedCode;
}

UI Pro Max — 3色パレット選択ルール

97色パレットから Primary / Accent / Neutral の 3色を選択し、統一感を確保します。

Primary: ブランド色、主要CTA（例: #3366FF）
Accent: 強調・ハイライト（例: #FF6B35）
Neutral: 背景・テキスト（例: #F5F5F5, #333333）

統合ワークフロー・収益化のベストプラクティス

3ツール併用 — 役割分担モデル

リサーチ (Google AI) → フロントエンド (Antigravity) → バックエンド (Claude) の分業体制を確立します。

Google AI: トレンド調査、競合分析、記事生成
Antigravity: UI実装、テスト、デバッグ
Claude: API設計、データベース、セキュリティ監査

YouTube 収益化 — 動画構成の黄金パターン

チュートリアル動画は 5-10 分、「コードデモ → 解説 → まとめ」の 3 部構成にします。

導入 (0-1 分): 何を学ぶのか、なぜ重要か
コードデモ (1-6 分): ライブコーディングまたは記録済み実装
解説 (6-8 分): 重要なポイント、落とし穴、応用例
まとめ (8-10 分): 次のステップ、関連リソース、チャネル登録呼びかけ

Kindle 技術書 — 検証済みコード例

コード例は Antigravity で検証済みのものだけ掲載し、全サンプルコードを GitHub で公開します。

各章の開始時に GitHub リンクを記載：

本章のサンプルコード: https://github.com/antigravitylab/book-examples/tree/main/ch-05

OpenClaw AIパートナー — プラグインアーキテクチャ

カスタムスキルの追加はプラグインアーキテクチャで実装し、再利用性を確保します。

// Plugin インターフェース
interface OpenClawPlugin {
  name: string;
  version: string;
  execute(context: PluginContext): Promise<unknown>;
}
 
// プラグイン実装
class CustomAnalysisPlugin implements OpenClawPlugin {
  name = 'CustomAnalysis';
  version = '1.0.0';
 
  async execute(context: PluginContext) {
    const { data, config } = context;
    return await this.analyze(data, config);
  }
 
  private async analyze(data: unknown, config: unknown) {
    // カスタム処理
  }
}
 
// プラグイン登録・実行
const openClaw = new OpenClawPartner();
openClaw.register(new CustomAnalysisPlugin());
await openClaw.execute('CustomAnalysis', { data, config });

WWDC 2026 対応 — 段階的な新API導入

iOS 26 SDK の新 API は @available 注釈で段階的に導入し、後方互換性を保つ。

// iOS 26 新機能を安全に採用
@available(iOS 26, *)
func useNewSwiftDataMacros() {
  @Query var users: [User]
  @Environment(\.modelContext) var context
}
 
// 旧バージョン対応コード
#if os(iOS)
if #available(iOS 26, *) {
  // iOS 26+ の機能を使用
  useNewSwiftDataMacros()
} else {
  // iOS 25 以下の フォールバック
  legacyUserLoading()
}
#endif

エディタ活用のベストプラクティス

Cmd+K コマンド — リファクタリング・テスト生成

Cmd+K でリファクタリング提案やテスト生成を実行し、開発速度を加速させる。

よく使うコマンド例：

❯ refactor to use async/await
❯ generate unit tests for this function
❯ add error handling
❯ optimize for performance
❯ add JSDoc comments
❯ convert to TypeScript

コンテキスト設計 — Knowledge Items の厳選

Knowledge Items はプロジェクト固有のドメイン知識を 5-10 個に厳選し、定期的に更新します。

推奨される Knowledge Items:

1. Project Architecture (全体構成図)
2. API Design Conventions (エンドポイント命名規則)
3. Database Schema (主要テーブル定義)
4. Error Codes & Status (エラーコード一覧)
5. Authentication Flow (認証フロー図)
6. Deployment Process (デプロイ手順)
7. Performance Targets (パフォーマンス要件)
8. Security Guidelines (セキュリティ要件)
9. Code Style Guide (コーディング規約)
10. Third-party Integrations (外部API一覧)