Claude Cowork を社内AXの相棒として毎日使っているエンジニアの実践ログです。社内固有名・個人名は伏せています。
最初、Claude に「ちょっとここだけ書き足して」を3回繰り返せばラクできると思っていた。実際は逆。ブラウザを開いたら、本文の真ん中に JS のソースコードがズラっと表示されていた。if (type === 'success' || type === 'info') とか丸見え。3秒くらい固まった。
これ、地味に詰まった話なので残しておく。
何が起きたか
私が触っていたのは、業務用の シングルファイルHTML(1ファイルに HTML/CSS/JS が全部入っているやつ)だった。Claude に対して、追加機能を継ぎ足しで書かせていた。1回目はちゃんと <script> の中に入った。2回目もOKに見えた。3回目、UI に変化がない。リロードしてもダメ。
開いたら、画面の下の方に JS の生コードがテキストとして並んでいた。
原因はシンプル。Claude が新しい関数を </script> の外に書いてしまっていた。HTML としては「テキスト」扱いになるので、ブラウザはそれを律儀にレンダリングしていた。
うん、自分でも何やってんだろうって思った。
なぜ起きるか(私の解釈)
シングルファイルHTML × LLM の継ぎ足し編集は、3つの理由で壊れる。
-
<script>の閉じ位置を見失う。長いファイルだと、LLM は</script>がどこかを毎回スキャンし切れない。 - 「ファイルの末尾」と「scriptの末尾」の区別がぼやける。「最後に追記して」と言われると、本当にファイル末尾に追記してしまう。
- 複数回の Edit が累積する。1回ごとは正しくても、2-3回繰り返すと、前回の追記が前提条件として壊れている。
結局、私が悪い。「全体構造を保つ責任」を Claude に丸投げしたら、こうなる。
私の判断:継ぎ足し3回でダメなら全書き直しに切る
これは賛否あると思う。でも私はもう、継ぎ足しでつまずいたら Python で1発書き直し に切るようにしている。理由は単純で、
- 壊れたHTML を「丁寧に直して」と頼むのは、もう一度ガチャを引く行為
- 書き直しの方が、結果として時間が短い
判断軸はこう。
3回目の継ぎ足しで挙動が想定と違ったら、もう Edit しない。Write で全書き直し。
中途半端に直そうとすると、また </script> の外に何か残ったままになる。経験則。
真似できるテンプレ:Python で1ファイルHTML を書き直す
私が使っている最小スニペット。
# rewrite_html.py
from pathlib import Path
OUT = Path("page.html")
HTML = """<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>業務ツール</title>
<style> body { font-family: system-ui; } </style>
</head>
<body>
<h1>ツール名</h1>
<div id="app"></div>
<script>
// ここに JS を1ブロックで全部書く
function init() { /* ... */ }
init();
</script>
</body>
</html>
"""
OUT.write_text(HTML, encoding="utf-8")
print(f"wrote {OUT} ({OUT.stat().st_size} bytes)")
ポイントは、Claude に「このテンプレに対して、機能Xを実装した完全版を1回で出して」と頼むこと。Edit じゃなくて Write。これが効く。
投稿前の壊れ検知チェック
書き直してもらった後、私は必ずこれを走らせている。
# script の開閉が対称か
grep -c '<script' page.html
grep -c '</script>' page.html
# 重要な関数の重複がないか
grep -c 'function init' page.html
# init() の呼び出し回数(末尾に1個だけのはず)
grep -c '^init();' page.html
<script> と </script> の数が一致しているか、init() が 1個だけ か。これだけで9割の事故は防げる。地味だけど、本当に効く。
ハマったところ
今回ハマった点を、嘘なく置いておく。
- 1回目の Edit が成功して油断した ── 2回目以降の累積で壊れることを想像できていなかった。
- 「画面が空白」ではなく「JSが表示される」と気付きにくい ── エラーじゃない。だから F12 を開かない。これが一番怖い。
-
Claude に「壊れたHTML を直して」と頼んで、また
</script>の外に追記された ── ガチャ。これで20分溶かした。正直しんどかった。 - ブラウザキャッシュで「直したはずなのに直ってない」状態を疑った ── 違った。コード側だった。Ctrl+F5 で時間を浪費。
-
init()の重複呼び出しで、データが二重に描画された ── 末尾追記時、前のinit();が残っていた。 -
テンプレリテラル
${...}のエスケープが追記時に崩れた ── バッククォート絡みは特に弱い。 - 「ちょっとだけ追記」が癖になっていた自分への自戒 ── これが本丸。
まとめ
- シングルファイルHTML × LLM 継ぎ足し編集は、3回目で壊れる前提で運用する
- 継ぎ足しでつまずいたら、Edit ではなく Write で全書き直し
- 書き直しは「テンプレ + 完全版を1回で」が早い
-
<script>と</script>の数チェックを習慣にする - 「画面に JS が表示される」=
</script>の外漏れ、と覚えておく
みなさんはシングルファイルHTML を LLM に触らせるとき、Edit と Write をどう使い分けていますか? 「3回までは Edit でいい」みたいなマイ基準があれば、コメントでぜひ教えてください。
Claude Cowork を社内AXの相棒として毎日使っているエンジニアの実践ログです。
私が日中見ている事業は「N限(Ngen)インターン」── 新卒の実務試験型(ワークサンプル型)インターンを企業に提供しています。AI時代の新卒採用に関心がある方は、下記からどうぞ。
- サービス概要(企業向け): https://ngen-intern.jp/company
- 使い方ガイド: https://ngen-intern.jp/company/guide
- お問い合わせ: https://ngen-intern.jp/contact
シリーズ: Claude Cowork で社内AXを回す