「Vibe Coding」という言葉が最近非常に流行っています。簡単に言うと、**AIに「何をしたいのか」を伝えて、AIにコードを書いてもらうというものです。
聞こえは素晴らしいですが、実際に使ってみると、初心者はよく3つの問題に直面します：インターフェースが見苦しい、機能が不完全、セキュリティが低い。結局できあがったものは、人に見せるのが恥ずかしいほどです。
この記事では、これらの問題をどう避けるかについて話します。
何がVibe Codingか
まずは明確にしておきますが、Vibe Codingとは「AIにすべてを任せてコードを書いてもらう」というわけではありません。あなたが方向性を決め、AIがそれを実行し、あなたが調整するというものです。
すべてのプログラミング言語に精通している必要はありませんが、以下のことが必要です：
- 何を望んでいるのかを明確に説明できること
- AIが提案した案が良いかどうかを判断できること
- 自分でどの部分をチェックしなければならないかを知っていること
これら3つが基本です。これらがなければ、単なる「運任せ」であり、「Vibe Coding」とは言えません。
デザイン：AIに自由に任せない
AIがフロントエンドのコードを書く際の最大の問題は、コードが動作しないことではなく、動作しても見た目が悪いことです。
中央に大きなタイトルを置いたり、3枚のカードを使ったり、青と紫のグラデーションを使ったりする——どんなプロジェクトでも、AIはこのようなデザインを提案する傾向があります。その理由は、これらがトレーニングデータの中で最も一般的な「安全な選択肢」だからです。
どう対処するか
1. 参考例を提供する
「見た目の良いランディングページを作って」と言うのではなく、「linear.appのスタイルを参考にして、ツール紹介ページを作って」と言いましょう。具体的な参考例があれば、AIの出力も信頼できるものになります。
2. デザインルールを設ける
プロジェクトにデザインガイドラインを作成し、AIに以下のことを伝えましょう：
- 使用するフォント（例：Inter、Noto Sans SC）
- メインカラー（AIに選ばせないでください。ほとんどの場合、青と紫を選ぶでしょう）
- 间距の規則（8px、12px、16pxなど）
- 使用しないべき要素（例：グラデーション背景やカードの重ね合わせ）
3. ステップバイステップで進む
まずAIに構造を作らせ、レイアウトがOKかを確認したら、その後で内容やスタイルを追加させましょう。一度にすべてを完了させると、AIはすべてに「余計な要素」を加えがちです。
機能：まずは動作させてから完璧にする
初心者がよく犯す間違いは、最初から機能が完全な大規模なプロジェクトを作ろうとすることです。結果として、何も使えない状態になります。
正しい進め方
第1ステップ：最小限の実用可能なバージョン
まずは核心機能のみを持つバージョンを作りましょう。例えば、ノートアプリを作る場合、最初のバージョンでは「ノートの作成」と「ノートの閲覧」だけで十分です。検索機能やタグ付け、インポート/エクスポート機能は後で追加しましょう。
第2ステップ：機能を段階的に追加する
機能を1つずつ追加し、それぞれテストして問題がないことを確認してから次に進みましょう。AIが書いたコードには隠れたバグがよくあります。一度に10個の機能を書かせると、デバッグが非常に大変になります。
第3ステップ：境界ケースを処理する
AIは以下のような状況を自動的に考慮しません：
- ユーザーの入力が空の場合は？
- ネットワークが切断された場合は？
- データ量が多い場合は？
これらが「機能の完璧化」の鍵です。機能が多いことではなく、各機能が信頼できることが重要です。
AIとの協力のコツ
- 一度に1つの部分だけを修正させる。複数の部分を同時に修正すると、全体のバランスを崩しやすくなります。
- AIにコードの説明をさせる。すべての行を理解するためではなく、AIがあなたの要求を正しく理解しているかを確認するためです。
- 問題が発生したら分割して対処する。大きな問題を小さな問題に分けて、一つずつ解決していきましょう。
セキュリティ：最も見落とされがちな部分
AIがコードを書く際の致命的な問題は、セキュリティを考慮しないことです。
AIはパスワードをコードに固定したり、入力の検証を省略したり、データを安全でない方法で保存したりします。これは意図的なことではなく、トレーニングデータに安全なコードが少ないためです。
初心者が注意すべきこと
1. パスワードを絶対にコードに書かない
# 間違った例
API_KEY = "sk-1234567890"正しい方法
API_KEY = process.env.API_KEY環境変数や設定ファイルを使用しましょう（ただし、設定ファイルはGitにはコミットしないでください）。
2. 入力を必ず検証する
ユーザーの入力内容は何であれ、必ずチェックしましょう。メールアドレスの形式が正しいか、パスワードの長さが適切か、数字かどうかなどです。AIはこれらを自動的には処理してくれません。
3. データベースの保存を暗号化する
パスワードは平文で保存してはいけません。bcryptやargon2などの暗号化手法を使用しましょう。ユーザーの機密情報も暗号化する必要があります。AIは通常、これらを自動的には処理しません。
4. 依存関係を定期的にチェックする
npm auditやpip auditなどのコマンドを習慣的に実行しましょう。AIが導入する依存関係には既知の脆弱性がある可能性があります。
5. AIが「このコードは安全だ」と言っても信じない
AIに自分のコードをチェックさせましょう。AIはよく「問題ない」と言いますが、「このコードにはどのような潜在的なセキュリティリスクがあるか？」と別の角度から尋ねると、より有益な回答が得られるでしょう。
いくつかの実用的なアドバイス
1. エラーメッセージの読み方を学ぶ
完全に理解する必要はありませんが、重要な情報（どの行で、どのようなエラーが発生したか、エラーの種類）を見つける方法を学びましょう。これはAIと効率的に協力するための基本です。
2. バージョン管理を使う
Gitは専門家だけのものではありません。すべての人のためのものです。変更するたびにコミットを行い、問題が発生したら元に戻せるようにしましょう。AIがコードを壊してしまうことはよくありますが、バージョン管理がなければやり直ししかありません。
3. 一度に信じすぎない
AIが「このコードに問題ない」と言っても、自分で実際に動かしてみましょう。AIが「この案が最適だ」と言っても、他にもっと良い方法がないかを調べてみましょう。AIはツールであり、専門家ではありません。
4. 概念を学んでからAIを使う
文法に精通する必要はありませんが、APIやデータベース、フロントエンド/バックエンドの基本概念を理解しておきましょう。これらの基礎があれば、AIの提案が適切かどうかを判断できます。
5. 小さなプロジェクトから始める
SaaS製品を作るのではなく、まずは個人向けのツールやシンプルなウェブサイト、小さなアプリから始めましょう。経験を積んだ後で、より複雑なプロジェクトに挑戦しましょう。
まとめ
Vibe Codingはプログラミングのハードルを下げてくれますが、良いソフトウェアを作る基準は下げてくれません。
デザイン、機能、セキュリティ——これら3つの面ではAIの助けはあまり期待できません。最終的にはあなたの判断が必要です。良いニュースは、専門家にならなくても良いものを作れるということです。必要なのは、「何が良いのかを知り、それをAIに実現してもらう」ことです。
これがVibe Codingを正しく使う方法です。