1. ほとんどのWebアプリにあるもの — データベース!

Webアプリケーションを開発するうえで、データの永続化は避けて通れないテーマです。 ユーザー情報、投稿内容、設定値など、ほとんどすべてのWebアプリはデータベースに支えられています。 今週は、データベースの基本概念を学び、さらにAI機能を組み込むことで、実用的かつ本格的なアプリを開発する手法を身につけます。

2. データベース入門

データベースの種類

Firestore入門

Firebase Firestore

Firestoreとは、Googleが提供するクラウドプラットフォーム「Firebase」のサービスの一つです。 NoSQLデータベースであり、クライアントとサーバー間でリアルタイム同期が可能という大きな特徴があります。 無料枠（Sparkプラン）でも十分に学習・プロトタイピングが可能です。

簡単なサンプル — 35行で作れるリアルタイムチャットアプリ

以下のコードは、Firestoreを使ったリアルタイムチャットアプリの全体像です。Colab notebookからも実行できます。

<h3>Firebase Chat (Firestore)</h3>
<div id=m></div>
<input id=n placeholder="name">
<input id=t placeholder="message">
<button onclick="send()">Send</button>
<script type=module>
  import {initializeApp} from
    "https://www.gstatic.com/firebasejs/11.3.0/firebase-app.js";
  import {getFirestore,collection,addDoc,
    serverTimestamp,onSnapshot,query,orderBy}
    from "https://www.gstatic.com/firebasejs/11.3.0/firebase-firestore.js";

  const app=initializeApp({
    apiKey:"YOUR_API_KEY",
    authDomain:"YOUR_PROJECT.firebaseapp.com",
    projectId:"YOUR_PROJECT"
  });
  const db=getFirestore(app);
  const q=query(collection(db,"messages"),orderBy("ts","asc"));

  onSnapshot(q, s=>{
    document.getElementById("m").innerHTML="";
    s.forEach(d=>{
      let x=d.data();
      document.getElementById("m").innerHTML+=
        `<div><b>${x.user||"anon"}</b>: ${x.text||""}</div>`;
    });
  });

  window.send=async()=>{
    const name=document.getElementById("n").value||"anon";
    const text=document.getElementById("t").value;
    if(!text)return;
    await addDoc(collection(db,"messages"),
      {user:name, text, ts:serverTimestamp()});
    document.getElementById("t").value="";
  };
</script>

Firestoreをプロジェクトに追加する

アクセスキーの取得

1. Firebaseコンソールで Project Overview > Project Settings > General を開く
2. 「マイアプリ」セクションからAPIキーを含む設定コード(firebaseConfig)をコピーする

v0でリアルタイムチャットアプリを作る

1. v0に「ログイン不要で使える、リアルタイムチャットアプリを作って」と指示し、先ほどコピーしたAPIキーの設定コードを貼り付ける
2. APIキーに関する警告が出るが、Firebaseのキーはセキュリティリスクが低いためOKで進める
3. Publishしてアプリを公開し、複数タブで開いてリアルタイム同期を確認する

上手く動かない場合は?

1. ログを確認: ブラウザの開発者ツールでConsoleを開き、エラーメッセージを確認する
2. コストを意識した質問: v0のリクエストは高額なので、まずChatGPTにエラー内容を質問する。納得できる回答を得てからv0に頼む
3. コードを手動で編集: v0のエディタに切り替え、ChatGPTに相談しながら手動でコードを修正する

3. AI機能を組み込む

AI機能を持ったアプリを作成する

ChatGPT API AI

AI機能を組み込むには、各社が提供するAPIを利用します。代表的なものとして OpenAI API（ChatGPT）、 Gemini API（Google）、 Claude API（Anthropic）があります。 今回は OpenAI API を使った例を紹介します。

1. v0に「Vercel AI SDKを使わず、ChatGPT APIを使って、AIチャットアプリを作って」とお願いする
2. Add Environment Variablesのダイアログが表示されたら、OpenAIのAPIキーを入力する
3. 動作確認: メッセージを送信すると、AIが返事をしてくれることを確認する

[任意] 自分で学習させたAIでリアルタイム画像認識

Teachable Machine 画像認識

Googleが提供する無料のAI学習サービス「Teachable Machine」を使って、 独自のジェスチャー認識モデルを作成し、アプリに組み込むことができます。

1. Teachable Machineを開き、Image Project > Standard Project を選択する
2. Webcamを使い、Hold to Recordで各クラスの学習画像を収集する(例: グー、チョキ、パー)
3. Train Modelボタンを押して学習を実行する
4. Export Model > Upload my model を選択し、生成されたコードをコピーする
5. v0で「ジェスチャーを認識するアプリを作って」と入力し、コピーしたコードを貼り付ける