プロと実践！ ゼロから始めるバイブコーディング
現役プロに教わるClaude CodeをVS Codeに導入する方法とローカル環境でのアプリ起動 ～APIキーをチャットに直接貼るのはNG!?
［第5回］丸投げでローカル環境にアプリが立ち上がる
2026年4月10日 09:00
「非エンジニアでもアプリを作りたい！」という思いから、生成AIを活用して自作アプリの開発（バイブコーディング）に挑戦するが、「公開の壁」に立ち尽くしてしまう筆者。
そこで、GMOインターネットグループの現役エンジニア、石丸智輝氏に教えを仰ぎ、Google AI Studioでのアプリ開発をスタートした。トラブルを乗り越えながらフロントエンドを作り込み、スマートフォンでの動作チェックもOK。アプリの名前は「AiLA」に決定し、Google AI Studioの作業は無事終了した。
続いて、Google AI StudioとGitHubを連携させ、ここまで作ったソースコードをアップロード。師匠との一問一答を通して細かい事前設計を行いながら、認証やデータベースなどのアプリの基盤を担う「Firebase」の準備、そして開発に使う「Visual Studio Code」のセットアップも完了し、正直、地味な準備ではあるが一歩ずつ前に進んでいる感じがしてきた。
これは、素人とプロの二人三脚による、泥臭くもリアルな開発ドキュメンタリーである……
前回は、開発に使う「Visual Studio Code（VS Code）」とアプリの基盤となる「Firebase」の準備を進めた。今回は、いよいよVS CodeにAIコーディングアシスタント「Claude Code」をセットアップし、自分のPC（ローカル環境）でアプリケーションを起動させるという、地味だが重要な開発の土台作りを行う。
VS Codeに「Claude Code」を導入してAI向けマニュアルを作成する
まずはVS Code上でClaude Codeを使えるようにする。
Anthropicが提供している公式のドキュメントに沿って、VS Codeの拡張機能からインストール。VS Codeのようなツールは「IDE（統合開発環境）」と呼ばれ、平たく言えば「高機能なメモ帳」のようなものだという。
「インストールが終わったら、最初にClaudeアカウントへのログインが必要です。チャット欄からログインを選択するか、『/login』と入力して実行してください。Claude Codeは、このようにスラッシュコマンドを使ってさまざまな操作をショートカットのように実行できるのが特徴です」（石丸氏）
指示に従うとブラウザーが立ち上がり、認証画面が表示された。筆者は有料版の「Claude Pro」を契約しているので、そちらを選択して連携を完了させた。VS Codeの右側にチャットUIが現れ、これでAIと対話しながら開発する準備が整った。
「次に『CLAUDE.md』というファイルを作成します。これは、Claudeがこのプロジェクトでどう振る舞えばよいかを記したマニュアルや説明書のようなものです。何もないと、Claudeが毎回自分で考えてコードを解析することになり、効率が悪いため、最初に作っておきます。チャット欄で『/init』と実行すると、Claude自身が既存のファイルを読み込んで自動作成してくれます」（石丸氏）
実行すると、プロジェクトの概要がまとめられたファイルが英語で生成された。
しかし、英語のままだと筆者が内容を把握できない上、「React」や「SPA」といった見慣れない単語が並んでいる。そこで「CLAUDE.mdを日本語に書き換えてください。私は非エンジニアなので専門用語を使わず、わかりやすく書いてください」とお願いしてみた。
すると、「CLAUDE.mdは、あなたではなく私が読むための特別なファイルなので……」という、なんとも人間らしい（？）ツッコミが返ってきた。たしかに、AIへの指示書を人間向けにわかりやすくしても仕方がない。とはいえ、自分が読めないのも不安なので、専門用語ありの日本語で書き直してもらった。
APIキーをチャットに直接貼るのはNG！ 漏えいを防ぐセキュアな管理方法
最低限の初期設定が終わったので、いよいよアプリを起動してみる。
Claudeに「このプロジェクトのアプリケーションを起動したいです。手順を教えてください」と聞いてみた。すると、最初に「GeminiのAPIキーを取得する」というステップが提示された。
これまでは「Google AI Studio」のビルドモードというクラウド上で動かしていたため、裏側でGoogleが勝手にAPIキーを用意してくれていたが、PC上で動かすには自分で取得する必要があるのだ。Google AI Studioの画面から新しくAPIキーを発行し、名前はClaudeのおすすめ通り「AiLA-dev」とした。
ではさっそく、取得したAPIキーをClaudeのチャット欄に貼り付け、設定をお願いしようとしたところ、石丸氏からストップがかかった。
「APIキーをAIツールのチャット欄に直接貼り付けるのはNGです。各サービスの仕様や契約条件によって扱いは異なりますが、チャットに入力した内容は外部で処理されるため、意図しない形で扱われるリスクを避ける必要があります。非エンジニアの方はついやってしまいがちですが、APIキーは厳重に管理する必要があります。どうすれば安全に管理できるか、Claudeに聞いてみましょう」（石丸氏）
言われた通り、Claudeに「APIキーを発行しました。セキュリティ観点でどのように管理する方がよいでしょうか」と質問した。
すると、「.env.local」という環境変数用のファイルにAPIキーを保存し、「.gitignore」というファイルでGitの管理対象から除外する、という開発の一般的な手順を教えてくれた。
こうしておくと、前回セットアップしたGitHub（Web上の保管場所）にもアップロードされなくなる。幸い、Google AI Studioが気を利かせて、すでに「.gitignore」に除外設定を書いてくれていたため、自分で設定する手間は省けた。
「もうひとつ複雑な注意点があります。Claude Codeはソースコードを自動で読み取るため、そのままでは『.env.local』に書いたAPIキーまでClaudeに読み込まれてしまいます。Claude Codeの公式ドキュメントでは、設定ファイル（.claude/settings.json）で機密ファイルの読み取りを拒否する方法が案内されているので、その設定を行いましょう」（石丸氏）
なるほど。そこで、Claudeに「APIキーを読み込ませたくないので、設定ファイルを作成してください」と指示し、Claude自身に対するアクセス制限の設定ファイルを作ってもらった。
ただし、AIのコーディングも100％完璧ではないので、うまく動かないときはエラーを伝えて修正させるのがコツだ。途中、Claudeが提案してきた設定の書き方に問題があるというトラブルもあったが、「正しい書き方に修正してください」と指摘して事なきを得た。
セキュリティの準備が整ったので、作成した「.env.local」に取得したAPIキーを貼り付ける。
念のため、Claudeに確認してみると「読み取れない」とのこと。しかし、石丸氏によると、この設定だけで安心というわけではないそうだ。
「AIコーディングツールがこうした設定をすり抜けて.envファイルを読み込んでしまう可能性が指摘されており、エンジニアの間でも対策が活発に議論されています。最も安全なのはAIが読み取れる場所にAPIキーをそのまま置かないことですが、ローカル環境でAPIキーを管理する場合は、本番環境とは別の開発専用キーを使うこと、そしてAPIキーの利用上限を設定しておくことが大切です。こうしておけば、万が一流出しても影響を最小限に抑えられます」（石丸氏）
APIキーひとつとっても、これだけ気をつけることがあるのかと驚いた。開発用と本番用でキーを分けるという発想すら、石丸氏に言われなければ思いつかなかっただろう。やはり「非エンジニアとエンジニアの間の谷は深いな」と感じた。
その谷を実感したもうひとつが「承認処理」だ。
バイブコーディングで開発していると、ファイルの書き込みや機能のインストールをする際にユーザーに確認を求めてくる。「Yes」と答えないと進まないのだから「Yes」しかないのだが、面倒に感じる。
そこで、全部自動で「Yes」にできないのか、と聞いたところ、「可能」とのこと。しかし、ローカルのファイルを全消しするといったトラブルも発生しているそうなので、コマンドを実行するようなときは、何をするのか見たほうがよいとのこと。意味がわからないなら、それもAIに聞けばよいという。
実は、筆者が自分だけのアプリを作成する際は、面倒なので自動実行するようにしていたのは内緒だ。これは反省し、今後はよく確認しようと思う。
バイブコーディングの真骨頂！ 丸投げでローカル環境にアプリが立ち上がる
次は、いよいよアプリケーションを起動する。
エンジニアであれば黒い画面（ターミナル）でパッケージをインストールする専用のコマンドを打ち込んでいくところだが、今回はバイブコーディングなので、Claudeに「事前準備が終わったので、アプリケーションを起動するためのパッケージをインストールして、起動してください」と曖昧に丸投げしてみる。
すると、Claudeが環境を調査し、自動的に必要なソフトウェアのインストール作業を進めてくれた。見慣れない文字がバーッと流れた後、アプリが起動してURLが表示された。そのURLをブラウザーで開いたところ、画面は真っ黒。しかし、石丸氏は焦らず、「じゃあ、それをそのままチャットで伝えましょう」とアドバイスしてくれた。
「開いたら真っ黒の画面が表示されました」と入力すると、自動で何か対応してくれたようで、無事、Google AI Studioで作っていた「AiLA」アプリの画面が表示された。試しに、ウイスキーの画像をアップロードしてみると、ちゃんとAIからの解析結果も返ってきた。
「これで、Google AI Studioのクラウド上で動いていた環境を、柳谷さんのPC上で再現できました。環境構築などの初期設定は地味ながら非常に重要な作業です。以前はここだけで丸一日かかることも珍しくありませんでしたが、AIコーディングツールの登場で、このハードルは大きく下がりました。これで開発のスタートダッシュが切れます」（石丸氏）
ここまでは石丸氏に指示されるがままに作業を進め、無事にローカル環境でアプリを起動できた。
しかし、ふと不安にもなった。作業自体はチャットでAIに丸投げするだけで非常に簡単だったが、「APIキーを直接貼らない」「AI自身に設定ファイルを読み込ませない」といったセキュリティ面のリスクやその対策は、筆者のような非エンジニアにはそもそも思いつかない。
今回は師匠が隣にいてくれたから回避できたものの、非エンジニアが一人でバイブコーディングに挑戦する場合、こうした落とし穴にどうやって気づけばよいのだろうか。そんな疑問をぶつけてみると、こんなアドバイスが返ってきた。
「一般の方がバイブコーディングをする際も、わからない単語はどんどんAIに聞くこと、そして常に『これはセキュリティ的に大丈夫ですか？』とAIに確認しながら進めることが大切です。AIは指示されたことを忠実にこなしますが、こちらから聞かなければ、セキュリティ上の懸念を自発的に指摘してくれるとは限りません。また、今回のAPIキー管理の話題のように、AIコーディングツール特有の注意点は日々新しく出てきます。すべてを深く理解する必要はありませんが、こうした情報にアンテナを張っておくだけでも、リスクへの気づきやすさは大きく変わります」（石丸氏）
次回は、いよいよこのローカル環境を使って、Firebaseによる「ログイン機能」の実装と、アップロードした「画像を保存する機能」の追加に挑戦する予定だ。
（第6回へ続く）
著者プロフィール：柳谷 智宣
IT・ビジネス関連のライター。キャリアは26年目で、デジタルガジェットからWebサービス、コンシューマー製品からエンタープライズ製品まで幅広く手掛ける。近年はAI、SaaS、DX領域に注力している。日々、大量の原稿を執筆しており、生成AIがないと仕事をさばけない状態になっている。
・著者Webサイト：https://prof.yanagiya.biz/
