1
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?

【Claude Code】半年前にバイブコーディングしたアプリを丸投げで改良させたら楽にバグが潰せた話

1
Posted at

前回、Claude と Gemini と5日間対話して、ブラウザ完結のボクセルエディタ「VoxoB」を作りました。

今回はその続編です。「作る」ではなく「直す・育てる」 を、Claude Code にほぼ丸投げしました。

VoxoB の新しい画面

本音
前回の記事で「出力されたコードは一流」と書きました。
一流のコードでも、呼ばれていない関数は働きません。それを今回知りました。


🧭 今回のスタンス:作った人ほど自分のアプリが見えていない

自分で作ったアプリは、自分の使い方でしか触りません。
PCで、いつもの手順で、いつものボタンを押す。だから壊れているところに気づけません。

そこで Claude Code には、最初にこう投げました。

https://github.com/ikemfr/voxob_webapp の改良、https://voxob.vercel.app/ で私が公開済み

これだけです。

本音
改良の中身は何も言っていません。
丸投げにもほどがある。

Claude Code はまずリポジトリを手元に持ってきて、PCとスマホの両方の幅で開き、こう聞き返してきました。

  • スマホの操作性
  • 初見の分かりやすさ
  • 不具合・性能の総点検
  • 拡散・検索対策

どれを優先するか、です。

全部選びました。

本音
選択肢を出されたら全部選ぶタイプです。
定食屋でも全部乗せにします。


🔍 プロセス1:まず「全部押す」

Claude Code が最初にやったのは、機能追加ではなく全ボタンの自動実行でした。

ブラウザのコンソールから、全機能を順番に呼んでいきます。

対象 数 結果
ワンクリック生成 39種 エラー 0
アニメ生成 26種 エラー 0
変形アクション 16種 エラー 0
書き出し(OBJ/MTL/STL/GLB/JSON/PNG) 6ファイル エラー 0

「エラーなし、優秀!」……で終わらないのが今回のハイライトです。

見つかったもの(エラーにならないバグたち)

1. 自動保存されていなかった

autoSave() という関数は、ちゃんと存在していました。
呼ばれているのは Ctrl+S を押したときだけ でした。

つまり、ページを再読み込みすると作品が消えます。
README には「作品はブラウザに保存」と書いてありました。

本音
書いたのは私です。
正確には、書かせたのは私です。

2. 生成を「元に戻す」と、元の作品が戻らない

生成ボタンは、まず今の作品を全部消してから新しい形を置きます。
その「全部消した」が取り消しの履歴に入っていませんでした。
Ctrl+Z を押すと、生成した形が消えて 空っぽ になります。

3. スマホで2本指操作をすると、勝手にブロックが置かれる

1本目の指が触れた瞬間に「置く」が発動していました。
2本目の指が来るころには、もう置かれています。
回転しようとするたびに、ブロックがひとつ増えます。

4. アニメ生成を続けて試すと、元の形が壊れていく

「積み上げ」の後に別のアニメを試すと、空のフレームを元に アニメを作っていました。

5. 言語設定を保存しているのに、読み込んでいなかった

書く処理はあるのに、読む処理がありません。

本音
5つとも、私の使い方では一度も踏んでいません。
PCでしか触らない、生成は一発で満足、再読み込みしない。
作った人ほど、バグを避けて歩いています。


🛠 プロセス2:直し方の哲学

Claude Code の直し方に、いくつか一貫したルールがありました。

① IDと関数名を変えない

VoxoB は 1ファイル・3,500行 の HTML です。

全部を書き直すのではなく、既存の関数を 外側から包む 方式で直していました。

// 生成の前に、消える作品を取り消し履歴に積む
const _gen = gen;
gen = function (id) {
  const before = /* 今あるボクセルを全部記録 */;
  _gen(id);
  // 最新の取り消し手順の先頭に「消した分」を差し込む
};

onclick="gen(...)" のような既存の呼び出しは、一切書き換えていません。

② 「完了」は証拠で言う

修正のたびに、ブラウザで同じ操作を再現して数字で確認していました。

  • 生成 → Ctrl+Z → 生成前のボクセル数に戻ったか
  • 生成 → 1.2秒待つ → 再読み込み → 同じ数(63個)が残っているか
  • 2本指のタッチを合成して、ボクセル数が増えていないか

本音
人間の「直しました!」より信用できます。
私の「直しました!」は、だいたい直っていません。

③ 言われていない「良さそうなこと」は、聞いてからやる

使い方ページの FAQ に、Claude Code は最初「作ったものは商用で使えます」と書きかけて、自分で消していました。

理由は「利用条件を決めるのは作者だから」。

本音
ちゃんとしてる。
私より私のアプリの権利に慎重です。


✨ プロセス3:目玉機能「次の一手」

改良の第2弾で頼んだのが、これです。

既存機能のボリュームアップ、UI向上、次の一手機能、あとあったらいい目玉機能を実装

「次の一手」は、ボタンを押すと 今の作品に合う工程をひとつ足す 機能です。

初版:ワンパターン

最初の版は「地面 → 屋根 → 窓 → 木 → 陰影 → 角」を順番に足すだけでした。
6回押すと「今の提案はここまで」で終わります。

そこで私は言いました。

次の一手機能がワンパターンなの修正、何かは提案し続けろ、
色を変化させたり、動きを追加したり、ブロックを理論に基づき追加したり...

本音
「何かは提案し続けろ」。
上司に言われたら転職を考えるやつです。

改良版:3種類を順番に回す

今の「次の一手」は、次の3種類を ブロック → 色 → ブロック → 動き の順に回します。

種類 例 一言の理由(画面に出る)
ブロック 扉・小道・柵・花・石・灯り・旗・雲・左右対称 誘導線、奇数の法則、焦点、奥行き、対称性
色 差し色・上へ明るく・色相をそろえる・夕方の光・季節 補色、配色の 60・30・10、暖色と寒色
動き 回転・弾む・呼吸・揺れ・波・公転 ターンテーブル、重さの表現
  • その中から、今の形に合うものだけ をランダムに選びます。
  • 直近4回と同じ提案は出しません。
  • 家の見本で20回押したところ、14種類の提案が出ました。

本音
押すたびに「花は3つか5つか7つで置くと自然です(奇数の法則)」とか言ってきます。
ボクセルエディタに美術の授業をされています。
でも実際、ちょっと良くなるのが悔しい。

ボツになったもの

最初、目玉機能として MagicaVoxel 形式(.vox)の入出力 も実装されていました。

途中で私が言いました。

MagicaVoxel形式の入出力やめて

すぐ消えました。

本音
AI は「あったら喜ばれそうなもの」を全力で作ってきます。
要らないものは、作った直後でも遠慮なく「やめて」と言うのが正解でした。
罪悪感はありません。相手は気にしていないので。


🎨 プロセス4:UI全改修(人間工学に基づけ、と言ってみた)

UI全改修リニューアル(より操作しやすく、配置もUX理論やプラクティス、人間工学に基づけ)

本音
「人間工学に基づけ」。
言っている本人が、人間工学をよく分かっていません。

返ってきた改修方針は、だいたいこうでした。

  • 右パネル:縦に約2,800px続く1本のスクロールを、「作る・色・動き・編集・ファイル」の5タブに分ける(選択肢を減らすほど迷わない)
  • ヘッダー:左に「戻す・やり直し・次の一手」、右に「書き出し」。設定類は ⚙ メニューにまとめる
  • ボタンの大きさ:PCは約34px、スマホは44px以上(指で押せる大きさ)
  • スマホ:親指が届く画面下に操作バー。パネルは下から半分だけ出して、作品が見えたまま操作できる

そして私の次のダメ出しがこれです。

エクスポートボタンが色的にチカチカしてアウト、目に優しい配色などにせよ

真っ青に塗りつぶしたボタンが、薄い色付きの落ち着いたボタンになりました。

本音
「主な操作を1つだけ強調する」理論で真っ青にされ、
「チカチカする」で地味にされました。
理論は人間の目に負けました。


💸 現実:週間使用量の壁

前回の記事では、5日目に Claude の上限に到達して Gemini に乗り換えました。

今回も来ました。

週刊使用料の上限に満たないように最低限の仕事をせよ

本音
「週刊」は誤字です。
毎週発売される使用料ではありません。
テキトーに誤字してもお構いなく進みます
知能が溶けるね...

Claude Code はこの一言で、残りの作業を「コードの3件だけ直して push、記事と動画は保留」に切り替えました。

  • 「最低限」と言われたら、ちゃんと最低限にする
  • やらなかったことは、やらなかったと報告する

ここが地味に一番助かりました。


🔭 今後

まだ手を付けていない、正直な残りです。

  • 重さ:今はブロック1個ごとに描画しているので、64×64×64 のような大きいサイズで重くなる可能性があります。描画方式の変更は大工事なので、別ブランチで進める予定です。
  • スマホ実機での確認:画面幅を切り替えた確認しかしていません。
  • 「次の一手」の育成:提案の種類を増やす予定です。

本音
「今後」と書くと、やる気があるように見えます。
実際は、使用量が回復してから考えます。


まとめ

  • 作った人は、自分のアプリのバグを避けて歩いている。全部押させるとすぐ見つかる。
  • 一流のコードでも、呼ばれていない関数は働かない(autoSave は Ctrl+S 専用だった)。
  • AI の「良かれと思って」は、要らなければすぐ「やめて」でいい。
  • 「次の一手」は押し続けられる。人間の改良も、たぶん押し続けるしかない。

VoxoB はブラウザだけで動きます。登録も不要です。

本音
もう全部あいつ(Claude Code)一人でいいんじゃないかな

1
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
1
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?