🐥

WebアプリをAIでほぼ手放しで作ってみた

HiCurl

2025/10/31に公開

 はじめにタイトルの通り、Web アプリを 9 割以上手放しで作ってみたので一連の流れをご紹介します。
今回作ったのは、Minecraft のスキン画像を 3D で表示できる Web アプリです。

 モチベーションこの Web アプリを作るに至った理由は以下の通りです。
AI にどこまで任せられるのかを知りたかった
逆に AI に任せられない部分を知りたかった
AI を十全に使うためには、言語知識や設計知識などの基盤となる知識だけではなく、AI のできること/できないことをなるべく把握しておく必要があると思います。

 全体の流れ大まかな開発の流れは以下の通りです。
ChatGPT で要件整理・設計
Claude Code で実装
今回は用途に応じて 2 つの AI ツールを使い分けました。ChatGPT には対話形式で要件を整理してもらい、Claude Code には実際のコーディングを任せるという役割分担です。

 フェーズ 1: ChatGPT との要件整理・設計まずは ChatGPT とざっくばらんに対話しながら、何を作るか、どう作るかを固めていきました。
利用したモデルは GPT-5 Thinking です。
作りたかったのは「Minecraft のスキン画像を 3D で表示する Web アプリ」です。最初は漠然としたアイデアでしたが、ChatGPT との対話を通じて以下のようなことを決めていきました。

技術選定: Three.js、Svelte 5、静的ホスティング

機能要件: 64×64 と 64×32 の両方のスキン形式に対応、各パーツの表示/非表示切り替え

設計方針: UV マップの定義、メッシュの階層構造、ピクセルにじみ対策など
ChatGPT の口調が特徴的なのはご愛敬

 重要だったこと: ソースを提示させるChatGPT と対話する際に特に意識したのが、ソースや参考資料を提示してもらうことです。
AI の回答をそのまま鵜呑みにするのではなく、「それってどこに書いてありますか?」「参考になるライブラリはありますか?」と聞くようにしました。
この姿勢が功を奏したのが、skinview3d というパッケージの発見です。
Three.js で Minecraft スキンを表示する方法を聞いたときに、「既存のライブラリはないか」と尋ねたところ、ChatGPT が skinview3d というパッケージを教えてくれました。このパッケージはまさに Minecraft スキンの 3D 表示に特化したライブラリで、今回のアプリの軸となりました。
もしソースを聞かずに ChatGPT の回答だけで進めていたら、自分で UV マッピングなどを全部実装する羽目になっていたかもしれません。既存のライブラリや参考情報を引き出すことで、開発の効率が大きく変わることを実感しました。
また、ChatGPT が使う専門用語で知らないものがあったら、その場で「それって何ですか?」と聞くようにしました。例えば「UV マッピング」「ピクセルブリーディング」といった用語は、聞かずに流してしまうと後で詰まる原因になります。
この段階で技術的な課題も洗い出しておきました。例えば 64×32 形式のスキンは古い形式なので、これを新しい 64×64 形式に正規化する必要があることなどです。
ChatGPT は対話形式で「これってどうなんですか?」「じゃあこういう方法は?」とやり取りしながら設計を詰めていくのに向いているな、と感じました。

 フェーズ 2: Claude Code との実装設計が固まったところで、実装フェーズに入りました。ここでは Claude Code を使いました。
Claude Code は CLI 上で操作できる AI ツールで、コーディングなどのファイルの読み書きやターミナル操作を自動でやってくれます。私は主に「これやって」と指示を出すだけで、あとは Claude Code が勝手に実装を進めてくれました。
このフェーズでやった主な作業は以下の 3 つです。

 タスク 1: JSON 設定のインポート機能設定を JSON でエクスポートできるようにしていたので、逆にインポートできるようにしました。
最初はファイル選択ダイアログがうまく動かない問題がありましたが、Claude Code が原因を特定して修正してくれました。

 タスク 2: 静的ホスティング対応SvelteKit のアプリをデプロイできるようにする作業です。

adapter-static の導入
Docker + Nginx の設定
Makefile の作成
この辺りは定型的な作業なので、Claude Code に全部お任せしました。設定ファイルをいくつか作って、動作確認までやってくれました。

 タスク 3: スライダーのバインディングバグ修正ここが一番詰まったところです。次のセクションで詳しく説明します。

 詰まったところと解決方法
 問題: スライダーが動かない設定画面でスライダーを動かしても、値が更新されない問題が発生しました。
// NG: getter だけでは双方向バインディングできない
get posX() { return this.position[0]; }
Svelte 5 では bind:value で双方向バインディングするには、getter と setter の両方が必要なのですが、getter しか定義していなかったのが原因でした。

 解決方法Claude Code に調査してもらったところ、Svelte 5 のドキュメントから $bindable() の仕様を見つけてきて、以下のように修正してくれました。
// OK: getter と setter のペアで双方向バインディング
get posX() { return this.position[0]; }
set posX(value: number) { this.position[0] = value; }
この問題は、私が Svelte 5 の仕様をちゃんと理解していなかったのが原因でした。Claude Code はドキュメントを検索して正しい実装方法を提示してくれたので、スムーズに解決できました。

 AI 開発で感じたこと
 AI に任せられること
定型的な作業: Docker や Nginx の設定など、パターンが決まっている作業

ドキュメント検索: 新しいフレームワークの使い方を調べて実装してくれる

バグ修正: エラーメッセージから原因を特定して修正案を出してくれる

 AI に任せられないこと
要件の決定: 何を作るか、どういう機能が必要かは人間が決める必要がある

設計の判断: 複数の選択肢がある場合、どれを選ぶかは人間が判断する

動作確認: AI が作ったコードが本当に正しく動くかは人間が確認する必要がある

 人間の役割今回の開発を通じて、AI との協働において人間がやるべきことは以下だと感じました。

方向性を決める: 何を作るか、どう作るかの大枠を決める

判断する: AI が提示した選択肢から選ぶ、または「これは違う」と指摘する

検証する: AI が作ったものが本当に期待通りに動くか確認する
AI は強力なアシスタントですが、全部お任せというわけにはいきません。人間が適切に方向を示し、判断し、検証することで初めて良いものができる、という実感を得ました。

 まとめ今回、Web アプリを AI に 9 割方作ってもらうという実験をしてみました。
使い分けがポイント
ChatGPT: 対話しながら要件・設計を固める
Claude Code: 実装を自動で進める
AI のできること/できないこと
できる: 定型作業、ドキュメント検索、コード生成
できない: 要件決定、設計判断、動作検証
人間の役割
方向性を決める
選択肢から判断する
結果を検証する
AI との協働開発は、AI に全部任せるのではなく、人間が適切に関与することで効果を発揮します。今後もこのバランス感覚を磨いていきたいと思います。