アイデアをファイルの形にするのは、エージェントの得意分野です。まずはここから始めましょう。

アイデアを一、二文で伝えれば、エージェントがファイルを書いてくれます。保存される前に、中身を確認できます。

最初の版で思いどおりになることは、まずありません。直してもらうときは、「README.md に Getting started の節を追加して」のように、どのファイルかも伝えましょう。伝えないと、エージェントが違うファイルを直してしまうことがあります。

やってみる

1. プロジェクトはまだ空です。入力するを押して Enter。アイデアを自分の言葉で伝えてもかまいません。
2. 差分を読んで Yes を選びます。実行を押すと、README.md がページとして表示されます。
3. README.md の直したいところをひとつ頼みます。エディタタブで開いて、自分で書き換えてもかまいません。
4. エージェントが違うファイルを触ろうとしたら No を選び、次のメッセージでファイル名を伝えます。

エージェントはコードを読んで、何をしているのかを説明してくれます。ほかの人が書いたプロジェクトをざっとつかみたいときに便利です。

ファイルは @ で添付します。そうすると、エージェントは似たようなページの記憶に頼らず、そのファイルを読んで答えます。

答えはうのみにせず、ページを動かして確かめましょう。

やってみる

1. プロジェクトにあるのは index.html だけです。中身はエディタタブで見られます。
2. 入力するを押して Enter。エージェントは答えるだけで、ファイルには手を付けません。
3. 実行を押して、金額を入れてボタンをクリックしてみましょう。エージェントの説明どおりに動きましたか？
4. よくわからないところや、間違っていそうなところがあれば、「チップを表示しているのはどの行？」のように聞いてみましょう。

エージェントは、いまあるファイルに手を加えることもできます。良い変更は小さく、頼んだところ以外には触れません。

ファイルの変え方は二通りあります。

エージェントのツール	すること	差分に出るもの
Update	数行だけ置き換える	増えた数行だけ。ほかはそのまま
Write	ファイルを丸ごと書き直す	全部の行。変わっていない行も出る

小さな編集なら読むのも楽で、ページのほかの部分をうっかり壊すこともありません。プロンプトの「ほかは何も変えないで」は、そのための一言です。

やってみる

1. 入力するを押して Enter。
2. 選ぶ前に差分を読みます。1、2 行増えるだけで、消える行はないはずです。ファイルを丸ごと書き直していたら No を選び、「ボタンを足すだけにして」と伝えましょう。
3. 実行を押します。金額に 200 と入れて 20% をクリックすると、チップは 40。15% なら 30 のままのはずです。

エージェントはバグを見つけて直すこともできます。バグがどこにあるかわからなくても、何がおかしいかさえ伝えれば大丈夫です。

良いバグ報告には、次の二つが入っています。

項目	例
見えたこと	2 + 3 が 23 になる
正しい結果	5

「動かない」だけでは、エージェントは何を探せばいいのかわかりません。「5 ではなく 23 になる」と伝えれば、すぐにバグにたどり着けます。

やってみる

1. 実行を押し、2 と 3 を入れて Add をクリックします。まずは自分の目でバグを確かめましょう。
2. 入力するを押して Enter。エージェントが index.html を読んで、直し方を提案します。
3. 差分を読みます。良い修正なら、変わるのは 1、2 行だけです。Yes を選びます。
4. 実行を押して、もう一度 2 + 3 を試します。まだおかしければ、いま見えていることをエージェントに伝えましょう。

今度は小さなページをひとつ、自分の力で作ってみます。これまでのラボでやったことを使いましょう。

手順	やり方
計画	shift+tab で plan mode にしてから頼む
書く	計画を承認し、差分を読んで Yes
確かめる	実行して、+ と Reset をクリック
直す	おかしな結果と正しい結果を伝える
変える	小さな変更をひとつ頼む。ファイル名を書き、「ほかは何も変えないで」と添える

やってみる

1. プロジェクトはまだ空です。ステータス行に plan mode と出るまで shift+tab を押します。
2. 入力するを押して Enter。計画を読んだら、Yes, and manually approve edits を選びます。
3. index.html の差分を読んでから Yes を選びます。
4. 実行を押し、+ を 3 回、続けて Reset をクリックします。
5. おかしなところがあれば、見えたことをエージェントに伝えます。そのあと、− ボタンを足すなど、自分で考えた変更をひとつ頼んでみましょう。