コーディング嫌いのSEが8日で静的サイトを完成させた実録：Claude Codeによるバイブコーディングの実力とは

エンジニアの中には「コーディングの細かい作業は面倒だが、アイデアは実現したい」という本音を持つ人が少なくありません。今回取り上げるのは、そんな率直な思いをClaude Codeにぶつけ、わずか8日間で実用的な静的サイトを完成させた実例です。

作成されたのは「コピペ de UI」という業務Webアプリ向けのUIコンポーネント集サイト。動くデモ、サンプルソース、AIプロンプトの3点セットで23ページ分のコンポーネントと3本の記事を提供する内容を、フレームワークを使わずバニラJavaScriptで実装し、Cloudflare Pagesでホスティングしています。

この事例が示すのは、AIコーディングツールが単なる「コード補完」の域を超え、プロジェクト全体の実装パートナーとして機能し始めている現実です。

「バイブコーディング」という言葉を初めて聞く方もいるかもしれません。これは「雰囲気（Vibe）で指示を出してコーディングする」手法を指す造語で、厳密な仕様書や詳細な設計図なしに、自然言語での対話を通じてAIに実装を任せるアプローチです。

投稿者は「正直なめてました」と述べていますが、これは多くのエンジニアが感じる共通の驚きでしょう。従来は「曖昧な指示では良いコードは生まれない」というのが常識でしたが、Claude Codeのような高度なAIツールは、この常識を覆しつつあります。

8日間で達成した内容

投稿には「途中でわりとやらかしてます」という正直な告白もあり、すべてが順風満帆ではなかったことが伺えます。しかし、それでも8日間で実用レベルのサイトを完成させた事実は重要です。

GitHub Copilotとの決定的な違い

Claude CodeとGitHub Copilotを比較すると、その役割の違いが明確になります。GitHub Copilotは「コーディング中の補完」に特化しており、エディタ内での行単位・関数単位の支援が強みです。一方、Claude Codeは「会話ベースのプロジェクト構築」に長けており、ファイル構成の提案から実装、デバッグまで一貫して対応できます。

今回の事例で注目すべきは、**プロジェクト全体のアーキテクチャ判断**までAIが担っている点です。フレームワークを使わない選択、ディレクトリ構造、デプロイ先の選定など、従来は人間が設計段階で決定していた事項を、Claude Codeとの対話の中で自然に決めていったと推測されます。

メリット：開発速度の劇的な向上

8日間で23ページという数字は、従来の開発手法と比較して驚異的です。一般的なWeb開発では、1ページあたり半日〜1日かかることを考えると、**3〜5倍の生産性向上**が実現されています。

この高速化を可能にしているのは：

1. **ボイラープレートコードの自動生成**：繰り返しパターンをAIが学習し即座に展開

2. **構文エラーの事前回避**：AIが生成時点で文法的に正しいコードを出力

3. **実装パターンの一貫性**：人間のブレがなく統一されたコード品質

注意点：「やらかし」から学ぶこと

投稿者が認める「やらかし」は、バイブコーディングの限界を示唆しています。考えられる問題点として：

**依存関係の見落とし**：AIは指示された機能は実装しますが、セキュリティ、パフォーマンス、アクセシビリティといった非機能要件は明示的に指示しないと考慮されません。

**技術的負債の蓄積**：短期間での実装は「動けばいい」レベルになりがちで、保守性やスケーラビリティが犠牲になる可能性があります。

**ブラックボックス化のリスク**：自分で書いていないコードは理解が浅くなり、後の修正や機能追加時に困難が生じます。

適用範囲：どんな案件に向いているか

この手法が特に効果を発揮するのは：

逆に慎重になるべきは：

アクション1：小さなプロジェクトで実験する

既存の大規模プロジェクトではなく、まずは個人的なツールや社内向けの簡単なサイトで試してみましょう。具体的には：

1. Claude.aiにアクセスし、「〇〇の機能を持つシンプルなHTMLページを作りたい」と入力

2. 生成されたコードをローカルで動かしてみる

3. 「もっと〇〇な感じにしたい」と自然言語でフィードバック

4. 3〜5回の対話でどこまで完成度が上がるか体感する

ポイントは**完璧を求めず、AIとの対話のリズムを掴むこと**です。

アクション2：「やらかし」を想定した検証プロセスを組み込む

AI生成コードには必ずレビュー工程を設けましょう：

これらをチェックリスト化し、生成後の必須工程として習慣づけることで、バイブコーディングの弱点を補えます。

アクション3：生成されたコードを「学習教材」として活用する

自分で書いていないコードこそ、学びのチャンスです。生成されたコードを読み解く時間を意図的に設けましょう：

この分析プロセスを経ることで、AI依存ではなく**AIとの共同学習**という健全な関係を築けます。バニラJSでの実装を選んだ投稿者の事例も、フレームワークに頼らない基礎力を磨く良い教材になるでしょう。

この事例が示すのは、AIコーディングが「魔法の杖」ではなく「優秀な実装パートナー」であるという現実です。8日間という短期間での成果は素晴らしいものの、「やらかし」を含む試行錯誤があったことも事実として受け止めるべきでしょう。

重要なのは、AIの力を借りながらも**最終的な品質責任は人間が持つ**という姿勢です。バイブコーディングは開発速度を飛躍的に向上させますが、それは同時に、エンジニアに「アーキテクチャ判断」「品質保証」「技術選定」といったより高次の能力を求めます。

コーディングが面倒だと感じるすべてのエンジニアにとって、この事例は「まず試してみる」ことの価値を教えてくれます。完璧な計画よりも、AIとの対話を通じた実践的な学びが、次世代の開発スタイルを切り開いていくのです。

この情報は @shun@AI Builder さんの投稿を参考にしています。