11
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

2026年!初アウトプットをしよう
@dir-yoshida(Yoshida Hirokazu)in株式会社Dirbato

Antigravity と javascript で Hello, World

Last updated at Posted at 2026-01-11

はじめに

生成AIブームに出遅れた感を感じている週末エンジニアが、AIエージェント機能のある開発環境 Google Antigravity とたわむれてみた記事です

前々回はAntigravityのセットアップ、前回はhtmlの表示をしてみたので、今回は少し踏み込んで javascript で処理系のコードを出してもらいます

環境など

  • Windows 11 24H2
  • Google Antigravity

Let's Start

Step1: javascript で Hello, World

では早速始めていきます
最初はjavascriptを動かす土台をつくってもらいます
前回までの学びを活かして少し具体的な依頼文で

htmlに"Hello, javascript"を表示させるjavascriptを最小限のコードで書いて

index.html
<!DOCTYPE html>
<body>
<script>document.body.textContent="Hello, javascript"</script>

うん、清々しいほどに最小限
bodyの閉じタグどころかhtmlタグまで省く最小っぷり
前回はもう少し一般的な感じだったのに今回は全力でやってみたようです
初手からネタを提供してくれるとはAIエージェント恐るべし

ただ、さすがに色々省かれすぎなので

一般的なhtmlとして最低限のタグを盛り込んで

index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello JavaScript</title>
</head>

<body>
    <script>
        document.body.textContent = "Hello, javascript";
    </script>
</body>

</html>

いい感じに土台ができました
これくらい書かれてると安心できます

Step2: オブジェクトとイベントの追加

続いて、オブジェクトとイベントを追加してもらいます
まずはloadイベントを作るのとjavascript部分の分離を依頼

htmlに固定で"Hello, javascript"と表示させて、load時に"Hello, onLoad"に変えて
あとjavascriptは別ファイルにして

出力されたコード（折りたたんでいます）
index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello JavaScript</title>
    <script src="script.js" defer></script>
</head>

<body>
    Hello, javascript
</body>

</html>
script.js
window.addEventListener('load', () => {
    document.body.textContent = "Hello, onLoad";
});

これくらいは朝飯前のようです
さらにオブジェクトを追加しつつイベントも追加してもらうべく

画面にボタンを追加して、クリック時に"Hello, onClick"と表示されるようにして

出力されたコード（折りたたんでいます）
index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello JavaScript</title>
    <script src="script.js" defer></script>
</head>

<body>
    <div id="text">Hello, javascript</div>
    <button id="btn">Click me</button>
</body>

</html>
script.js
window.addEventListener('load', () => {
    const textElement = document.getElementById('text');
    textElement.textContent = "Hello, onLoad";

    const button = document.getElementById('btn');
    button.addEventListener('click', () => {
        textElement.textContent = "Hello, onClick";
    });
});

依頼側も徐々に図々しくなっていきますが、これくらいなら全く問題ないようです
なのでちょっといじわるをして

テキストボックスを追加して、changeとblurを同じように作って

と同じタイミングで動いて片方が無駄になる実装を依頼

出力されたコード（折りたたんでいます）
index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello JavaScript</title>
    <script src="script.js" defer></script>
</head>

<body>
    <div id="text">Hello, javascript</div>
    <button id="btn">Click me</button>
    <input type="text" id="inputBox">
</body>

</html>
script.js
window.addEventListener('load', () => {
    const textElement = document.getElementById('text');
    textElement.textContent = "Hello, onLoad";

    const button = document.getElementById('btn');
    button.addEventListener('click', () => {
        textElement.textContent = "Hello, onClick";
    });

    const inputBox = document.getElementById('inputBox');
    inputBox.addEventListener('change', () => {
        textElement.textContent = "Hello, onChange";
    });
    inputBox.addEventListener('blur', () => {
        textElement.textContent = "Hello, onBlur";
    });
});

コードを出したうえでコンソールに

※ブラウザの仕様上、テキストボックスからフォーカスを外すと change (値が変わっていた場合) と blur の両方が発生する可能性がありますが、イベントの発生順序やタイミングにより、最後に実行された方の文字列が画面に残ります（通常は両方とも即座に発生し、結果的にどちらかの文字列が表示されます）。

と気遣いのメッセージが表示される
これくらいのことはお見通しのようです

素直に降参して求めてるコードに変えてもらいます

changeをinputに変えて

出力されたコード（折りたたんでいます）
script.js
    const inputBox = document.getElementById('inputBox');
    inputBox.addEventListener('input', () => {
        textElement.textContent = "Hello, onInput";
    });

無事に変更されました

Step3: リファクタと共通化

入門レベルのオブジェクトのイベントの追加はなんなくこなせるようなので
もう1段難易度を上げてリファクタリングや共通化をしてもらおうと思います

まずは個人的にgetElementByIdよりquerySelectorの方が好きなので

getElementById を querySelector に変更して

出力されたコード（折りたたんでいます）
script.js
window.addEventListener('load', () => {
    const textElement = document.querySelector('#text');
    textElement.textContent = "Hello, onLoad";

    const button = document.querySelector('#btn');
    button.addEventListener('click', () => {
        textElement.textContent = "Hello, onClick";
    });

    const inputBox = document.querySelector('#inputBox');
    inputBox.addEventListener('input', () => {
        textElement.textContent = "Hello, onInput";
    });
    inputBox.addEventListener('blur', () => {
        textElement.textContent = "Hello, onBlur";
    });
});

ちゃんとid名からセレクタへ変更して、変えるために#付けましたよとコンソールに表示される
この程度ではひっかかってくれそうにもないです

気を取り直して

テキストを置き換える処理を共通化して

出力されたコード（折りたたんでいます）
script.js
window.addEventListener('load', () => {
    const textElement = document.querySelector('#text');
    
    // 共通化
    const updateText = (text) => {
        textElement.textContent = text;
    };
    updateText("Hello, onLoad"); // 初期表示
    const button = document.querySelector('#btn');
    button.addEventListener('click', () => {
        updateText("Hello, onClick");
    });
    const inputBox = document.querySelector('#inputBox');
    inputBox.addEventListener('input', () => {
        updateText("Hello, onInput");
    });
    inputBox.addEventListener('blur', () => {
        updateText("Hello, onBlur");
    });
});

リファクタリングを依頼しておいてなんですが構成が変わると一通り見直さないと不安になります
ただ、ありがたいことに思った通りのコードを出してくれていました
せっかくなのでもう一押し

Hello, も共通関数に含めて、全体的にコメントを追加して

最終的に出来上がったコードがこちら

index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello JavaScript</title>
    <script src="script.js" defer></script>
</head>

<body>
    <div id="text">Hello, javascript</div>
    <button id="btn">Click me</button>
    <input type="text" id="inputBox">
</body>

</html>
script.js
// ページ読み込み完了時に実行されるイベントリスナー
window.addEventListener('load', () => {
    // 表示対象の要素を取得
    const textElement = document.querySelector('#text');

    /**
     * テキストを更新する共通関数
     * 指定されたテキストの前に "Hello, " を付与して表示する
     * @param {string} suffix - 表示するメッセージの接尾辞
     */
    const updateText = (suffix) => {
        textElement.textContent = "Hello, " + suffix;
    };

    // 初期表示の更新
    updateText("onLoad");

    // ボタンクリック時のイベントリスナー設定
    const button = document.querySelector('#btn');
    button.addEventListener('click', () => {
        updateText("onClick");
    });

    // テキストボックスのイベントリスナー設定
    const inputBox = document.querySelector('#inputBox');

    // 入力中のイベント（リアルタイム反映）
    inputBox.addEventListener('input', () => {
        updateText("onInput");
    });

    // フォーカスが外れた時のイベント
    inputBox.addEventListener('blur', () => {
        updateText("onBlur");
    });
});

入門としては文句のないクオリティで出力してくれました

学び

  • 入門レベルの追加、変更、リファクタリング、共通化はなんなくこなしてくれる
  • そのうえで注意点も教えてくれる
  • コメントもしっかり付けてくれる
  • AIエージェントの加減は気分次第？
  • チェックが大変
  • 本記事は個人の学習メモであり、所属組織の公式見解ではありません
11
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?