1. モダナイゼーションの取り組みの方向性を定める
この包括的な Codelab は、アーキテクチャの詳細な記事である Antigravity とマルチエージェント オーケストレーションを使用してモダナイゼーションを自動化する方法から直接派生した実践的なコンパニオン ラボです。具体的なデモンストレーションとして従来の Node.js フレームワークの交換を使用しますが、ここで説明するコア設計パターン、ディレクトリ構造、エージェント オーケストレーション プロセスは言語に依存せず、大規模なレガシー モダナイゼーション プロジェクトに普遍的に適用できます。
単一ファイル内の行を自動補完するだけの標準的なコーディング アシスタントとは異なり、Google Antigravity のエージェント ファースト機能を活用して、専門的な AI サブエージェントの自律チームをオーケストレートする方法を学びます。これらのエージェントは、高レベルのアーキテクトとして絶対的な制御を維持しながら、レガシー コードベースのリバース エンジニアリング、厳密なテストスイートの作成、最新のアーキテクチャの足場作り、Reflexion ループを使用したコンパイラ エラーの自己修正を独立して行うことができます。
学習内容
- ワークフローのマッピング: 決定論的な設定タスクと複雑なヒューリスティック リファクタリングの課題を正しく分類して分離する方法。
- スキル アーキテクチャ: 段階的開示と YAML ルーティング メタデータを使用して、拡張可能なエージェント スキルパックを構造化する方法。
- オーケストレーション設計パターン: Router、Plan-and-Execute、Reflexion の設計パターンを連結して大規模なリファクタリングを推進する方法。
- 厳格な入出力コントラクト: 複数フェーズのリバース エンジニアリングとターゲット スキャフォールディング パイプライン全体で、明確な入力 / スキル / 出力境界を適用する方法。
- パリティ検証: Antigravity のブラウザ サブエージェントを活用して、Chrome ウェブブラウザ内でパリティ テストを並行して実行する方法。
作成するアプリの概要
完全に自動化されたグリーンフィールド リファクタリング パイプラインをオーケストレートします。このパイプラインは、時代遅れのレガシー Express と Mongoose CRUD モノリス（「madhums デモ」）を取得し、MongoDB、厳格な Zod 検証、アクセス可能な ShadCN UI コンポーネントでサポートされる厳密に型指定された Next.js App Router アプリケーションにゼロから自動的に再構築します。
必要なもの
- ローカルにインストールされた Google Antigravity IDE（antigravity.google で利用可能）。
- Node.js（v18 以降）がローカルにインストールされている。
- 自動 UI 検証用の Chrome ブラウザ。
- オープンソースの modernizing-expressjs デモ モノレポのクローン。
2. モダナイゼーション環境を設定する
老朽化したレガシー コードベースに自律型エージェントを導入する前に、クリーンで安定性の高いモノレポ環境を確立する必要があります。AI アシスタントにクリーンなベースラインを提供することで、AI アシスタントは、10 年前のパッケージの脆弱性やコンパイラの不一致に対処するためにトークンを無駄にするのではなく、質の高い最新のコードの生成に集中できます。
以前の Express アーキテクチャと最新の Next.js アーキテクチャのマッピング
コンポーネント | レガシー スタック | 最新の交換 | 理由 |
アーキテクチャ | Express Monolith | Next.js App Router | 最適化されたレンダリングと React Server Components（RSC）のパフォーマンスを実現するために、ロジックをサーバー コンポーネントに分離します。 |
データロジック | Mongoose（ODM） | MongoDB + Zod | 暗黙的な ORM フックを明示的なタイプセーフな Zod スキーマと生のドライバ パフォーマンスに置き換えます。 |
言語 | CommonJS / JavaScript | TypeScript（ESM） | コンパイル時の安全性を強化し、最新のモジュール標準に移行します。 |
フロントエンド | Pug/EJS（サーバービュー） | ShadCN UI + Tailwind | 厳格なテンプレートから、コンポーザブルでアクセシブルなユーティリティ ファーストのデザイン システムへの移行。 |
Auth | Passport.js | NextAuth | Edge と最新のプロバイダの組み込みサポートにより、セッション管理を最新化します。 |
安全 | 手動ミドルウェア | Zod（厳密な検証） | スタック全体でデータ検証の「信頼できる唯一の情報源」を実装します。 |
モダナイゼーション ハブを初期化する
最初の決定論的アクションは、分離されたモノレポ構造を複製することです。これにより、読み取り専用のレガシー コードが新しいグリーンフィールド ターゲット リポジトリから分離され、元のアプリケーションへの偶発的な変更がなくなります。
Antigravity ターミナルを開き、次の設定コマンドを実行します。
git clone https://github.com/GoogleCloudPlatform/devrel-demos.git cd devrel-demos/other/modernizing-expressjs
クローンを作成したら、Antigravity IDE エクスプローラで modernizing-expressjs フォルダを直接開きます。次の分離されたレイアウトが表示されます。
/modernizing-expressjs/ ├── .agents/ # Skills metadata and checklists │ └── skills/ ├── docs/ # Target directory for reverse-engineered markdown artifacts ├── legacy-app/ # Read-only root of the legacy Express monolith ├── modern-app/ # Greenfield target repository for the Next.js rewrite ├── GEMINI.md # Project-wide agent constitution └── README.md # Companion documentation
この短い動画では、モノレポ環境を決定論的に準備して分離する方法について説明します。
3. AI エージェントのスキルパックとパターンを設計する
堅牢なエージェント スキルを作成することは、標準のチャット プロンプトを作成することとは根本的に異なります。スキルパックを作成する際は、基盤となる LLM が自律的に実行するモジュール式のソフトウェアを設計します。エージェントのハルシネーションや「コンテキスト ウィンドウ税」を回避するため、Google は、簡潔さと段階的な開示という 2 つの原則に基づく拡張可能なオーサリング テンプレートとして、オープンソースの Greenfield Orchestration Skill Pack を導入しました。
YAML メタデータ ルーティングを使用した段階的な開示
すべてのターゲット ルールを 1 つのモノリシックなシステム プロンプトにダンプするのではなく、指示をディレクトリに分散します。すべてのスキル ディレクトリには、YAML ルーティング フロントマター ブロックでラップされた SKILL.md エントリ ポイントが含まれています。
.agents/skills/orchestrating-greenfield-migration/SKILL.md を開き、ルーターのメタデータを調べます。
---
name: orchestrating-greenfield-migration
description: >
Manages the end-to-end modernization of legacy Express
monoliths into Next.js architectures. Orchestrates subagents
for auditing, scaffolding, and verification. Use when starting
or managing a greenfield rewrite project.
---
計画と実行のパターンをハードコードする
自律エージェントがドリフトしたり、興味深いレガシー ミドルウェアに気を取られたり、不正なデータベース スワップを試みたりしないように、標準のオープンエンド プランニングをオーバーライドし、プランと実行パターンを指示に直接ハードコードします。
メイン オーケストレータに埋め込まれたリテラル マークダウン チェックリストを調べます。
### Phase 1: The AI audit (reverse engineering)
Dispatch subagents to produce specifications while identifying project-specific test scenarios.
* [ ] Init `docs/verification/Verification_Plan.md` to create baseline template.
* [ ] Run `auditing-data-models` -> Append Data Integrity Stress-Tests.
* [ ] Run `auditing-api-contracts` -> Append API Parity & Edge Case Probes.
* [ ] Run `auditing-business-logic` -> Append Logic & Authorization Stress-Tests.
* [ ] Run `auditing-ui-archeology` -> Append Interaction & Layout Targets.
ワークフローをインライン スキル参照を含む明示的なチェックリストとしてフォーマットすることで、エージェントはこのロードマップをタスクプランに正確にコピーし、「実行専用」モードにロックします。このモードでは、ボックスが体系的にチェックされ、高度に専門化されたサブエージェントが必要なときに正確に呼び出されます。
4. フェーズ 1 - レガシー モノリスのリバース エンジニアリング（監査）
メインのオーケストレーション シーケンスをトリガーする準備が整いました。最初の主要なフェーズでは、ビジネスルール、データスキーマ、API ペイロードをレガシー モノリスから抽出し、クリーンな Markdown アーティファクトとして保存します。これにより、10 年間の命令型技術的負債が解消されます。
自律型リファクタリング シーケンスをトリガーする
Antigravity Agent Manager のチャットパネルで、次のカスタム スラッシュ コマンドを入力して Enter キーを押します。
/orchestrating-greenfield-migration
ターミナル コンソールを観察します。メイン エージェントがシステム プロンプトを読み取り、リクエストを Orchestrator のメタデータと照合し、5 フェーズのチェックリストを出力し、すぐに特別な「監査」サブエージェントの並列ディスパッチを開始します。
入力/スキル/出力の指示コントラクト
フェーズ 1 では、エージェントは次の指示契約に準拠した厳格なリバース エンジニアリング パイプラインを実行します。
使用される入力: legacy-app/ 内にある読み取り専用のレガシー ソースコード ファイル。
呼び出されたスキル:
スキル | 説明 |
| 以前のルートをトレースして、正確な JSON レスポンス エンベロープをドキュメント化します。 |
| Mongoose スキーマを分解して、リレーション、必須フィールド、デフォルトを抽出します。 |
| 暗黙的な副作用、Passport 認証フロー、ミドルウェア ルールを文書化します。 |
| 以前の Pug テンプレートをスキャンして、高レベルの「UI インテント」（ナビバー、フォーム）をマッピングします。 |
生成されるアーティファクト: docs/ フォルダに直接生成される高度に構造化された Markdown 仕様
アーティファクト | 説明 |
| このドキュメントでは、以前の Express アプリケーションのリバース エンジニアリングされた API サーフェス領域について詳しく説明します。このカタログを使用して、最新の Next.js アプリケーションでルートを再構築する際に厳密なパリティを確保します。 |
| このドキュメントでは、認証（AuthN）、認可（AuthZ）、グローバル ミドルウェア、セッション管理、副作用に関する以前の Express アプリケーションの検証済み動作、構成、厳格なルールを記録します。 |
| このドキュメントでは、 |
| このドキュメントでは、 |
自律型リバース エンジニアリング監査の動作を示すライブ端末キャプチャをご覧ください。
5. フェーズ 2 と 3 - TDD ハーネスとグリーンフィールド バックエンド スキャフォールディング
レガシー アプリケーションの監査とドキュメント化が完了すると、メイン オーケストレーターは最新のターゲット バックエンドのスキャフォールディングに進みます。このフェーズでは、厳格なテスト駆動開発（TDD）によって駆動されるクローズドループの Reflexion（自己反省）という、ツールキットで最も強力なエージェント型設計パターンが導入されます。
Reflexion ループを使用した自己修復コードの駆動
最新のコードの記述は簡単ですが、コードが完全にコンパイルされ、厳しい検証制約に合格するようにするには、クローズドループ評価が必要です。オーケストレーターは、テスト出力をサブエージェントのコンテキスト ウィンドウに直接パイプすることで、これを自律的に処理します。
- フェーズ 2（TDD の設定）: オーケストレーターが
generating-api-testsサブエージェントを呼び出します。サブエージェントはdocs/API_Contracts.mdを読み取り、必要な HTTP ステータス コードと JSON ペイロードを正確にアサートする Vitest 統合テストスイートを網羅的に書き込みます。TDD で想定されるように、これらのテストは最初は失敗します。 - フェーズ 3（バックエンド スキャフォールディング）: スキャフォールディング サブエージェントが、最新の Next.js ルート ハンドラと厳密な Zod 検証スキーマの記述を開始します。
- 自己修正ループ: 決定論的な Vitest ハーネスが新しいコードを評価して失敗を返した場合（たとえば、想定される
422検証エラーが500を返した場合）、エージェントはクラッシュしません。目標エラーの出力を反映し、ターゲット ルート ハンドラを再度開き、Zod スキーマのペイロード構造を修正して、テストを再度実行します。終了コード0を取得するまで自律的に反復処理を行います。
入力/スキル/出力の指示コントラクト
使用される入力: リバース エンジニアリングされた仕様アーティファクト（docs/API_Contracts.md、docs/Data_Models.md）。
呼び出されたスキル:
スキル | 説明 |
| 失敗する Vitest 統合スイートを生成します。 |
| ベースの Next.js App Router レイアウトを初期化します。 |
| ローカルの Vitest テストランナー環境を構成します。 |
| 古い Mongoose モデルを MongoDB + Zod スキーマに変換します。 |
| Express ルートを Next.js ルート ハンドラとモジュラー ルートガードに再構築します。 |
生成された出力: 最初の失敗した Vitest スイート、完全に型指定された Zod スキーマ、機能的な Next.js ルート ハンドラ、クリーンで合格したテストスイートの実行。
TDD テストハーネスの自動生成を確認します。
ターゲット バックエンドをスキャフォールディングする自己修正 Reflexion ループのリアルタイム実行を観察します。
6. フェーズ 4 - 最新のフロントエンド（UI コンポーネント）をスキャフォールディングする
バックエンド検証レイヤが完全に強化され、統合テストに合格すると、メイン オーケストレーターはコンテキストを移行して、視覚的なプレゼンテーションを最新化します。命令型のサーバーサイド レンダリング テンプレートは破棄され、アクセシビリティの高いユーティリティ ファーストのコンポーネント デザイン システムが採用されます。
UI インテントをコンポーザブル ビューに変換する
フロントエンド サブエージェントは、CSS を 1 行ずつ変換するのではなく、抽出された「UI インテント」インベントリを読み取り、構造要素を高忠実度の最新の同等要素に直接マッピングします。
入力/スキル/出力の指示コントラクト
入力が消費された: リバース エンジニアリングされたフロントエンドのインベントリ アーティファクト（docs/UI_Inventory.md）。
呼び出されたスキル:
スキル | 説明 |
|
|
生成される出力: アクセシビリティの高い ShadCN UI コンポーネントと Tailwind CSS ユーティリティ レイアウトを使用して構築された、プロダクション レディな Next.js フロントエンド ページ。
最新のフロントエンド ビューレイヤの自律生成を確認します。
7. フェーズ 5 - 検証と敵対的監査
リファクタリング パイプラインは、厳格な品質チェックで終了します。メイン オーケストレーターは、静的コード分析からアクティブなランタイム環境テストに移行し、新しいターゲット アプリケーションを積極的に破壊しようと試み、以前のベースラインとの絶対的な機能の同等性を証明します。
2 つのタブのテストとブラウザの作動
検証フェーズでは、Antigravity の統合されたビジュアル機能と DOM 機能を利用して、フォームを手動でクリックしなくても、成功を自律的に証明します。
- 並列パリティ:
auditing-parityサブエージェントは、ローカル ランナーにレガシーの Express モノリスと最新の Next.js アプリケーションの両方を同時に起動するよう指示し、同じ視覚的プレゼンテーションとデータ レンダリングを確認します。 - 敵対的セキュリティ プロービング: オーケストレーターは
adversarial-verificationサブエージェントを呼び出し、Antigravity ブラウザ サブエージェントを起動します。この専用エージェントは、ブラウザを直接操作します。入力欄への入力、フォームの送信、セキュリティの回帰、セッション Cookie の破損、未処理のエッジケースの調査などを行います。 - 監査証跡の生成: ブラウザ サブエージェントは、セッションの動作の WebP 動画キャプチャを自動的に記録し、検証可能な「作業証明」として最終的な移行レポートに直接添付します。
入力/スキル/出力の指示コントラクト
使用される入力: ローカル ランタイム環境で並行して実行される従来のアプリケーションと最新のアプリケーションの両方。
呼び出されたスキル:
スキル | 説明 |
| 実行時の並列検証チェックを実行します。 |
| 自動ブラウザ操作を使用したロジックの欠陥と機能の回帰のプローブ。 |
生成された出力: 機能パリティの包括的な監査証跡と、完全な成功を確認するブラウザ セッションの録画動画。
自動化されたブラウザ サブエージェントが、最新化されたアプリケーションを積極的に検証していることを確認します。
8. 移行後の本番環境の準備と次のステップ
おめでとうございます！高度な自律型エージェント リファクタリング パイプラインをオーケストレートして、レガシー モノリスをゼロから最新化し、プログレッシブ ディスクロージャー、計画と実行のチェックリスト、自己修復型リフレクション ループなどの汎用性の高いスキルを習得しました。
本番環境へのデプロイの準備
Next.js アプリケーションの検証と監査が完了したら、本番環境への統合に進む準備が整いました。業界標準の次の手順を実装することを検討してください。
- 増分ルーティング: リバース プロキシ（ストラングラー フィグ パターンなど）をデプロイして、レガシー Express アプリから最新のターゲットにトラフィックを段階的にルーティングします。
- SEO の維持: 既存のドメイン オーソリティを保持するために、以前の Express ルートを Next.js の永続的リダイレクト（
_redirects.yaml）にマッピングします。 - データ ストリーミング: 静的データベース シーディングから、厳格な Zod スキーマを使用して実行時に安全に検証されるライブ本番環境データ ストリーミングに移行します。
- オブザーバビリティ: 命令型ロギング ユーティリティを構造化された OpenTelemetry フレームワークに置き換えます。
モダナイゼーションの専門知識を深める
基盤となる完全なコードベース、カスタム スキルの手順、このパイプラインを駆動する理論的根拠については、親記事全体と、他のマルチエージェント オーケストレーション コンテンツをご覧ください。
- 記事: Antigravity とマルチエージェント オーケストレーションを使用してモダナイゼーションを自動化する方法
- Codelab: 並列 Antigravity エージェントを使用して多言語コード監査ツールを構築する
Agentic Builder コミュニティに参加する
これらのユニバーサル リファクタリング パターンとエージェント パイプラインがお役に立てば幸いです。今後のオープンソース スキルパック、詳細な技術コンテンツ、今後のカンファレンスでの講演については、次のプロフェッショナル チャネルで私をフォローして最新情報を入手してください。
- LinkedIn でフォロー: linkedin.com/in/jamesor
- X（Twitter）でフォローする: x.com/JamesOR
ご意見をお聞かせください
エージェント型オーケストレーションの最も魅力的な点は何ですか？
Google Antigravity をご利用いただきありがとうございます。