AIの出力を読んで正しく適用する

料理のレシピをもらったとしましょう。材料と手順が書いてありますが、それを読んで、理解して、実際に料理に反映するまでは、レシピを持っているだけでは意味がありません。

AIの出力も同じです。AIが書いたコードや指示を、あなたのプロジェクトに正しく届けるスキルをこのレッスンで身につけます。

このレッスンを進める前に、以下の準備ができていることを確認してください。

• AIツール（Claude Code、Codex CLI、Cursor、ChatGPT のいずれか）が使える状態にある
• 編集対象のプロジェクトフォルダーが手元にある
• テキストエディター（＝コードを書くためのアプリ。VS Code や Cursor など）が開いている

AIはあなたの質問に対して、主に3つのパターンで返答します。まずは「今もらった返事はどのパターンかな？」と見分けるクセをつけましょう。

良い例：出力を読むときの姿勢

• AIが「どのファイルに」「何をするのか」を説明している部分をまず読む
• コード全体をざっと目で追ってから作業に入る
• わからない単語があったら、AIに「〇〇って何ですか？」とすぐ聞く

悪い例：避けたい読み方

• コードだけをコピペして説明文を一切読まない → 後で「どこに貼ったか分からない」になりがち
• AIの指示を全部信用して、内容を何も確認しない → エラーが出たときに原因が分からない

AIの出力を読んで「ここがわからない」「本当にこれで合っている？」と思ったら、遠慮なくAIに聞き返しましょう。聞き返すことで失敗を防げます。

使えるプロンプト例：

このコードは、どのファイルの何行目あたりに貼ればいいですか？

「置き換え」と「追加」のどちらですか？元のコードは消していいですか？

今のエラーメッセージはこれです。どうすれば直りますか？

（エラーメッセージをそのまま貼り付ける）

ポイントはAIの出力をそのまま使う前に、一度確認を挟むことです。料理でいえば「このレシピ、小さじ1って書いてあるけど、大さじ1の間違いじゃない？」と確認するのと同じです。

AIの出力には大きく分けて2つの適用方法があります。

ファイルを編集する場合

AIが「このファイルをこう書き換えて」と言ったら、次の手順で進みます。

1. 指定されたファイルをエディターで開く
2. AIが「置き換えて」と言っているか「追加して」と言っているかを確認する
3. 置き換えの場合: 古い部分を選択して削除してから、新しいコードを貼り付ける
4. 追加の場合: AIが指定した場所（「〇〇の下に」など）にカーソルを合わせて貼り付ける
5. ファイルを保存する（Windows: Ctrl + S / Mac: Cmd + S）

よくある間違い: AIが「この部分を置き換えて」と言っているのに追加してしまうと、同じ処理が2回書かれてエラーになります。「置き換え」なのか「追加」なのか、必ず確認しましょう。

良い例

• 「赤い部分を消して、このコードと置き換えてください」→ 古い部分を消してから新しいコードを貼る
• 迷ったらAIに「今あるコード全体を見せるので、どこを変えるか教えて」と聞く

悪い例

• 古いコードを残したまま、その下に新しいコードを追加 → 同じ処理が2回書かれてエラー
• ファイル全体を丸ごと上書き → AIが変更を指示していない部分まで消えてしまう

ターミナルコマンドを実行する場合

AIが「次のコマンドを実行してください」と言ったら、ターミナル（＝コンピューターに文字で指示を出す画面）に1行をコピーして、Enterキーを押します。

例:

npm install lucide-react

これは「lucide-react というアイコンの部品をプロジェクトに追加する」という意味です。1行だけコピーして、ターミナルに貼り付けてEnterを押すだけです。

注意: 複数行のコマンドが出てきた場合は、1行ずつコピーして実行してください。まとめて貼ると意図しない動きになることがあります。

AIツールごとの適用のコツ

適用したら、正しく動いているか必ず確認します。確認しないまま次に進むと、問題が積み重なって原因がわからなくなります。

確認の3ステップ

1. ブラウザーをリロードする: 保存後にブラウザーの更新ボタンを押す（または Ctrl + R / Cmd + R）
2. 変更した部分を目で確認する: 表示が期待通りに変わっているか見る
3. ターミナルをチェックする: 赤い文字のエラーメッセージが出ていないか確認する

良い例：確認の仕方

• 変更するたびにブラウザーをリロードして、こまめに確認する（「小さく変えて、すぐ確認」のリズム）
• エラーが出たら、そのエラーメッセージを丸ごとコピーしてAIに伝える

悪い例：つまずきやすい確認

• 保存し忘れたまま「反映されていない」と焦る → まず Ctrl + S / Cmd + S を確認
• ブラウザーの古いキャッシュ（＝前のデータが残っている状態）のせいで変化に気づかない → シークレットウィンドウで開くと確実

AIの出力を適用しても、思い通りにいかないことはよくあります。慌てずに次の方法を試してください。

どれもうまくいかないときは、AIに「うまくいきません。今の画面はこうなっています」と状況をそのまま伝えれば大丈夫です。スクリーンショットを撮って見せるのも非常に効果的です。

このレッスンを終えると、あなたは次のことができるようになります。

• AIの出力が「コード提示」「ファイル新規作成」「コマンド実行」のどれかを見分けられる
• 出力を正しい場所に正しい方法で適用できる
• 適用後に自分で結果を確認して、うまくいかないときはAIに適切に聞き返せる

これはAIを使ってWebアプリを作るための最も基本的で重要なスキルです。次のレッスンでは、このスキルを使って実際にプロジェクトを形にしていきます。