0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@ennagara128

AIが書いたコードは"全部読めなくていい"——コピペ前の30秒で見る3箇所（未経験向け・確認プロンプト付き）

0
Posted at

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

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

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

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

見る3箇所（先に結論）

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

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

箇所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 設計まで含みます）。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?