自分のパソコンのファイルを直接書き換えてくれる AI を、AI エージェントと呼びます。この記事では、エージェントを入れて、小さな Web ページを作ってもらいます。

エージェントは、頼めば多くのコードを短い時間で書きます。そのぶん、頼み方があいまいだと頼んでいないことまでしますし、書いたものが間違っていることもあります。そこで、次の流れで進めます。

  1. 頼む前に、戻れる地点を作る
  2. 変えてほしいことと、してほしくないことを書いて頼む
  3. 変わった所を見て、実際に動かして確かめる
  4. よければ残し、だめなら戻してやり直す

この記事では、エージェントを入れて、この流れを一度通すところまで進めます。

チャットの AI とエージェントの違い

ChatGPT などのチャットの画面でも、AI にコードを書いてもらえます。ただ、チャットの AI は自分のパソコンの中を見られません。今あるファイルを直してもらうには、ファイルの中身を自分で貼り、返ってきたコードを自分でファイルに写し、動かして確かめ、うまくいかなければエラーを貼って聞き直します。ファイルが1つなら何とかなりますが、アプリになると何十個にもなり、手間がかかります。

エージェント（コーディングエージェントとも呼びます）は、この貼る・写す・動かすの部分を自分で行います。自分のパソコンのフォルダを作業場所に選ぶと、そのフォルダのファイルを読み、書き換え、ターミナル（文字で命令を打つ画面）の命令を動かして結果を確かめ、うまくいかなければ直す、ということをくり返します。

人が「見出しを青にして」と頼むと、エージェントがファイルを読み、書き換え、動かして確かめ、結果を報告する。人は変わった行を見て、よければ記録する、という流れの図

AI がファイルを読める仕組み

ChatGPT などの中で動く AI（大規模言語モデル、LLM）がしているのは、文章の続きを予想して文字を出すことです。それでもファイルを読んだり書き換えたりできるのは、AI と自分のパソコンのあいだに、エージェントのアプリが入っているからです。

左に AI のモデル、真ん中にエージェントのアプリ、右に自分のパソコンのファイルとターミナルがある。モデルが「index.html を読みたい」と文字で出すと、アプリが実際にファイルを読み、中身をモデルに返す。モデルが「この行をこう書き換えたい」と出すと、アプリがファイルを書き換える

  1. モデルが、答えの代わりに「index.html を読みたい」という決まった形の文字を出す
  2. アプリがそれを受け取り、実際に index.html を読んで、中身をモデルに渡す
  3. モデルは中身を読んだうえで、「4行目をこう書き換えたい」と出す。アプリがファイルを書き換える
  4. 書き換えたあと、「この命令を動かしたい」と出せば、アプリが動かして結果をモデルに渡す

この仕組みから分かることが2つあります。1つは、エージェントが読めるのは選んだフォルダの中が中心だということです。もう1つは、エージェントが書くコードも、チャットの AI と同じモデルが予想して出したものだということです。AI はもっともらしく間違えることがあり、それはエージェントでも起きます。ファイルを自分で書き換えるぶん、間違いがそのままファイルに入ります。変わった所を人が確かめる必要があるのは、このためです。

Codex のデスクトップアプリを入れる

AI エージェントには、ターミナルで動くものと、普通のアプリとして動くものがあります。この記事では、OpenAI の Codex のデスクトップアプリを使います。ChatGPT の無料プランのアカウントで使えることと、ターミナルの命令を覚えなくても始められることが理由です。無料プランには使える量の上限があり、上限に達するとしばらく使えなくなります。そのときは、時間をおいてからもう一度試します。

Codex は、ChatGPT のデスクトップアプリの中にあります。公式の説明では、手順は次の順番です。

  1. ChatGPT のデスクトップアプリを入れる
  2. アプリを開き、ChatGPT のアカウントでサインインする
  3. 作業する場所（フォルダ）を選ぶ
  4. 最初の頼みごとを送る

Windows の場合

Microsoft Store から ChatGPT のアプリを入れます。ターミナルが使える人は、PowerShell で次の1行でも入れられます。

winget install --id 9PLM9XGG6VKS -s msstore

winget は Windows でアプリを入れる命令、--id は入れるアプリの識別番号、-s msstore は Microsoft Store から入れるという指定です。公式の説明では、WSL（Windows の中で Linux を動かす仕組み）は要りません。

Mac の場合

公式の Codex のページにある Download for macOS (Apple Silicon) のボタンから、.dmg のファイルをダウンロードします。ファイルを開き、アプリを「アプリケーション」のフォルダにドラッグします。

サインインする

アプリを開くとサインインの画面が出ます。ChatGPT のアカウントでサインインします。アカウントがなければ、そのときに無料で作れます。API キーでも使えますが、一部の機能が使えなくなると公式に書かれているので、ChatGPT のアカウントを使います。サインインしたら、アプリの中で ChatGPT と Codex を切り替えられる所を探して、Codex を選びます。

Git と Node.js も入れておく

Codex のアプリには、変わった所を見るための画面（review パネル）があります。Windows の公式の説明では、これを使うには Git が要ります。Git（ファイルの変更を記録して、前の状態に戻せるようにする道具）は、あとで戻れる地点を作るときにも使います。公式サイト git-scm.com のインストーラーを入れます。

Node.js は、JavaScript（Web ページに動きを付けるプログラムの言葉）を、ブラウザの外、つまり自分のパソコンの上で動かす道具です。エージェントに Web アプリを作ってもらうと、動かして確かめるために Node.js の上で動く道具を使うことがよくあります。この記事の課題では使いませんが、入っていないとあとでエージェントが止まることがあるので、入れておきます。

公式サイトのダウンロードのページを開き、自分の OS 用のインストーラーを選びます。版がいくつか選べるときは、LTS（長く手入れが続けられる版）と書かれたものを選びます。入れ終わったら、ターミナルで次の1行を打ちます。

node -v

v24.14.1 のように、v で始まる数字が出れば入っています。数字は入れた時期によって違います。

ほかのエージェント

ターミナルで動くエージェントもあります。Google の Antigravity CLI は、個人の Google アカウントで使える無料のプランがあり、agy と打って起動します。Claude Code（Anthropic）と Codex CLI（Codex のターミナル版）は有料のプランが要ります。どれを使っても、頼み方と確かめ方はこの記事と同じです。入れ方は、それぞれの公式のページを見てください。

練習用のフォルダを作業場所にする

エージェントは、選んだフォルダを作業場所にします。ホームのフォルダなど、関係ないファイルがたくさんある場所を選ぶと、関係ないファイルまで読んだり書き換えたりするおそれがあります。そこで、練習用に空のフォルダを作ります。ドキュメントなど分かりやすい場所に、agent-practice という名前のフォルダを作ります。

Codex のアプリで、作業する場所として agent-practice を選びます。公式の説明では、チャットを始める、プロジェクトを作る、フォルダを開く、のどれかで場所を決めます。プロジェクトを作る場合は、プロジェクトのメニューの Edit project から Add folder でフォルダを足します。ボタンの名前や置かれている場所はアプリの版によって変わることがあります。見つからないときは、画面の中のフォルダ、プロジェクト、追加に近い言葉を探します。

頼みごとを書く欄の下に、権限を切り替える所があります。ここを Ask for approval にします。ファイルの編集やインターネットの利用の前に確認が出る設定です。公式も、まずこの設定から始めることをすすめています。Full access（パソコンの全部のファイルとインターネットを制限なく使う設定）は、データが消えるおそれがあるので選びません。頼みごとは、この欄に日本語で書いて送ります。

ページを1つ作ってもらう

空のフォルダなので、まずページを作ってもらいます。次の文を送ります。

このフォルダに index.html を1つ作ってください。
「今日のひとこと」というボタンがあり、押すと、用意した5つの言葉から1つがランダムに選ばれて、ボタンの下に表示されるページにします。
HTML・CSS・JavaScript は、index.html の1つのファイルにまとめてください。
終わったら、作ったファイルと、ブラウザでの確かめ方を教えてください。

画面には、エージェントが何をしているかが順に出ます。ファイルを作るときは、ファイルの名前や作った内容が出ます（出方はアプリの版によって変わります）。上で説明した「モデルが書きたいと出し、アプリが書く」が、目の前で起きています。

権限を Ask for approval にしていると、作業しているフォルダの外のファイルを編集するときや、インターネットを使うときに、先に許可を求める確認が出ます。何をしようとしているのかを読んでから選びます。今回は index.html を作るだけなので、このフォルダの中のファイルを作る操作です。フォルダの外のファイルや、消す操作が出てきたら、許可しません。

Ask for approval でも、作業しているフォルダの中でファイルを作ったり書き換えたりする操作は、確認なしで進むことがあります。確認が出ないからといって、確かめなくてよいわけではありません。頼む前に戻れる地点を作り、終わったあとに変わった所を見る流れは、確認が出ても出なくても同じです。

エージェントが「作りました」と報告したら、agent-practice フォルダに index.html が増えていることを確かめ、ブラウザで開きます。エクスプローラー（Mac は Finder）で index.html をダブルクリックすると開きます。ボタンを何回か押して、言葉が変わることを確かめます。同じ言葉が続けて出ることもあります。5つの中からでたらめに選んでいるからです。報告に「できました」と書いてあっても、それはエージェントがそう判断したというだけなので、自分の目で確かめます。

質問だけしてみる

ファイルを変えずに、作ったものについて聞いてみます。

index.html の中で、言葉をランダムに選んでいるのはどの行ですか。1行ずつ説明してください。ファイルは変更しないでください。

エージェントは index.html を読んで答えます。画面に、ファイルを読んだことを示す表示が出ます。書くコードは毎回違いますが、たいてい次のような行が見つかります。

const index = Math.floor(Math.random() * words.length);

説明は、たとえば次のような内容になります。

  • Math.random() は、0 以上 1 未満の数（0.37 など）をでたらめに1つ返す
  • それに words.length（言葉の数。ここでは 5）を掛けると、0 以上 5 未満の数（1.85 など）になる
  • Math.floor( ) は小数点より下を切り捨てる。1.85 なら 1 になる
  • 結果として 0・1・2・3・4 のどれかになる。並びの番号は 0 から数えるので、5つの言葉のどれかを取り出せる

自分で一から書けなくても、1行ずつ説明を聞いて「並びの番号をでたらめに1つ作っている」と言えれば、この行は読めています。エージェントと作るときは、書いてもらった行を説明できるところまで読むことをくり返します。読めない行を残したまま作り進めると、あとで動かなくなったときにどこを直せばよいか分からなくなります。

戻れる地点を作ってから、1つ直してもらう

戻れる地点を作る

今あるページを直してもらう前に、今の状態に戻れるようにしておきます。エージェントの変更が気に入らなかったときに戻すためです。

Git（ファイルの変更を記録して、前の状態に戻せるようにする道具）を使ったことがある人は、ターミナルを開いて agent-practice フォルダに移動し、次のように打ちます。

git init
git add .
git commit -m "エージェントに直してもらう前"

git init は、このフォルダで Git を使い始める命令で、1回打てば足ります。Git を使ったことがない人は、エクスプローラー（Mac は Finder）で agent-practice フォルダをコピーして、agent-practice-backup のような名前で横に置いておけば、戻れる地点になります。

頼む

次の文を送ります。

ボタンにマウスを乗せたときに、ボタンの背景の色が少し濃くなるようにしてください。
変えるのは CSS の部分だけにしてください。終わったら、どこをどう変えたかを教えてください。

「CSS の部分だけ」と範囲を決め、「どこをどう変えたか」の報告を頼んでいます。範囲を決めると確かめる所が少なくなります。報告を頼むと、変わった所を見る前に、何が起きたかの見当が付きます。

変わった所を見る

エージェントは、ファイルを書き換えたあと、変わった所を画面に出します。Codex のアプリには、変わったファイルと変わった行を見る画面（review パネル）があります。Windows の公式の説明では、これを使うために Git が要ります。開き方はアプリの版によって変わるので、画面の中で変更や review に近い言葉を探してください。消した行の頭に -、足した行の頭に + が付いていたり、色が付いていたりします。たとえば次のような行が足されます。

button:hover {
  background-color: #D0DCFF;
}

:hover（ホバー）は、マウスが乗っているあいだだけ、という意味の書き方です。知らない書き方が出てきたら、そのままにせず、エージェントに聞きます。

:hover とは何ですか。今回の変更のどこで使っていますか。

Git で戻れる地点を作った人は、VS Code のソース管理の画面でも、変わったファイルと変わった行を、前と今で並べて見られます。最後に、ブラウザで index.html を再読み込みして、ボタンにマウスを乗せます。色が変わればできています。

戻してみる

うまくいったときも、一度戻すところまで練習しておきます。失敗してから戻し方を調べると、慌ててほかのファイルまで消してしまうことがあるからです。

  • Git で戻れる地点を作った人は、git restore . と打ちます。. は全部のファイルを指し、最後にコミットした状態に戻ります。エージェントが新しいファイルを作っていた場合は、git restore では消えません。git status で Untracked files に出ているファイルを、エクスプローラー（Mac は Finder）で消してください
  • フォルダをコピーした人は、エージェントを終えてから、agent-practice の中の index.html を、backup のほうの index.html で置きかえます
  • Codex のアプリに、変更を戻す操作が用意されていることがあります。公式の取得できた説明には書かれていなかったので、見つけたときは、ファイルが戻ったかを自分で確かめてください

どのエージェントでも確実に戻せるのは、Git かフォルダのコピーです。

戻したら、ブラウザで再読み込みして、マウスを乗せても色が変わらない元の状態になったことを確かめます。そのあと、もう一度同じことを頼んでおきます。

気を付けること

エージェントは、自分のパソコンの中で命令を動かします。チャットの AI よりできることが多いぶん、気を付けることもあります。

  • 許可を求められたら、何をしようとしているかを読んでから選びます。ファイルやフォルダを消す命令（rm・Remove-Item・del など）や、作業しているフォルダの外を触る命令は、意味が分からなければ許可しません
  • パスワードや API キー（AI などのサービスを使うための合言葉）を、頼みごとの文に書きません。書いた文は、AI のモデルを動かしている会社に送られます
  • エージェントが「できました」と言っても、自分で動かして確かめます
  • 頼む前に戻れる地点を作ります。これで、たいていの失敗は取り返せます
  • 同じ所で2回、3回と直してもらってもうまくいかないときは、頼み続けずに戻れる地点まで戻し、頼み方を変えてやり直します。会話も新しいチャットにすると、前の失敗を引きずりません（アプリの New chat で始められます）

課題：機能を1つ足す

agent-practice のページに、エージェントと一緒に機能を1つ足します。

  • ボタンを押した回数を、ボタンの近くに「◯回押しました」と表示する
  • 今ある「今日のひとこと」の動きは、そのまま動く

進め方は、戻れる地点を作る、エージェントに頼む（足したいこと・変えてほしくないこと・終わったら何を報告してほしいかを書く）、変わった所を見る、ブラウザで再読み込みして確かめる、気に入らなければ戻して頼み方を変える、の順です。

確かめ方は次の3つです。

  1. ボタンを押すたびに、回数が1ずつ増える
  2. 押すたびに、今日のひとことも前と同じように変わる
  3. 回数を数えている行を指して、何をしているかを自分の言葉で説明できる

頼む文の例です。

index.html の「今日のひとこと」のボタンに、押した回数を数える機能を足してください。
押すたびに、ボタンの下に「3回押しました」のように回数を表示します。

- 変えてよいのは index.html だけです
- 今ある、言葉をランダムに表示する動きは変えないでください
- 終わったら、足した行をそれぞれ説明してください

エージェントが書くコードは毎回違いますが、たとえば次のような行が足されます。

let count = 0;

button.addEventListener("click", () => {
  count = count + 1;
  countText.textContent = count + "回押しました";
});

let count = 0; で、回数を入れておく箱（変数）を作り、最初は 0 を入れています。addEventListener("click", ...) は、ボタンが押されたときにする動きを登録する書き方です。押されるたびに count に 1 を足し、その数を画面の文字に書き込んでいます。言葉を選ぶ動きと回数を数える動きを、1つの addEventListener にまとめるエージェントもあれば、2つに分けるエージェントもあります。確かめ方の 1 と 2 が通れば動いています。

すでにあるフォルダで使うとき

空のフォルダの代わりに、すでにあるアプリやサイトのフォルダを作業場所にしても、流れは同じです。違うのは、ファイルが多いぶん、どこを変えてよいかを頼む文に書かないと、関係ないファイルまで書き換えられやすくなることです。変わった所も増えるので、確かめるのにも時間がかかります。

参考にした資料