ChatGPTのコードを貼り付けたら、爆弾処理が始まった
この記事で学べること
- ChatGPT に「Webページを作って」と頼むだけで、動く HTML が手に入ること
- 当時の ChatGPT は「ファイルを直接見られない」制約があり、指示と実際のファイルがずれる問題があったこと
- AI が書いたコードを自分で編集する7ステップのワークフローと、その「爆弾処理」感覚の正体
コードを書ける人が、ずっとかっこよく見えていた。
大学時代、隣の席でターミナル（黒い画面にコマンドを打ち込むツール）に何かを打ち込んでいる人がいた。黒い画面に白い文字が流れていく。何をしているのか、まったくわからない。でも、かっこいいと思った。
自分もあんなふうになれたら——そう思ったまま、何年も経った。
わたしもそうでした。パソコンは使えるけど、プログラミングは「別の世界の人がやること」だと思ってました。
その感覚、たぶん多くの人が持ってる。コードって、見た目が暗号みたいだからね。
この記事は、そんな「コードの世界」に足を踏み入れた日の記録だ。
先に結論を言うと、ChatGPT のおかげでコードを動かす体験はできた。ただし、楽だったわけじゃない。AI がコードを書いてくれても、ファイルを触るのは自分だった。 その手動操作が、爆弾処理のような体験になった。
ChatGPT との出会い——ライターとして
2022年の終わり、ChatGPT が話題になった。
「AI が文章を書いてくれる」という触れ込みに興味を持って、使ってみた。ブログを書いていたから、ライターの代わりにならないかと思ったのだ。
文章を書かせてみると、確かにそれっぽいものが出てくる。すごい。でも、この時はまだプログラミングの世界には手を出していない。AI は「書く道具」であって、「作る道具」ではなかった。
プログラミングは試さなかったんですか？ ChatGPT ならコードも書けるって聞きましたけど。
当時は「ブログの文章を楽に書きたい」が目的だったからね。コードを書いてもらう発想がなかった。必要がなかったんだ。
そのブログは2023年に閉じた。収益が出なかったし、毎日書き続けることに疲れたからだ。
もう一度ブログを始めた理由
2026年、note でブログを再開した。
きっかけは婚活だった。成婚退会して、その経験を記事にしたら誰かの役に立つんじゃないかと思ったのだ。書くのは好きだったし、テーマも決まっている。
記事を書くのは楽しかった。URL をまとめたハブ記事（関連記事を一覧にしたページ）を作ったり、読者がサイト内を回遊する導線を考えたり。設計するのは面白い。
問題は、実装が全部手作業だったことだ。
記事が5本のうちは大丈夫だった。10本を超えたあたりから、ハブ記事のリンク更新、内部リンクの張り替え、カテゴリの整理——記事を1本書くたびに、3箇所も4箇所も手で直す作業が発生する。
それ、記事を書く時間より修正の時間のほうが長くなりませんか？
なるよ。しかも手作業だからミスも起きる。リンク切れに気づかないまま公開してたりね。
この面倒をどうにかできないか。
そこで初めて、ChatGPT に「コードを書いてもらう」ことを考えた。
プログラミングに触れた日
最初は試しに、簡単なところから始めた。
「自己紹介のWebページを作って」と ChatGPT に頼んでみた。
ChatGPT が HTML（Web ページの骨組みを書く言語）と CSS（見た目を整える言語）のコードを返してきた。こんな感じだ:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
body { font-family: sans-serif; text-align: center; }
h1 { color: #333; }
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>これは僕の最初のWebページです。</p>
</body>
</html>
コードの構造はこうなっている。<head> がページの設定（タイトルやスタイル）、<body> が実際に画面に表示される内容、<style> の中が見た目のルール（フォントや色）だ。
コピーして、メモ帳に貼り付けて、.html で保存して、ブラウザで開いた。
画面に、Webページが表示された。
えっ、それだけで表示されるんですか？ 特別なソフトとか要らないんですか？
HTML はブラウザが直接読めるからね。メモ帳で書いたファイルでも動く。
自分が書いたわけじゃない。でも、自分が「作って」と言って、出来上がったものが目の前に表示されている。
あの頃ずっと憧れていた「コードを書く側」に、少しだけ近づいた気がした。
爆弾処理が始まった
ここから先は、正直に言う。地獄だった。
ChatGPT が書いてくれるコードは動く。でも、そのままでは自分の思い通りにはならない。「ここの色を変えたい」「ボタンの位置をずらしたい」——そういう細かい調整が必要になる。
たとえば「見出しの色を青にしたい」と ChatGPT に聞くと、こう返ってくる:
h1 { color: blue; }
「<style> の中にある h1 { color: #333; } を h1 { color: blue; } に変えてください」と。
問題は、変えるのは自分 だということだ。
VSCode（プログラミング用のエディタ）を開いて、ChatGPT が指示した場所を探す。見つけたら、言われた通りに書き換える。保存する。ブラウザで確認する。
——エラー。
赤い文字がいっぱい出てきたらパニックになりませんか？ どこを間違えたかもわからないし……。
エラーメッセージには「何行目が間違ってるか」が書いてある。英語だけど、そのまま ChatGPT に貼り付ければ原因を教えてくれる。
これが 爆弾処理 の感覚だった。
無線の向こうにいる ChatGPT が「その青い線を切れ」と指示する。自分は震える手でハサミを持つ。切る。——ブザーが鳴る。間違えた。
「すみません、青じゃなくて赤でした」と ChatGPT が言い直す。
いや、もう青を切っちゃったんだけど！？
戻し方もわからないのが一番怖いです。「とりあえず Ctrl+Z 連打」ってなりませんか？
……その恐怖は正しい。コードの修正って、一箇所変えると他の場所に影響が出ることがある。だからこそ、Ctrl+Z は最初に覚えるべき操作だよ。
なぜ難しかったのか——ChatGPT の限界
当時の作業フローを整理すると、こうだった。
- ChatGPT にやりたいことを伝える
- ChatGPT がコードを返す
- 自分で VSCode にコピペする
- 自分で 指定された箇所を編集する
- 保存してブラウザで確認する
- エラーが出たら ChatGPT にエラーメッセージを貼り付けて聞く
- 2〜6 を繰り返す
問題はステップ3と4だ。
ChatGPT は「このコードを index.html の42行目に貼り付けてください」と言う。でも、自分の index.html は ChatGPT が見ているものと微妙に違う。さっき自分で変えたから。行番号がずれている。どこに貼ればいいかわからない。
それって、ChatGPT がわたしのファイルを見てないってことですか？
そう。当時の ChatGPT の大きな限界だった。ファイルを直接見られないから、「たぶんこのあたり」という推測で指示を出すしかなかった。
ChatGPT は自分のファイルを見ていない。自分が貼り付けたコードの断片から推測して、指示を出している。
だから、ずれる。間違える。そのたびに自分がエラーと向き合う。
これが「爆弾処理」の正体だ。指示する側と実行する側で見えているものが違う。この情報の非対称性が、すべての苦痛の根源だった。
それでも、やめなかった
じゃあなぜ続けたのか。
答えは単純だ。動いた瞬間が、気持ちよかったから。
エラーを5回出して、6回目にやっと画面が正しく表示されたとき。自分が「こうしたい」と思った通りのデザインが、ブラウザに映ったとき。
その瞬間の達成感は、プログラミングを知らない自分には新鮮だった。
……それ、プログラマーが感じるのと同じ喜びだよ。コードを書く技術の有無じゃなくて、「自分の手で何かを作った」という感覚だ。
ただし、正直に言えば「楽しい」と「しんどい」は半々だった。いや、しんどいのほうが多かったかもしれない。
ChatGPT に聞いて、コードを貼って、エラーを直して、また聞いて……。この往復は、想像以上に疲れる。「どこを間違えたかわからない」のが一番きつい。ChatGPT にエラーメッセージを貼り付けて、返ってきた修正をまた自分で反映する。その繰り返しだ。
でもそれって、ファイルを直接触れる AI がいたら、もっと楽だったんじゃないですか？
そうだね。でもこの苦労があったから、道具が良くなったときに何が変わったのかがわかった。苦労は、比較の基準になる。
「AI がコードを書いてくれる」のは事実だ。でも「自分でファイルを触る」のは自分だった。
試してみよう: ChatGPT で最初の Web ページを作る
この記事を読んで「自分もやってみたい」と思ったら。3ステップで体験できる。必要なものは ChatGPT（無料版で十分）とパソコンだけだ。
ステップ1: ChatGPT に頼む
ChatGPT を開いて、こう入力する:
自己紹介のWebページを作ってください。
名前、好きなこと、一言メッセージを含めてください。
HTMLとCSSを1つのファイルにまとめてください。
「Webページ作って」だけじゃダメですか？ わざわざ長く書く理由は？
短い指示でも動く。でも「何を含めるか」を伝えたほうが、自分の意図に近いものが返ってくる。最初の一歩だからこそ、完成品が想像できる指示にしたほうがいい。
ステップ2: ファイルを作る
- 返ってきたコードを全部コピーする
- メモ帳（Windows）やテキストエディット（Mac）を開く
- 貼り付けて、
my-page.htmlという名前でデスクトップに保存する
保存するとき、「文字コード」が選べる場合は UTF-8 を選ぶ。日本語が文字化けしなくなる。
ステップ3: ブラウザで開く
保存したファイルをダブルクリックする。ブラウザに自分のWebページが表示される。
もし表示が崩れたら、まず2つだけ確認する:
<や>の閉じ忘れがないか（<h1>Hello</h1>のように開きと閉じがペアになっているか）- ファイル名が
.htmlで終わっているか（.txtのままだとブラウザがHTMLとして読まない）
15分でできるなら、今日の帰りに試してみたいです。
やってみるといい。表示されたら、次は「背景の色を青に変えて」と ChatGPT に聞いてみよう。そこから爆弾処理が始まるけどね。
まとめ
これが、プログラミングに触ったことがなかった自分の「最初の体験」だ。
華やかな成功譚じゃない。爆弾処理みたいなコード修正と、エラーの赤い文字と、Ctrl+Z の連打。
でも、エラーは失敗の証拠ではない。 「次はここを直せ」という、手がかりだ。
あの体験が2つのことを教えてくれた。
- AI は「コードを書けない人」でも「コードを動かす人」にしてくれる。 ただし、当時はファイル操作が手動だった
- 動いた瞬間の達成感は、技術の有無に関係ない。 5回エラーを出して6回目に動いたときの喜びは、プログラマーが感じるものと同じだ
まだ試していないなら、上の3ステップから始めてみてほしい。15分で「自分のWebページ」が手に入る。
次の話では、コードを書くこととは別の苦痛について書く。記事が増えるたびに、手作業も増えていく。コードのエラーより、そっちのほうがずっとつらかった。
繰り返しの作業って、具体的に何をしてたんですか？
ハブ記事のリンク更新、カテゴリ整理、回遊導線の張り替え。1本記事を書くたびに3箇所も4箇所も手で直す作業だよ。次の話で詳しく話す。
あの爆弾処理が、すべての始まりだった。
「AIと一緒にブログを作る」シリーズ 全8話:
- コードを書けない自分が、プログラミングに触れた日（この記事）
- 何度もやる作業をなくせないか？
- ChatGPT → Codex → Claude Code
- 「環境指数ってなんだよ」
- ブログの骨格ができた日
- 「出来てる！」
- WordPress vs AI+Next.js 正直な比較
- 1ヶ月でここまで来た（公開予定）
関連記事: