「全部読め」でも「丸ごと鵜呑み」でもない、その中間

未経験のうちは、AIが吐いたコードを1行残らず理解しようとして手が止まります。かといって何も見ずにコピペすると、動かない・変な挙動・データが消える、みたいな事故が起きます。

現場でやっているのは、その中間です。全部は読まない。でも、貼る前に「決まった3箇所」だけ30秒見る。 これだけで、理解のために止まることも減るし、事故もかなり防げます。

この記事では、その3箇所を「①なぜ見るか ②具体的な見方／AIへの確認プロンプト ③具体例（Next.js / TypeScript）④未経験が見落とす1点」で並べます。読む力を鍛える話ではなく、負担を減らす最小のルーティンの話です。

見る3箇所（先に結論）

どこが新しく変わったか（変更範囲）
知らない部品が"何をするもの"か1行で言えるか（ブラックボックスを減らす）
実際に動かして"期待どおりか"自分の目で確認（動作で検証）

順に、実際のプロンプトと具体例で見ていきます。

箇所1: どこが新しく変わったか（変更点だけ先に把握する）

なぜ見るか

AIは頼んだ機能以外の場所も書き換えたり、既存の行を消したりします。コード全体を読むのは大変でも、「今回どこが変わったか」だけなら未経験でも追えます。変更範囲がわかれば、「触ってほしくない所まで変わってないか」に気づけます。

見方 / 確認プロンプト

生成の直後に、AI自身に要約させます。

今の変更点だけ、初心者向けに3行で説明して。
どのファイルの何を追加／変更／削除したか、箇条書きで。

「コードを読む」前に「変更の地図」をもらう感覚です。差分（before / after）で見せてくれるツールなら、その差分の色がついた行にだけ目を通せば十分です。

具体例（Next.js / TypeScript）

たとえば「ボタンを押したらカウントが増える」を頼んだら、AIが返してくる説明はこうなっているのが理想です。

変更点（3行）:
- app/page.tsx に useState を追加して count を管理
- ボタンの onClick で count を +1 する処理を追加
- count を画面に表示する <p> を1つ追加

対応するコードはこの部分だけ見れば足ります。

"use client";
import { useState } from "react";

export default function Page() {
  const [count, setCount] = useState(0); // ← 追加された行
  return (
    <main>
      <p>カウント: {count}</p>            {/* ← 追加された行 */}
      <button onClick={() => setCount(count + 1)}>+1</button>
    </main>
  );
}

「変わったのはこの3行」とわかっていれば、残りの見慣れない記述は今は流してOKです。

未経験が見落とす1点

「変更点は？」と聞かず、いきなり全コードを貼られて固まるのが典型です。AIは聞けば必ず要約してくれます。まず地図をもらう。これを癖にするだけで読む量が激減します。

箇所2: 知らない部品が"何をするもの"か1行で言えるか

なぜ見るか

コード内の localStorage や fetch のような部品を「見たことある気がする」で流すと、そこがブラックボックスになります。全部を深く理解する必要はありません。ただ「これは"何をするもの"か」を1行で言えるかだけ確認します。1行で言えない部品があったら、そこだけAIに聞きます。

見方 / 確認プロンプト

気になった1行を、そのまま貼って聞きます。

この行は何をしている？初心者向けに1行で。
localStorage.setItem("todos", JSON.stringify(todos));

返ってくるのは、たとえばこんな1行です。

入力した todos を、ブラウザに文字列として保存している（リロードしても消えないようにする）行です。

これで「保存の行なんだな」とわかれば十分。仕組みの詳細は後回しでOKです。

具体例（Next.js / TypeScript）

保存と読み込みで、初心者が特に取りこぼしやすいのが localStorage まわりです。

"use client";
import { useState, useEffect } from "react";

export default function Page() {
  const [todos, setTodos] = useState<string[]>([]);

  // 起動時に保存済みデータを読み込む
  useEffect(() => {
    const saved = localStorage.getItem("todos");
    if (saved) setTodos(JSON.parse(saved)); // 文字列→配列に戻す
  }, []);

  // todos が変わるたびに保存する
  useEffect(() => {
    localStorage.setItem("todos", JSON.stringify(todos)); // 配列→文字列にして保存
  }, [todos]);

  // ...
}

ここで「1行で言えるか」を通すと、少なくとも次は言えるようになります。

localStorage.getItem → 保存済みのデータを取り出す
JSON.parse → 文字列を配列（データ）に戻す
JSON.stringify → 配列（データ）を保存できる文字列に変換する

全部を暗記する必要はなく、**「保存・読込・変換の3役がいる」**とだけ言えれば、いま貼るには十分です。

未経験が見落とす1点

**「知らない部品なのに1行で言えないまま流す」**のが事故のもとです。特に localStorage は文字列しか保存できないので、JSON.stringify / JSON.parse を忘れると壊れます。「1行で言えるか」を通すと、この"言えないモヤモヤ"が可視化されて、聞くべき場所が自分でわかります。

箇所3: 実際に動かして"期待どおりか"自分の目で確認

なぜ見るか

コードを読んで「たぶん合ってる」と納得するより、動かして「期待と一致するか」を見る方が、未経験には圧倒的に確実です。AIは自信満々に間違えます。読解では気づけないズレも、動かせば一発でわかります。

見方 / 確認プロンプト

動かす前に、"期待"をAIに先に言葉にしてもらうと、確認がラクになります。

このコードを動かしたら、画面上で何がどう動くはず？
ユーザーの操作ごとに「操作→期待される結果」で3つ挙げて。

返ってくる「期待リスト」を、実際の画面と突き合わせます。

- 入力欄に文字を打って「追加」→ リストに1件増える
- 「追加」を押したあと入力欄が空になる
- リロードしても追加済みの項目が残っている

あとは npm run dev で立ち上げて、この3つを自分の手で試すだけです。

具体例（期待と実際のズレ）

「追加したら入力欄を空にする」を期待していたのに、実際は文字が残ったまま——というズレは、読解だとスルーしがちですが、動かすと即わかります。原因はだいたいこの1行の有無です。

function handleAdd() {
  setTodos([...todos, text]);
  setText(""); // ← これが無いと入力欄が空にならない（期待とのズレ）
}

ズレを見つけたら、そのまま聞けます。

「追加後に入力欄を空にしたい」のに文字が残る。
どこを直せばいい？該当箇所だけ教えて。

未経験が見落とす1点

「エラーが出てない＝正しい」と思い込むことです。エラーゼロでも、期待と違う動きは普通に起きます。だからこそ「読んで納得」で終えず、期待リスト×実際の画面で最後に目視する。ここまでやって初めて「貼ってよし」です。

まとめ: 全部読めなくていい、でも"見る"習慣

箇所1: どこが変わったか →「変更点だけ3行で説明して」で地図をもらう
箇所2: 知らない部品を1行で言えるか →「この行は何をしている？1行で」で言語化
箇所3: 動かして期待どおりか →「操作→期待される結果を3つ」で目視確認

30秒でこの3箇所を通すだけで、「読めなくて止まる」も「鵜呑みで事故る」も両方避けられます。ポイントは、理解の完璧さを目指さないこと。いま貼って進めるのに必要な最小限だけを"見る"。理解は、動かしながら後からついてきます。

そしてこの「変更点を聞く／1行で説明させる／期待を先に言語化させる」という動きは、そのままAIへの指示力になります。コードを書く力とAIと協働する力が同時に育つのが、この習慣のいちばんの効きどころです。

Qiita読者の方には易しすぎる内容だと思います。未経験の知り合いへの紹介や、社内の新人研修・後輩育成の参考にしてもらえたら嬉しいです。

未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまでを、全20セッションで体系化した教材を運営しています（Claude Code を学習パートナーにする CLAUDE.md / Skills 設計まで含みます）。

無料体験版（git clone してすぐ動く・最初の数セッション分・⭐ Star 歓迎）→ https://github.com/ayies128/next-ai-camp-trial
教材完全版＋月5,500円のメンタリング（全20セッション＋チャット質問し放題）→ https://menta.work/plan/20251?ref=qiita
YouTube『AIエンジニア情報局』（AI×開発ニュースを1本5分でキャッチアップできる別運営チャンネル・無料）→ https://www.youtube.com/channel/UC1rXVD9WYsQPQEWZyd-A1KA/?ref=qiita