まずは要件をすり合わせる

このレッスンでは、開発者がふだん踏む手順にそって、小さなアプリをひとつ作ります。

いまのアイデアは一行だけ。このまま「作って」と頼むと、足りないところはエージェントが全部あてずっぽうで埋めてしまいます。まずは話し合って、決まったことを書き残しておきましょう。

話し合うだけなら plan モード (shift+tab) も使えます。このモードのあいだ、エージェントはファイルを変更できません。このラボでは代わりに、エージェントのほうから質問してもらいます。

やってみる

入力するを押して Enter を押すと、エージェントがターミナルで質問を三つしてきます。質問が来なければ、短い質問を 3 つしてください。 ともう一度頼みましょう。
質問に答えたら、requirements.md を書いてもらいます。やることとやらないことを、はっきり分けて伝えましょう。

todo を追加し、完了にチェックし、削除できて、リストはブラウザの localStorage に保存。ログインと同期はいまは不要。requirements.md を書いて。セクションは Must have と Not now の二つ。
差分を確認します。ログインは Not now に入っていますか？思っていたのと違えば No を選び、もっとはっきり言い直しましょう。

何を作るかは決まりました。コードを書く前に、今度はどう作るかを決めます。

エージェントは design.md を見ながらコードを書くので、ここでの間違いはそのままコードの間違いになります。

入力するを押してから Enter を押します。エージェントが requirements.md を読んで design.md を書きます。差分を確認して Yes を選びます。
requirements.md と見比べましょう。Must have の項目はすべて入っていますか？リストは localStorage に保存することになっていますか？ Not now の項目が紛れ込んでいませんか？
おかしなところは、ひとつのメッセージにまとめて伝えます。小さなモデルは、スクリプトを script.js と名づけたり、localStorage を忘れたり、頼んでいない機能を足したりしがちです。

design.md で: スクリプトの名前は app.js に。Data にリストは localStorage に保存すると書いて。Clear All は requirements.md にないので削除して。
新しい差分を確認します。伝えたことの一部が抜けていたら、その部分だけもう一度頼みましょう。

いよいよコードを書いてもらいます。今回は推測ではなく、design.md が手がかりです。書けたら、開発者がいつもそうするように、まず動かしてみましょう。

入力するを押してから Enter を押します。
最初の差分 index.html を確認します。設計どおりなら Yes, allow all edits を選びます。ファイルをひとつ書いたところで止まったら、design.md をもとに、続けて style.css と app.js を書いて。 と残りを頼みましょう。
実行を押し、todo を二つ追加して、ひとつにチェックし、ひとつを削除します。もう一度実行を押しても、リストは残っているはずです。
うまく動かないところがあれば、直し方を指示するより、見たままを伝えましょう。たとえば 実行したら、todo が消えました。 のように。

エージェントが読んだファイルも、返した答えも、すべてコンテキストに残ります。コンテキストは小さく、数回やり取りするだけでいっぱいになります。いっぱいになると、返事の質が落ちてきます。

空きを作るコマンドは二つあります。どちらもファイルには手を付けません。

コマンド	残るもの	使うとき
`/compact keep …`	短い要約（指定したことを含む）	同じタスクを続けるとき
`/clear`	なし	新しいタスクを始めるとき

ここでは同じ作業を続けるので、compact を使います。

入力するを押してから Enter を押します。エージェントが app.js と index.html を読んでから編集します。差分はひとつずつ確認しましょう。
実行を押し、todo を二つ追加してひとつにチェックします。1 left と表示されましたか？
/context と入力します。いまは会話が大半を占めているはずです。
/compact 設計の決定を残して と入力し、もう一度 /context を見ます。ずいぶん小さくなりました。
リストはどこに保存されている？ と聞いてみましょう。app.js で localStorage に保存している、と答えられるはずです。答えられなければ、その情報は要約から抜け落ちています。次からは、残してほしいこととして書いておきましょう。

頼んでいないのに Conversation compacted と表示されたら、エージェントが自分で空きを作ったということです。それでも達成になります。

app.js から一文字だけ抜けているせいで、ブラウザがスクリプトを読み込めません。コンパイルの段階で失敗しているので、どの行も実行されません。

どこを見ればいいかは、エラーに書いてあります。直し方を推測せず、エラーをそのままエージェントに渡しましょう。

今回はエラーが出ません。ページは動くのに、ひとつだけ思ったとおりに動かないところがあります。これがバグで、貼りつける行番号もありません。

まずはアプリを触って、自分で見つけましょう。見つけたら、エージェントにわかりやすく伝えます。

実行を押して todo を三つ追加します。ひとつにチェックし、ひとつを削除してから、もう一度実行を押します。どの手順でおかしくなりましたか？
入力するを押し、三つの空欄（したこと、起きたこと、期待したこと）を埋めます。
エージェントがファイルを次々に読んだまま止まってしまったら、バグのある関数の名前を教えて、探す範囲を絞りましょう。原因探しは、これで半分終わったようなものです。
差分を確認します。いい修正は小さくまとまっています。実行を押して、同じ手順でもう一度試しましょう。