AI を使った開発

AI が書いたコードの読み方・確かめ方

AI は自信たっぷりに間違えます。書かれたコードを「上から順に」読む方法、動作を確かめる手順、よくある AI のミス、直し方を身につけて、任せきりから卒業します。

更新日：2026-09-25

この記事で分かること

Claude Code を使うと、書く量は減ります。その代わり 読む量 が増えます。読めるかどうかが、AI を使いこなせるかどうかの分かれ目です。所要時間は 60 分です。

AI が書くコードは、多くの場合ちゃんと動きます。しかし、次のようなことが普通に起きます。

しかも、間違えているときも自信たっぷりです。「動きました」という言葉を信じず、自分で確かめる のが原則です。

知らないコードを渡されたら、次の順番で見ていきます。

何というファイルがいくつあるか。頼んだ以上に増えていないか。「index.html と style.css だけ」と頼んだのに script.js や lib/ が増えていたら、なぜ必要なのか聞きます。

HTML なら head と body、body の中の大きなブロック。JavaScript なら、関数がいくつあり、それぞれ何という名前か。中身はまだ読みません。まず「部品の一覧」を把握します。

calculateTotal なら「合計を計算する」、.card なら「カード型の箱」。名前を読むだけで、7割は何をしているかわかります。名前と中身が合っていないコードは、それ自体が要注意です。

全部を読む必要はありません。「自分の頼んだことがどこで実現されているか」「怪しい部分はないか」を中心に読みます。わからない行は、AI に聞きます。

style.css の 24 行目の `flex: 1 1 200px` は何をしている？

まず、頼んだことがそのまま動くかを確認します。「趣味を3つ横に並べて」なら、3つ横に並んでいるか。これだけで終わる人が多いのですが、ここで止めないでください。

「ふつうでない入力」で壊れるコードは、実際に使うと必ず壊れます。壊れたら AI に「空欄で送信するとエラーになる。入力チェックを足して」と頼みます。

スマホの幅で見る（Chrome の F12 → スマホアイコン）、別のブラウザで見る。見た目が崩れていないか確認します。

ミス	見つけ方
存在しない関数を呼ぶ	Console に `is not defined` や `is not a function`
頼んでいない機能の追加	ファイルや関数の一覧が想定より多い
変数名の不一致	定義した名前と使っている名前が微妙に違う（`userName` と `username`）
入力チェックがない	空欄・文字・長文で試すと壊れる
古い書き方	`var` を使っている、`==` を使っている
入力をそのまま画面に出す	`innerHTML` に入力値を入れている（XSS という攻撃につながる）

最後の項目は特に重要です。ユーザーが入力した文字を画面に出すときは textContent を使う、と覚えておいてください。innerHTML は HTML として解釈されるため、悪意ある入力でページを乗っ取られることがあります。

コードが動いても、意味がわからない部分を放置すると、次に壊れたときに直せません。1つの作業で、わからない行を最低1つは聞く と決めてください。

聞き方の型はこれです。

この部分（コードを貼る）の意味を、初心者向けに一行ずつ説明して。
特に `○○` が何をしているかを知りたい。

説明を読んで、自分の言葉でメモに残します。「addEventListener = ボタンなどに『押されたらこれをして』と登録する」のように、自分の言葉で書けたら理解できています。

承認する前に差分を読む。Claude Code はファイルを変える前に「こう変えます」と見せてくれます。全部は読めなくても、変わるファイル名と行数は見ます。
こまめに保存・バックアップ。うまくいっていた状態のフォルダをコピーしておく。Git を学ぶと、これが楽になります。
秘密の情報を貼らない。パスワード、API キー、他人の個人情報は AI に渡さない。
本番の環境で直接試さない。練習用のフォルダで確認してから。

3つ目は、読む力を鍛える最良の練習です。

次は「開発環境の作り方」です。サーバー側に進む前に、PHP などを動かす環境を AI と一緒に整えます。