こんにちは、Tomoyaです！
今回は、実際にVibeCodingでアプリケーションを作成を試みようと思います。
この記事は、前回の記事を羅針盤に未経験者がAIと共にアプリ作成に挑戦していく記事になっています。
前回の記事が気になる方は以下からぜひご覧ください。
まずは、その第一弾として
何を作るのか？とセクション1：プロトタイプの作成までが記事になっています。
それではどうぞご覧ください
何を作るのか？アイデア出しと選択
始めに考えた事としては、初心者でも作成しやすいかなと思い初歩的な静的アプリケーションをVibe Codingしたいなと思いました。
しかし結果としては、「ガワ（UI）」は静的ですが、「中身（データ）」は動的なアプリケーションを選択する事になりました。
その結果に至ったのは、静的アプリケーションとはどういった物なのかを学習した時に私自身がやってみたいことが浮かんだからです。こうした、直感やバイブスを伴うひらめきも、テーマを探る上では大切なのではないかと感じているので大事にしていきたいと思います。
アイデアのタイトルは【時計ログアプリ】です。
これを作成しようと思った理由は
- 構造のロジックとしては、シンプルで行いやすいかなと思った事。
- 今の主流であるCDNやエッジコンピューティングについて触れてみたかった
のでこれを選択しました。
アイデア出しの前にインプットを行う
NotebookLMを使って情報収集を行って「静的アプリケーションについて」のインプットを行いました。
NotebookLMでは、情報ソースのサーチを気軽に行うことができすぐにチャット形式で学習する事ができます。私が作成した以下の要点を掴むフローを使って30分程対話をします。
静的アプリケーションについて
-Why
-Context
-Structure
-Analysis
-Execution
の順に詳しく理解できるように教えてください。
この内容から全体のイメージを把握してどういった物であるのかを理解します。
Why（なぜ今、静的アプリケーションなのか）
かつて「静的サイト」と言えば単純な情報表示のみを指していましたが、現在は技術進化によりその役割が大きく拡張されています。なぜ今、静的アプリケーションが選択されるのか、主な理由は以下の通りです。
- 圧倒的なパフォーマンスとUX:
-
サーバー側で都度ページを生成する動的サイトとは異なり、事前に生成されたファイルをCDN（コンテンツ配信ネットワーク）を通じて配信するため、読み込み速度が非常に高速です。これはユーザー体験（UX）の向上に直結し、SEO（検索エンジン最適化）においても有利に働きます。
- セキュリティと堅牢性:
-
データベースやアプリケーションサーバーが直接インターネットに露出しないため、SQLインジェクションなどの攻撃リスクが低減されます。サーバー側の複雑な処理がないため、セキュリティホールが生まれにくい構造です。
- コスト削減とスケーラビリティ:
-
複雑なアプリケーションサーバーを常時稼働させる必要がなく、ストレージと転送量に基づく安価なホスティングで運用可能です。また、アクセス急増時もCDNが負荷を分散するため、スケーラビリティ（拡張性）に優れています。
- 最新トレンドへの適合（エッジ・AI）:
-
2026年に向けて、アプリケーションロジックをユーザーに近い「エッジ」で実行する流れが標準化しています。静的サイトをベースに、必要な部分だけエッジ関数（Edge Functions）で動的に処理するアーキテクチャが主流になりつつあります….
などが把握できてとても助かっています！無料で使用でき、とても使いやすいのでぜひNotebookLMの活用をおススメします！
こういった内容からCDNやメタフレームワーク・エッジコンピューティングのポイントに惹かれていき、これを活用したアプリに挑戦してみたいと思うようになりました。
いきなり複雑な作成は、破綻すると思ったので静的サイトをメインにした中身は動的な機能を持つハイブリッドなアイデアを探すことにしました。
条件を付けて動的な機能は１つ又は２つまでにして基本は静的アプリを目指しました。
学習ログや習慣トラッカー、ナレッジ蓄積型でのチェス定跡メモ、計算ツール、判定ツールなどリストアップして最終的に選んだのは、
【時計ログアプリ】でした。
【時計ログアプリ】プロトタイプ作成
【時計ログアプリ】は、静的サイト＋Firebaseで構築していくイメージです。
内容としては、静的サイトでボタン(スタート)からボタン(ストップ)でログを取った後にFirebaseのDBへログを保管するものです。
３つの主要機能を実装していきます。
- Time機能：スタート/ストップボタンで時間を計測し、Firestoreへ保存する。
- Log List機能：計測した履歴（開始日時、終了日時、経過時間）をリスト表示する。
- Delete機能：間違えた記録を削除できるボタンを各ログに設置する。
技術スタックは、Next.js + Firebaseを活用しています。
他にも前回の記事を基にプロンプトを作成していきます。
作成したプロンプトを使ってFirebase Studioを使ってプロトタイプを作成していきます。
Firebaseとの連携
Firebaseプロジェクトの作成
Firebaseを検索してプロジェクトを立ち上げます。今回は、GCP(Google Cloud Platform)で事前にプロジェクトを作成していたので、そのプロジェクトと連携していきます。
FirebaseとFirebase Studioの連携
次にFirebaseでは、Firestore Database(データベース)を使うのと公開(デプロイ)も行うのでFirebaseとの連携を行います。
Firebaseホーム画面の【+アプリを追加】を推して【</>ウェブ】を選択します。
自由にアプリの名前を作成して【アプリを登録】
※まだHostingは構築しません。これは公開(デプロイ)に必要になってくるFirebase機能です。
Firebase SDKの追加で表示されるコードをコピーしてFirebase Studioの作成したプロトタイプの画面にペーストします。
今回は、Firebaseを使うことを明記していたので必要なファイル(/firebase.ts)は作成されていたのでそこにペーストして貼り付けます。なければ記載の通りnpm install firebase を行ってください。
あと少し調整すれば連携が完了しますが今回は、GeminiAIにお願いして連携が無事に行えるように修正してもらいます。
Firestore Databaseの構築
ログを保管するのにDBが必要なのでFirebaseの機能を構築していきます。
Firebase左の項目から【Firestore Database】をクリックして【構築】をクリックします。
- エディション選択：Standardエディションを選択
- データベースIDとロケーション：ID：default・ロケーション：us-central1(Iowa)を選択
- 構成：テストモードで開始。
もしも連携できない時のチェックリスト
もしこれでも動かない（エラーが出る）場合は、以下をチェックしてください。
- パスの間違い:
import { db } from './firebase'のパス（./や../）が正しいか？ - Firestoreのルール: 【Firestore Database】→【ルール】タブで、テストモード（全許可）になっているか？→
allow read, write: if true; - サーバーの再起動:
.envファイルなどを使った場合は、一度npm run devを停止して再起動する必要があります
動作確認とセクション１の完了
Firebaseと連携ができたかとプロトタイプとして動くアプリができているのかを一つずつ確認していきます。
- タイマーのスタート/ストップを行える。→そのデータがFirestore Databaseに保存されているか？
- 画面下にあるLog Listに計測した履歴（開始日時、終了日時、経過時間）が表示されるか？
- Log Listにある削除ボタンをクリックしてLog ListとDatabaseから削除されるか？
３つとも無事完了を確認しました！
ここでセクション１は完了。動くプロトタイプアプリの第一段階が達成です
次回はセクション２（欲しい機能の作成・調整）の完了を目指して行っていきます。
まとめ
今回はアイデア決めとセクション１のプロトタイプの作成を行っていきました。
流れとしては以下のような感じです。
- アイデアと選択：作りたいアプリの概要と学習から詳細な１つを選択する。
- プロトタイプ作成：AIと対話しながら羅針盤（MVPとルール）を基にプロンプトを作成してFirebase Studioでプロジェクトを作り実行に移す。
- Firebaseとの連携：完全静的アプリではないのでFirebaseでプロジェクトを作成して必要な機能を有効化（Firestore database)してFirebase Studioのプロジェクトと連携する。
- 動作確認とセクション１の完了：実際に動くプロトタイプであるのかを作成したプロンプト・計画と照らし合わせてテストを行う。
使ったサービス：
- Firebase Studio
- Firebase
- GCP(Google Cloud Platform)
- Gemini(AI)
- NotebookLM
正直セクション3のバックエンド機能（Firestore database）は今回実装しましたが、まだ実装できていないHostingやAnalyticsもあるのでそちらを行う予定です。
理想を言えばもっとアイデアの選定時に、需要のありそうなアプリを調査して分析できる高度な方法を行いたいですが、その力はないので目標として徐々に力を付けていきたいです。アイデア選定でうまく選択できれば世の中に貢献できるアプリケーションを作成できると思うからです。
とりあえずは第一段階は出来たので次は第二段階（欲しい機能の作成・調整）に進みます！
ここまで読んでいただきありがとうございました。次回もお楽しみに！
感想やコメントがあればお願いします。フィードバックやアドバイスも受け付けています！
コメント
コメント一覧 （1件）
[…] 未経験者がバイブコーディングでアプリケーション作成してみた(Project1-1) こんにちは、Tomoyaです！ […]