前回の振り返り
先日、サルでもわかるバイブコーディング！ #1 開発環境を整えるというお題で投稿しました。本日はいよいよ実際にアプリを作っていきたいと思います。
※こちら、Mac環境限定の内容ですのでWindowsユーザの方はご注意ください（Windowsは2025年8月時点で公式には非対応のため）
開発用のAIエージェントをつかい、こちらは日本語であれこれ指示を出すだけなので簡単です！プログラミングという難しいことは考えなくていいのでまずやってみましょう。やってみるのが大事です！
１．Claude Codeに指示を出す
上記の前回記事で環境を整えたVSCODEを起動します。
アプリケーション→VSCODEで起動してください。
↓こんな画面が出ると思います。
あれ？この画面じゃないの？と思った方、ご安心ください。
ここから以下のClaude codeが使える画面まで持っていきます。
こちらの画面の最も左上の①「エクスプローラ」ボタンを押し、②「フォルダーを開く」をクリック。③開発用のフォルダを「新規作成」（場所はデスクトップでOKです）。④フォルダ名を入力（何でもOKですがここではわかりやすく「development」としておきます）。⑤最後に「開く」をクリック。
すると以下のような画面になるので、「はい、作成者を信頼します」をクリックしましょう。
次に、VSCODEの左ペインの①「拡張機能」をクリックし、②「Claude Code for VSC」が出てくるのでクリック。③Claude Codeの詳細画面がでるのと同時に、③画面右にClaudeの小さなロゴマークがでるのでそれをクリック。④すると、Claude Codeの画面が立ち上がります。
※Claude Codeが立ち上がる際、初回の場合にClaudeへのログインが必要になるので、事前にログインを済ませておくとよいです。アカウントを持っていない方は事前に作成しておきましょう。
２．Claude codeに指示を出す
では、ここからいよいよ実際の開発に入ります。
前回の記事でサラッと触れましたが、こんかいは「お小遣い帳アプリ」を作りたいと思います。
とにかく対話をする
はい、「じゃぁClaude Codeに指示してください」じゃぁ何から話せばいいかわからん！
ってなると思いますが、わからんでもいいので、「相手が人間だと思って」対話してみましょう。
マジこんなのでOKです。もっと詳しく聞きたかったらClaudeが聞き返してきますので。
お小遣い帳のアプリを作りたいです
お小遣い帳のアプリはどうやってつくればいいですか？
アプリ開発をしたいんですがどのようにお願いすればいいですか？
今回はシンプルに「お小遣い帳のアプリを作りたいです」で行ってみましょう。
シンプルに上記の文言を打ち込んでEnterすると、あら不思議！一気にここまできました！
Update Todosというのは、Claude Codeが依頼主（ここでは私）のある意味乱暴な（笑）依頼を受取り、解釈してClaude Codeでやる必要がある順番にタスクを並べてくれているものです。
なので、基本的には「方法、こういう流れでやるのかー」という感じで見てもらえればOKです。
（技術のわかる方は、この手順に疑問がでた場合には一旦escボタンで止めて、別途指示をしたりします）
で、画面一番下でこんな感じで聞かれます。最初なのでちゃんと読みましょう。
Bash command
mkdir okozukai-app
Create directory for allowance tracking app
Do you want to proceed?
❯ 1. Yes
2. Yes, and don't ask again for mkdir commands in /Users/aa479881/Desktop/development
3. No, and tell Claude what to do differently (esc)
えーと、okozukai-app というディレクトリ（フォルダ）を作るよ、いい？
って言ってるわけですね。
ここではOKなので、「１．Yes」をそのままEnterしましょう。
こんな流れで、こちらが指示をだしたり質問をしたりすると、基本的にClaude Codeが手順を書いてくれたり、選択肢を提案してくれたりして、このように「OK？NG？」って聞いてくる形を取るので、まだ始めたばかりの非エンジニアな私達は、一応読んで「Yes」でOKです。
すると、しばらくClaude Codeさんがぐりぐり考えたあとにいきなりこのページになりました！
よく見てみましょう。以下のように書いてあります。
⏺ お小遣い帳アプリ用のディレクトリを作成します。
Bash(mkdir okozukai-app)
⎿ (No content)Update Todos
⎿☒ プロジェクト構造とファイルを作成
☐ HTMLファイルを作成
☐ CSSスタイルを実装
☐ JavaScript機能を実装（収入・支出の追加、表示、削除）
☐ ローカルストレージでデータ保存機能を実装
☐ 残高計算機能を実装⏺ HTMLファイルを作成します。
⏺ Write(okozukai-app/index.html)
Opened changes in Visual Studio Code ⧉
Save file to continue…
Do you want to make this edit to index.html?
❯ 1. Yes
2. Yes, for this session only (shift+tab)
3. No, and tell Claude what to do differently (esc)
つまり、お小遣い帳アプリを作るにあたって、まずHTMLファイル（Webサイトを作るときの基本的な骨格を定義するファイル）を作るよ！いい？
って聞いてきています。
何も問題ないので１．YesをEnterします。
ちなみに、画面右に見えている
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
・・・
とか書いてあるのHTMLという言語です（マークアップ言語の一種ですが、細かいことは知らなくていいのでスルーでOKです）。
そしてしばらくすると・・・次のような画面がいきなり出てきました。
そして再度確認しましょう」。
Update Todos
⎿☒ プロジェクト構造とファイルを作成
☐ HTMLファイルを作成
☐ CSSスタイルを実装
☐ JavaScript機能を実装（収入・支出の追加、表示、削除）
☐ ローカルストレージでデータ保存機能を実装
☐ 残高計算機能を実装⏺CSSファイルを作成してスタイルを実装します。
⏺ Write(okozukai-app/style.css)
また先ほどと同じように、お小遣い帳アプリを作るにあたって、今度はCSSファイル（Webサイトのデザインを定義する基本的なファイル）を作るよ！いい？
って聞いてきています。
何も問題ないので１．YesをEnterします。
先ほどと同じように、画面右に見えているのが作成されるCSSファイルの中身です。知らなくてもOKなので中身はスルーしますｗ
そしてしばらくすると次のような画面が出てきました。
Update Todos
⎿☒ プロジェクト構造とファイルを作成
☐ HTMLファイルを作成
☐ CSSスタイルを実装
☐ JavaScript機能を実装（収入・支出の追加、表示、削除）
☐ ローカルストレージでデータ保存機能を実装
☐ 残高計算機能を実装⏺ JavaScriptファイルを作成して、すべての機能を実装します。
⏺ Write(okozukai-app/script.js)
これも先ほどと同じように、お小遣い帳アプリを作るにあたって、JavaScriptファイル（主にWebサイトなどでいろいろな動作などを行わせることができるファイル）を作るよ！いい？
って聞いてきています。
何も問題ないので１．YesをEnterします。
JavaScriptは簡単なWebサイトなどでは当たり前のように使われているので、言葉ぐらい走っておいたほうがいいかもしれませんね。
そして暫く待つと・・・
なんと！完成してしまいました‼️
⏺ お小遣い帳アプリが完成しました！
作成されたファイル:
- okozukai-app/index.html - メインのHTMLファイル
- okozukai-app/style.css - スタイルシート
- okozukai-app/script.js - JavaScript機能
主な機能:
- 収入・支出の記録
- 残高の自動計算と表示
- 取引履歴の表示・フィルタリング
- 取引の削除
- ローカルストレージでのデータ保存
- レスポンシブデザイン
index.htmlをブラウザで開くとアプリを使用できます。データはブラウザのローカルストレージに保存されるため、ブラウザを閉じても記録が残ります。
ちょっとかくにんですが、ここまで私がやったのは、
・最初の「お小遣い帳のアプリを作りたいです」という入力とEnterキー
・途中のClaudeからのメッセージ確認とEnter合計4回
だけ！
マジこれだけ！
VSCODEの画面最上部のアイコンをクリックしてファイルの中身を見てみると、ちゃんと以下のようにファイルが作成されています。
ほんとこれだけ⁉️
って思ってしまいますが、お小遣い帳のような比較的処理がわかりやすくて簡単なアプリならこれだけでできてしまうんですよ。
３．動作確認をする
ただ、できただけで喜んではいけません。問題はちゃんと機能するかです。
ここから簡単な動作確認をしていきましょう。
想定通りに動くか？
では、画面の指示通りにindex.htmlを開きましょう。
左のファイルリストからindex.htmlを右クリックして「Finderで表示」をクリックするとFinderが開きます。
そこでindex.htmlをダブルクリックしてください。普段使っているブラウザでページが開くはずです。
↓これが開いたindex.html。ちょっとすごくないですか？色もレイアウトもすべてClaudeが考えてくれたものです。
収入の記録
試しに以下のように入力してみましょう。
・内容：月のお小遣い
・金額：5000円
・種類：収入
入力して記録すると、残高5000円と表示されます！
支出の記録
では今度は支出の記録をしてみましょう。
・内容：昼食代
・金額：1000円
・種類：支出
すると、以下のように残高が4000円に変わりました！
しかも丁寧に取引の履歴を下の方に記録してくれています。
こういう「こういうの普通あったほうがいいよね」的なところまで作ってくれたりします。
今回は、とりあえず作ってみよう！というわけでとても簡単なアプリを作ってみました。
もちろん、たとえばオセロゲームを作って、とかテトリスを作ってとかの簡単なゲームアプリも作れます。
バイブコーディングのいいところは、とにかく思いついたらAIに投げて聞いてみて、出てきた選択肢の中から選んでどんどん開発が進められるところですね。
さて次回は「サルでもわかるバイブコーディング！ #3 ドキュメントを整理する」です。