Vibe Codingとは｜非エンジニアが「動く業務アプリ」をAIに作らせる始め方
結論から言います。プログラミングの知識がなくても、データベースとログイン機能を備えた「動く業務アプリ」を、自分の手で持つことができます。鍵になるのが、作りたいものを自然言語でAIに伝えて開発を進める「Vibe Coding(バイブコーディング)」という方法です。
Vibe Codingとは 2025年2月にAI研究者のアンドレイ・カルパシー氏が提唱した言葉で、作りたいものを自然言語でAIに伝え、生成されたコードを一行ずつ精査するのではなく、動作を確かめながら対話を重ねてアプリを形にしていく開発スタイルを指します。Claude Code・Codexのような、コマンドラインで動くAIエージェントが前提になります。
もともとは試作やプロトタイプを手早く作る方法として広まった言葉です。だからこそ大事なのは使い方で、AI Crewは「コードを理解しなくていい」とは考えていません。最初は誰でも中身が分からないものですが、まず動くものを作り、そこから必要に応じて学んでいく入口としてVibe Codingを位置づけています。この記事では、みやっち🧑💻が講座で受講生と実際に作っている流れに沿って、その最初の一歩を解説します。
「ホームページ」と「動く業務アプリ」は何が違うのか
まず、ここを分けて理解してください。両者は別物です。
- ホームページ(静的サイト) — 訪問者みんなに同じ内容を見せるだけのページ。会社案内やブログがこれにあたります
- 業務アプリ(動的アプリ) — ログインした人ごとに違うデータを表示し、入力を保存できるもの。顧客管理・予約・社内ツールなどがこれにあたります
以前、このサイトを4時間で公開した話を書きましたが、あれは前者の静的なホームページでした。今回の業務アプリは、データを保存する「データベース」と、誰がログインしているかを判定する「ログイン機能」が加わる分、構成要素が増えます。とはいえ、難しくなるのは「Claude Code・Codexに任せる範囲」が増えるだけで、あなたがやることは変わりません。
何を使うのか — ツールの役割分担
Vibe Codingでは複数のサービスを組み合わせます。名前を覚える必要はありませんが、「何がどの役割か」だけ知っておくと、AIの指示が理解しやすくなります。
| 役割 | ツール | たとえると |
|---|---|---|
| AIエージェント本体 | Claude Code(・Codex) | 実際に手を動かす職人 |
| データの保管庫＋ログイン機能 | Supabase | 鍵付きの倉庫と受付係 |
| コードの保存・共有 | GitHub | 原稿の保管・履歴管理庫 |
| 公開用のサーバー | Vercel | お店を開く土地 |
技術スタック(どの言語で作るか)も、Claude Code・Codexが選んで書いてくれます。最初からコードの中身をすべて理解するのは、非エンジニアには無理がありますし、その必要もありません。まずは「動くものができるところまで」たどり着くことを目標にして、理解を深めるのはそのあとで十分です。
作る流れ — 対話で進める6ステップ
講座では、ChatGPTのような対話アプリを題材に、次の流れで進めます。AIに指示を出すと、必要な作業をAI側が提案してくれます。人間は、その提案の内容と動いた結果を一つずつ確かめながら、対話で前に進めていきます。
- 作業フォルダを用意する — パソコンに新しいフォルダを1つ作り、ターミナルでそこに移動します
- Claude Codeを起動する —
claudeと打ち、アカウントで認証します(Claude Codeの利用には月額22ドルのProプラン以上への加入が必要です) - 作りたいものを言葉で伝える — 「こういうアプリを作りたい」と入力すると、AIが計画を立てて実装を進めます
- データベースとログインをつなぐ — AIの案内に沿って、Supabaseの設定を1つずつ進めます
- 自分のパソコンで動作を確認する — まず手元で挙動を見て、直したい点を日本語で伝えます
- インターネットに公開する — GitHubにコードを保存し、Vercelとつなぐと公開されます
ポイントは、最初にGitHubへ保存したあとだけVercel側で「つなぐ」操作が一度必要で、2回目以降はGitHubに保存するたびに自動で公開が更新されることです。一度仕組みができれば、修正は「直して」と頼んで保存し直すだけになります。
詰まったら、その場所だけ学ぶ「パラシュート学習法」
業務アプリの開発は奥が深く、技術を体系的に全部押さえてから作ろうとすると、何年もかかってしまいます。みやっち🧑💻が勧めているのは逆の順番です。
まず作りたいものを決めて、AIと対話しながら走り出す。詰まった箇所に出くわしたら、その都度、必要なところにだけ降りて学ぶ。 上空から知識を一望して順番に登るのではなく、必要になった地点にパラシュートで直接降りる——だから「パラシュート学習法」です。
非エンジニアが挫折する最大の原因は、「全部わかってから」と構えてしまうことです。順番が逆なのです。先に動くものができると、「自分にも作れた」という手応えと感動から、「もっとちゃんと知りたい」という気持ちが自然と湧いてきます。その気持ちが出てきたら、詰まった箇所に降りて学べばいい。学ぶ意欲は、動くものを作ったあとからついてきます。この学び方の定義・名前の由来・受講生の実例は、パラシュート学習法とはに正典としてまとめています。
セキュリティは「最低限」から始める
動くアプリを公開する以上、セキュリティは無視できません。ここは慎重に扱う必要があるので、まず押さえやすいところから始めてください。
- APIキーや接続情報を、コードに直接書かない — キーそのものは「環境変数」という入れ物に格納し、コードからはその変数を読み取るだけにします。コードの中に生のキーが残らないので、コードを共有してもキーの中身までは一緒に出回りません
- AIへのチャットやターミナルにAPIキーを直接貼り付けるのは避ける — 入力履歴として残る可能性があるためです。キーは指定の設定ファイル(
.envなど)に自分で貼り付けます - コードを置くGitHubのリポジトリは「プライベートリポジトリ」にする — リポジトリとはコードの保管場所のことで、「パブリック(公開)」のままだと中身が誰でも見られる状態になります。意図せず公開になっていないか確認し、なっていればAIに「プライベートリポジトリに変更して」と頼みます
- ログインした本人のデータだけを見られるよう制限する — Supabaseには、ログイン中の本人の行(レコード)以外を読み書きできないようにする「RLS(行レベルセキュリティ)」という仕組みがあります
ただし、ここに挙げたのは出発点にすぎません。どんな仕組みも、あらゆる攻撃を完全に防げるわけではありません。顧客の個人情報や決済を扱う本番運用に進むなら、自社の規定やセキュリティ要件を確認し、情報システム担当や専門家に相談することを強くおすすめします(本記事は法的・技術的な助言ではありません)。AIの権限管理の考え方はClaude Codeのセキュリティの記事も参考にしてください。
既製のSaaSに業務を合わせる時代から、業務に合うツールを持つ時代へ
これまでは、世の中にある既製のサービス(SaaS)に、自分の業務のやり方を合わせるのが当たり前でした。Vibe Codingが現実的になったいま、自分の業務にぴったり合うツールを、自分で持てるようになりつつあります。月額のサービス料を払い続けて使わない機能を抱えるより、必要な機能だけのアプリを自前で育てる——そういう選択肢が、非エンジニアの手にも入ってきました。
何を作るか言葉にできれば、最初の一歩は今日からでも踏み出せます。とはいえ、データベースやログイン、公開の段取りは、一人だと詰まりやすいのも事実です。AI Crewでは、こうした「動く業務アプリ」づくりを、あなたの事業に合わせて一緒に進めています。気になる方は、まず無料セミナーでお会いしましょう。
