Google Antigravity　がすごいらしい

　タイトルの通り。少し調べると、

Google Antigravityは、単なる「コード補完ツール」ではなく、「指示を出せば自律的に働いてくれるAIエージェントたちの指揮所（Mission Control）」という全く新しいコンセプトの開発環境です。これまでのエディタとの最大の違いは、AIがあなたの隣でコードを書くのではなく、「あなたの代わりにアプリを作り、テストし、ブラウザで動作確認まで済ませて報告してくれる」点にあります。

とのこと（Geminiに聞いたので、そのつもりで） 。※脆弱性あり　参考リンク

　実際に使ってみた（VSCode上で動いている？参考リンク）。R8/1/2現在、英語のみっぽいので、「なんとなく」使ってみた（子どもに教えてもらいながらやってみたので、正直一人でするのは難しいそう、という印象）。ちなみに、完成したアプリは下の図。



「回答はすべて日本語でしてください。」と最初に言えば、あとは日本語で返ってくる。

1/4、1/2やったことを思い出しながら、使い方を整理することに。曖昧な部分も含め、直接Google Antigravityに問うてみたら・・・・

Antigravityでアプリを作る完全な流れ

1. 作りたいアプリを説明する

例:「TODOリストアプリを作って」

↓

2. 実装計画(仕様書)の確認

  • 私が「こういう機能を作りますよ」という計画書を英語で提示します
  • ここは英語が分からなくても大丈夫! 「そのまま進めて」「OK」などと言っていただければ次に進みます
  • もし日本語で読みたい場合は「日本語で説明して」と言っていただければ翻訳します

↓

3. コードの作成

  • 必要なファイルを自動で作成します
  • この時、プロジェクトの種類によって以下のようなことが起こります:

シンプルなアプリの場合:

  • HTML, CSS, JavaScriptだけで作成
  • すぐにブラウザで開けます

本格的なアプリの場合(TODOリストやカレンダーなど):

  • TypeScriptを使用(お子さんの説明通り!型定義ができるJavaScriptの進化版)
  • Node.jsが必要(JavaScriptをバックエンドでも使えるようにするツール)
  • Reactなどのフレームワークを使うこともあります

↓

4. 必要なツールのインストール(必要な場合のみ)

覚えていらっしゃる通り、以下のようなことが起こります:

  • 「Node.jsをインストールしてください」という指示が出る
  • 私がコマンドを提案するので、それを承認していただく
  • npm install
    などのコマンドで必要なパッケージをインストール

ここでのポイント:

  • コマンドが表示されたら「実行」や「承認」ボタンを押す
  • 少し時間がかかることがありますが、待っていれば完了します

↓

5. 開発サーバーの起動

  • npm run dev
     などのコマンドでサーバーを起動
  • ブラウザで 
    http://localhost:3000
     などを開く
  • アプリが動いているのを確認!

↓

6. 修正・改善のリクエスト

  • 「色を変えて」「機能を追加して」など自由に要望を伝える
  • 私が修正します

↓

7. 完成!

 　あと、

「Reactなどのフレームワークを使うこともあります」Reactのことも言ってたけど、よくわからないので教えて。あと、アルファベット３文字から５文字くらいの用語、ビュー？なんか読み方がわからなかったのも使っているときによく出てきたけれど、これだけの情報でわかりますか？

と聞いたら、山程の候補を出しつつ、

「ビュー」について

おそらく Vue (ビュー/ヴュー) のことだと思います!

もし違う場合、以下の可能性もあります:

  • View (ビュー): 画面・表示のこと(一般用語)
  • Vite (ヴィート/ビート): 開発サーバーを起動するツール

 とまとめてくれ、Viteだったことを思い出した！

　まだまだいろいろ夜遅くまで教えてくれたことはたくさんあるけれど、一旦ここまでにして、後ほど追記予定。具体的につくったアプリのこと、作ったアプリの汎用化の方法などまで作りたいです。1/4、19:28

【参考リンク】

・ Googleが発表したAIエディタ、Antigravityを触ってみた。~指示・実装・動作確認~

・Google Antigravity の概要

・Download Google Antigravity　for Windows

・Windows 11 に Node.js をインストールしよう

おまけ。他にも色々専門用語が出てきたけれど、理解できていないので、覚えてる限りここにメモ。ついでに簡単に調べてあとで確認できるようにしておく。

・React・・・JavaScriptのUI構築に特化したライブラリ（フレームワークでない）　参考リンク

・（アプリケーション）フレームワーク・・・Webアプリやシステム開発に必要な共通機能が用意されたもの（Next.jsなど）　参考リンク

※フレームワークに関しては、サーバー側（Webアプリ側）とクライアント側（ブラウザ側）、フレームワーク（あらかじめ骨組みがある）とライブラリ（必要に応じて使う）等、整理すべき点があることがわかった。実際に作ってみるなどして、理解を深めたい。　参考（「自由度とカスタマイズ性」を重視するなら React、「表示速度とSEO（集客）」を重視するなら Next.js とのこと）

・Node.js・・・JavaScriptブラウザの外（パソコン本体やサーバ上）でも動かせるようにしたツール。参考に調べたものを以下に示す（Geminiに聞いたので間違ってるかも）


※アプリをAntigravityで作っているとき、「Node.jsがない」とインストールが必要であった

・Vite・・・Web開発のための、超高速な『開発サポートツール』（ビルドツール）

　Antigravityは、こちらの要望にAIエージェントが考え、上記のような様々なプラットフォームやアプリなどを駆使して実行可能なアプリを作成してくれる開発プラットフォームであるということがわかった（気がする）。

・ポートフォワードコマンド・・・あるポート宛てのネットワーク通信を別のポートや別の機器へ転送する機能（ポートフォワーディング）を実現するためのコマンド群のこと

・Docker（ドッカー）・・・アプリケーションとその実行環境（コード、ライブラリ、システムツールなど）を「コンテナ」と呼ばれる軽量なパッケージにまとめて、どこでも同じように動作させるためのプラットフォーム・仮想化技術

【予告：以下に、Geminiが作ってくれたプロンプトを実際に使ってみる予定】※以下に示す

 練習用プロジェクト：世界に一つだけの「デジタル名刺」

では、実際にAntigravityのエージェントに指示を出すための、具体的でワクワクする練習用プロンプトを作りました。これを使って、**「仕様書→実装→公開」**の流れを体験してみてください。

【練習用プロンプト】（これをAntigravityに貼り付けてみてください）

「私専用の、シンプルで美しい『デジタル名刺（自己紹介サイト）』を作ってください。

  1. プロフィール画像（仮の丸いアイコンでOK）、名前、趣味、SNSリンク（GitHubとX）を載せてください。

  2. デザインは、Appleの公式サイトのような、白を基調とした清潔感のあるスタイルに。

  3. PCでもスマホでも綺麗に見えるように（レスポンシブ対応）。

まずは**構成案（仕様書）**を教えてください。内容を確認してから実装をお願いします。」

3. この後の展開（体験できること）

このプロンプトを投げると、以下のことが次々と起こります。

  1. 仕様書が届く: 「プロフィールセクション、リンク集、フッター…という構成で良いですか？」と聞かれます。

  2. Viteが火を噴く: あなたが「OK」を出すと、エージェントがNext.jsのコードを書き、右側のプレビュー画面（Vite）にあなたの名刺が立ち上がります。

  3. GitHubに刻まれる: 完成すると、エージェントが「Initial Commit（最初の保存）」としてGitHubにコードを送ります。

  4. Vercelで世界デビュー: 最後に「デプロイ完了！URLは https://... です」と報告が来ます。

このブログの人気の投稿

Webアプリ制作　作品集＆参考リンク

 【 オンラインプログラミング環境　ビットアロー（Bit Arrow） 】←12/12～こちら（・ｘ・） ・ 情報システムを作ってみよう 　・・・サーバ・クライアントシステムを体験（chat） 　－ JavaScript命令一覧 　※通常のJavaScriptとは異なります ※ 1/9授業の課題提出はコチラ ※12/12授業の課題提出はコチラ ・ python言語を使ってみよう 　・・・ 画像表示・画像認識を体験（ カスケード分類器 ） ※以下は過去の内容 【 Monaca Education 】←ここからログインしよう（・ｘ・） ・ おすすめ恋愛マンガ・アニメ・小説 ・ カップラーメンタイマー(2分版) ・ 私のおすすめ！和歌山ラーメン 【参考リンク】 ・ 【Javascript】簡単なゲームを作る【HTML5】 ・・・おすすめ！ ・ Chat GPTでテキストアドベンチャーゲームを作ってみよう → できたやつ ・ テキストアドベンチャーゲームを作るのに最適なプログラミング言語は何ですか？ ・ coffee_talkのようなアドベンチャーゲームを作りたいのですが、プログラミングの壁に当たってしまいました。選択肢と文章、瞬き程度の僅かな動きを書くには、どんな言語が適していますか？ ・ JavaScriptとCSSによるアドベンチャーゲームの作成 ・ 純粋な JavaScript を使ったブロック崩しゲーム ・ Little Strange Software ・・・スマホアプリの開発を行うブログ ・ JavaScript で本格的なノベルゲームを作ってみる #1 おまけ。 ・HTMLの「注釈」には主に以下の2つの意味があります。1つは、コード内の説明を記述するためのコメント（ <!-- ... --> ）です。もう1つは、文章中の注釈を視覚的に示すためのタグ（ <small> や <sup> など）です。コメントはブラウザに表示されず、開発者向けのメモとして使われます。一方、 small や sup タグは、ウェブサイト上で注釈として表示されます。 ・JavaScriptでは、一行コメントには「//」を使用します。 コメント記号「//」を行の先頭に追加することで、 その記号が書かれた場所から行の終わりまでがすべて「コメント」...
続きを読む

情報処理2級　検定対策リンク（・　ｘ　・）

  １．ハードウェアの構成 ２．ソフトウェアに関する知識 ３．画像容量の計算 ４．ディレクトリとファイル ５．関連知識 ５'．2進数の計算 データベースソフトウェアの活用 ※実際にデータベース言語「SQL」を体験したい人はこちら→ dokoQL ※実際の検定っぽく練習したい人はこちら→ 実教Web模擬試験システム ※ ビジネス情報２級用語集 （一部出ない用語も含む） ※ ビジネス情報２級用語集R4版（フラッシュ）
続きを読む

【情報探究：３学期】情報システム、システム設計、データベース、SQL・・・

  ・ ITパスポート 過去問道場 ・ 基本情報技術者 過去問道場 　　　 令和7年度基本情報技術者試験公開問題解説 ・・・ やるべき or やる必要がない過去問の見分け方「厳選5題」過去問と解説シリーズ ・ 【IPA】情報処理技術者試験の再編について【2027年度】 　 参考１ 　 参考２ 20251223情報探究課題１「情報システム」 「データ」と「情報」はどこが違う？簡潔に説明せよ。 情報システムとは何か？システムの意味が分かるように説明せよ。 情報システムの具体例を一つ挙げ、その情報システムの特徴を簡単に説明せよ。 「情報システム設計」と「システム設計」とは同じなのか？違うのか？違うとしたら何が違うのか？簡単に説明せよ。 20251223情報探究課題２【システム設計】 システム設計するなら、「良いシステム」にしたいですね。「良いシステム」とは？「疎結合」「高凝集」という言葉を用いて、簡単に説明せよ。 システム設計とデータベースとの関係を簡潔に述べよ。
続きを読む