プロと実践！ ゼロから始めるバイブコーディング
Claude Codeに複雑な指示をいきなり投げるのはダメ！ 積極的に使いたい「Plan Mode」と「プロジェクト機能」で開発精度を高める
［第7回］承認制ログインをAIと安全かつ効率的なテクで実装する
2026年5月15日 09:00
「非エンジニアでもアプリを作りたい！」という思いから、生成AIを活用して自作アプリの開発（バイブコーディング）に挑戦するが、「公開の壁」に立ち尽くしてしまう筆者。
そこで、GMOインターネットグループの現役エンジニア、石丸智輝氏に教えを仰いだ。Google AI Studioでフロントエンドを作り込み、アプリの名前を「AiLA」に決定。開発の場をClaude Codeに移し、数々のトラブルをも乗り越えながら、Gitによるソースコードのバックアップから、Firebaseエミュレーターの導入、ログイン機能やデータベース、画像ストレージの実装までを一気に進めた。
これは、素人とプロの二人三脚による、泥臭くもリアルな開発ドキュメンタリーである……
今回は、管理者が登録ユーザーを承認しなければ、アプリを使うことができない仕組みとして「承認制ログイン」を実装。あわせて、Claude Codeの「Plan Mode」や、Claude（チャット版）のプロジェクト機能、CLAUDE.mdの更新運用といった、開発をより安全かつ効率的に進めるテクニックも一通り学んでいく。
起動できなかった原因はエミュレーター。CLAUDE.mdに手順を覚えさせる
今回の作業は、いつものようにアプリを起動するところから始まった。
「アプリケーションを起動してください」と伝えると、Claude Codeが裏側で開発サーバーを立ち上げる。ところが、ブラウザーでログインしようとすると、ネットワーク関連のエラーが返ってきた。Claude Codeのチャット欄で原因を相談したところ、開発サーバーは起動しているものの、Firebaseエミュレーターが立ち上がっていないことがわかった。
新しいチャットを始めるたびに、Claude Codeは過去の文脈をある程度忘れてしまう。
前回はFirebaseエミュレーターと開発サーバーの2つを意識して起動していたが、今回は片方しか立ち上がっていなかった。そこで、起動手順を次回以降も参照できるようにするため、CLAUDE.mdへルールを追記してもらうことにした。「アプリケーションの起動手順をCLAUDE.mdに記録してください」と指示すると、Claude Codeは仕様書ファイルに、別ターミナルでエミュレーターを立ち上げる手順を加えてくれた。
「CLAUDE.mdは、Claude Codeにプロジェクトの前提や守ってほしいルールを伝えるためのメモのようなものです。起動方法や開発時の注意点を書いておけば、新しいチャットでも参照されやすくなり、毎回同じ説明を繰り返す手間を減らせます。開発が一段落するたびにメンテナンスしていくのが、AIと長く付き合うコツです」（石丸氏）
これは、バイブコーディングでハマりがちな「同じ説明を毎回しないといけない」問題を、地道に解消してくれる仕組みなのだ。
複雑な指示はチャット版Claudeで練り上げる。プロジェクト機能で要件を壁打ち
今回のメインタスクは、登録すれば誰でも使える現在の仕様を、管理者が承認したユーザーだけが使える仕様に変更することだ。
当初、筆者が「許可リストに載っているユーザーだけログインできる」というプロンプトを入力したところ、想像していた動作と異なる回答が返ってきた。今回作りたいのは、ユーザーがアクセス申請を出し、管理者が一件ずつ承認するワークフローのため、ここはやり直しだ。
石丸氏によると、このような指示が複雑になる場面では、いきなりClaude Codeに投げる前に、チャット版のClaudeでプロンプトを壁打ちしてから渡すと精度が上がるとのこと。
「複雑な要件をいきなりClaude Codeに投げると、AIとの認識がズレたまま実装が進んでしまうことがあります。チャット版のClaudeで対話しながら要件を整理して、最後に専用のプロンプトを生成してもらう手順を踏むと、結果が安定します」（石丸氏）
さらに今回は、Claudeのプロジェクト機能を利用することにした。
プロジェクト機能を使うと、同じプロジェクト内で共有した前提情報や関連ファイルの内容を踏まえた回答が得られるようになる。毎回、前提となる情報を渡す必要がないので手間が省けるのだ。
今回は、チャット版のClaudeに新しく「AiLAプロジェクト」を作成し、先ほど更新したCLAUDE.mdの中身を手動で貼り付ける。その上で「アプリケーションの仕様を確認してください」と伝えると、Claudeは現状を把握した上で、何を変えたいのかと逆に質問してきた。
あとは対話形式で要件を詰めていけばよい。
例えば、新規ユーザーは登録時に承認待ちステータスになり、管理者は管理画面から個別に許可・拒否ができ、申請は1度しか送れず、許可されていないユーザーはアプリ画面に入れない、テスト用のダミーデータも用意する、といった条件を順に確認していった。
最後に「Claude Codeに渡すためのプロンプトを作成してください」と依頼すると、整理された指示文が出力された。最初のプロンプトはやや専門用語寄りだったため、「非エンジニアでも理解できる表現にしてください」と追加で頼み、平易な日本語に書き直してもらった。
石丸氏からは、本番ではGoogleログインを採用する予定があることも、Claudeに伝えておくよう助言があった。「本番環境ではGoogleログインを採用する予定だが、この仕様で問題ないか」という確認を行っておくだけで、後の手戻りを防げる可能性が高まるそう。Claudeの回答は、今回の仕様であれば基本的に問題ない、というものだった。
AIにあらかじめ計画を立てさせる「Plan Mode」で想定外の実装を防ぐ
さて、完成したプロンプトをVisual Studio Codeに戻ってClaude Codeに貼り付け、実装を依頼した。
Claude Codeは、ToDoリストを作成し、タスクを1つずつ自律的に処理していく。承認ダイアログが何度か出るが、内容を確認して［Yes］を選ぶと、数分で一通りの実装が完了した。
動作確認に進むと、申請を送信したアカウントは想定通り「承認待ち」になり、管理者アカウントから［許可］ボタンを押すと、そのアカウントがログインできるようになる。ところが、申請を送信した直後、勝手にログアウトされる動作になってしまっていた。
Claude Codeが気を利かせて実装してくれたものだが、ユーザーエクスペリエンスとしてはやや唐突だ。そこで「申請が完了したら、画面遷移はユーザーが操作できるようにしてください」と指示した。しかし、またもや想定とは違う機能が実装されてしまった。
ここで石丸氏が紹介してくれたのが「Plan Mode」だ。
Claude Codeのチャット画面左下にある［Ask before edits］をクリックすると、いくつかのモードが切り替えられ、その中の1つに「Plan Mode」がある。
「Plan Modeは、指示を出してもいきなりコードを書き換えず、まず読み取り専用でコードベースを分析し、修正計画を立ててくれるモードです。必要に応じてClaude Code側から確認の質問をしてくれるので、実装前に『何を、どの方針で直すのか』をすり合わせられます。複数のファイルにまたがる変更や、認証まわりのように慎重に進めたい修正では、意図しない実装が進むリスクを減らせます。通常のチャット画面に比べると、少しとっつきにくく感じるかもしれませんが、Claude Codeを使うならぜひ覚えておきたい機能です。慣れてきたら、積極的に使ってみてください」（石丸氏）
そこで「ログアウトボタンはなくして、ホーム画面に戻るような挙動にしてください。自動ログアウトはしますが、ログアウトを知らせるような通知は不要です」と相談してみた。
すると、今回の修正方針をまとめた計画が提示された。内容を確認して［自動で実行］を選ぶと、その場で実装に進む。Plan Modeは、意図と違う実装が走るリスクを大きく減らせるため、初学者にこそおすすめしたいモードだ。
これでユーザー側の体験は整ったので、続けて管理者側の挙動も改めて確認した。
テスト用のダミーデータに含まれる管理者アカウントでログインすると、承認待ちのユーザーが一覧で表示される。［許可］ボタンを押せばそのアカウントは利用可能になり、［拒否］ボタンを押せば申請が弾かれる仕組みだ。一度申請を送ったユーザーが再度申請を送ろうとしても受け付けられず、当初詰めた要件通りのワークフローが成立していた。
CLAUDE.mdとGitの運用ルールを最後に整える
ログイン承認の仕様が固まったところで、最後にドキュメントとGitの運用を整理する。
Claude Codeで実装した内容は、ソースコード自体には反映されているものの、CLAUDE.mdにまとめた仕様や運用ルールは自動では更新されない。「今回開発した内容をCLAUDE.mdに追記してください」と指示することで、ログイン承認まわりの仕様が追記される。
「CLAUDE.mdは、重要な仕様や運用ルールを残す場所として使うと効果的です。ただ、AIで開発するとコードの更新も速いため、細かい内容まで常にドキュメントへ反映するのは大変です。ログイン承認のような重要な仕様や判断理由はCLAUDE.mdに残し、詳細な実装や細かな仕様については、必要に応じてClaude Codeにコードを読み取ってもらう、という使い分けが現実的ですね」（石丸氏）
続いて、変更内容をGitHubに反映する作業だ。
これまでは、コミットとプッシュを毎回手動で指示していたが、筆者はよくこの作業を忘れてしまう。そこで、開発の区切りごとにコミットとプッシュを促してもらう運用にできないかと相談したところ、その方針もCLAUDE.mdに追記すればよいとのこと。
これで以降は、実装が一段落するごとにClaude Codeが日本語のコミットメッセージを作成し、内容を確認するダイアログを挟んだ上で、プッシュまで進めてくれるようになった。完全に丸投げになるわけではなく、毎回ユーザーが確認した上で、GitHubへ反映される仕組みだ。
「本格的なチーム開発では、作業用の場所を分けて変更し、他の人に差分を確認してもらってから本体に反映するのが一般的です。ただ、今回のように個人で動作確認をしながら進める段階であれば、まずは変更の区切りごとにコミットを残し、内容を確認してからプッシュするだけでも十分に役立ちます。あとから戻れるセーブポイントを作る感覚で、こまめに履歴を残していくのが大事ですね」（石丸氏）
今回も筆者が行ったのは、Claude Codeへの自然言語の指示と、チャット版Claudeにおいてプロンプトを練る作業だけだ。
承認ワークフローという複雑な機能でも、Plan Modeやプロジェクト機能で壁打ちすることで、大きなトラブルもなく実装できた。ただし現時点では、ローカル環境でFirebaseエミュレーターを使って動かしている開発用の状態にすぎない。サーバーを停止すればデータは消え、本番環境とは挙動が違う部分も残っている。
次回は、アプリに必要な追加機能を実装し、ローカル環境での開発をひとまず完了させる。さらに、AIを単なる「開発ツール」としてではなく「レビュアー」としても活用し、ソースコードのセキュリティチェックやステージング環境の構築に向けたブラッシュアップに着手する予定だ。
（第8回へ続く）
著者プロフィール：柳谷 智宣
IT・ビジネス関連のライター。キャリアは26年目で、デジタルガジェットからWebサービス、コンシューマー製品からエンタープライズ製品まで幅広く手掛ける。近年はAI、SaaS、DX領域に注力している。日々、大量の原稿を執筆しており、生成AIがないと仕事をさばけない状態になっている。
・著者Webサイト：https://prof.yanagiya.biz/
