取り組みの背景
Antigravity でコードを生成・修正する際、AI が提案した変更を正確に把握することはとても重要です。変更内容を誤って適用してしまうと、意図しないバグが混入したり、既存のロジックが壊れてしまうこともあります。
そこで役立つのが Diff View(差分ビュー) です。Antigravity の Diff View は、AI が提案した変更を「追加行(緑)」「削除行(赤)」で視覚的に表示し、変更内容をひと目で確認できる機能です。ここではDiff View の基本操作から実践的な活用テクニックまでを丁寧にご紹介します。
Diff View とは何か
Diff View は、元のコードと AI が提案したコードを 並列(サイドバイサイド)または統合(インライン) で表示する機能です。Git の git diff コマンドに近いイメージですが、Antigravity の Diff View はより直感的で、エディタ上で直接操作できるのが特徴です。
主な表示要素は以下の通りです:
| 表示色 | 意味 |
|---|---|
| 緑(+) | AI が新たに追加するコード |
| 赤(−) | AI が削除するコード |
| グレー | 変更のない既存コード |
Diff View の開き方
チャットパネルからの確認
Antigravity のチャットパネルでコード変更の提案が表示されたとき、提案コードブロックの上部に 「View Diff」 ボタンが表示されます。このボタンをクリックするだけで、Diff View が開きます。
[チャットパネル]
AI: src/utils/formatter.ts を修正しました。
[View Diff] [Apply] [Reject]
ファイルタブからの確認
変更を適用済みのファイルを開いた状態で、タブバー右端の 「Diff」アイコン をクリックすると、最後に AI が加えた変更の差分を再確認できます。これは「うっかり適用してしまった」場合の確認にも役立ちます。
差分を部分的に承認する方法
Antigravity の Diff View の優れた点は、提案全体を一括承認するだけでなく、変更を行単位またはチャンク単位で選択的に承認・却下できることです。
チャンク単位の操作
差分表示内で変更のかたまり(チャンク)ごとに、以下のボタンが表示されます:
- ✓ Accept Chunk — このチャンクの変更を承認
- ✗ Reject Chunk — このチャンクの変更を却下
- ✎ Edit Chunk — このチャンクの内容を手動で編集
たとえば、AI が関数名の変更と処理ロジックの最適化を同時に提案したとき、関数名の変更だけを却下してロジック変更のみを承認する、といった細かな操作が可能です。
行単位の操作
さらに細かく行単位で操作したい場合は、差分表示の各行にカーソルを合わせると表示される 「+」「−」アイコン をクリックして、1行ずつ承認・却下できます。
インラインモードとサイドバイサイドモードの切り替え
Diff View には表示モードが2種類あります。
インラインモード
変更前後のコードを1カラムに混在表示するモードです。ファイル全体の流れを把握しながら差分を確認したいときに向いています。
サイドバイサイドモード
左側に旧コード、右側に新コードを並べて表示するモードです。変更前後の比較がしやすく、複雑な変更を詳細に確認したい場合に適しています。
切り替えは Diff View 右上の 「Inline / Split」トグル から行えます。
複数ファイルにまたがる差分の管理
Antigravity では、1回の AI 操作で複数のファイルが変更されることがあります。このような場合、Diff View の左パネルに 変更ファイル一覧 が表示され、ファイルごとに差分を確認できます。
変更ファイル一覧:
📄 src/components/Header.tsx [+12 / -3]
📄 src/styles/globals.css [+5 / -0]
📄 src/utils/navigation.ts [+8 / -15]
各ファイルをクリックすると、そのファイルの Diff View に切り替わります。ファイル一覧で 「Accept All」 を選択すれば全ファイルの変更を一括承認、「Reject All」 で全却下も可能です。
Diff View を使った実践的なワークフロー
1. 大規模リファクタリング時の変更確認
AIに大規模なリファクタリングを依頼する際は、必ず Diff View で変更内容を精査することをおすすめします。
# プロンプト例
「src/services/ 配下のすべての API 呼び出しを
Axios から fetch API に移行してください」
このような指示では多数のファイルが変更されます。Diff View のファイル一覧から1ファイルずつ確認し、意図しない変更が含まれていないかチェックする習慣をつけると、品質を保ちながら開発速度を上げられます。
2. レビューコメントを追記しながら差分を確認
Diff View では、差分表示の任意の行に コメント(注釈)を追記 できます。「なぜこの変更を採用したか」「後で再確認が必要な箇所」などのメモを残しておくと、チーム開発や後日の振り返りに役立ちます。
// Diff View のコメント追記例
+ const result = await fetchUserData(userId);
// ↑ キャッシュ戦略について後日レビュー予定
3. 変更履歴の確認
Antigravity は AI との会話ごとに差分履歴を保持しています。Diff View の 「History」タブ から過去のセッションで適用した変更を振り返り、特定のバージョンに戻すことも可能です。
よくあるトラブルと対処法
Diff View が開かない
- Antigravity のバージョンが古い場合は最新版にアップデートしてください。
- 変更対象のファイルが
.gitignoreまたは.antigravityignoreに含まれている場合、差分が表示されないことがあります。
差分が大量すぎて確認しきれない
一度に変更するファイル数や行数が多すぎると、差分確認が難しくなります。AI へのプロンプトを分割し、少量の変更を段階的に適用する アプローチが有効です。
# 推奨アプローチ
1回目: 「Header コンポーネントのみリファクタリングしてください」
2回目: 「Footer コンポーネントをリファクタリングしてください」
3回目: 「共通スタイルを整理してください」
意図しない変更を元に戻したい
Diff View で変更を適用後に「やっぱり戻したい」と感じた場合は、Antigravity のチャット履歴から該当メッセージを選択し「Revert」ボタン をクリックすることで、その時点の変更を取り消せます。または Ctrl+Z(Mac: Cmd+Z)の連続入力でも対応できます。
まとめ
Antigravity の Diff View は、AI が提案するコード変更を安全かつ効率的に管理するための重要な機能です。
- チャンク・行単位での選択的承認 で変更を細かく制御できる
- インライン / サイドバイサイドモード を状況に応じて切り替えられる
- 複数ファイルの差分を一元管理 してレビュー作業を効率化できる
- 変更履歴の確認と Revert で安心して AI の提案を試せる
AI が生成するコードをそのまま適用するのではなく、Diff View を通じて変更の意図を理解しながら開発を進める習慣が、より高品質なソフトウェア開発につながります。ぜひ日常の開発ワークフローに取り入れてみてください。