第1章　登場人物 — ブラウザ・自分のサーバー・LLM・データベース

📖 この章のゴール：ChatGPTのようなアプリが、4人の登場人物の連携で動いていることが分かる。とくに 「なぜ自分のサーバーを間に挟むのか」 が腹落ちする。 ← 目次・はじめにへもどる

📱 ChatGPTではこう見える

ChatGPTを開いて、メッセージを打って送ると——

すぐに返事が、1文字ずつスルスルと出てきます。
「さっきの話だけど」と続けると、前のやりとりを覚えているように話が続きます。
左側には、過去の会話がいくつも並んでいて、開けば続きから話せます。
たくさん使うと、ときどき「しばらく待ってね」と制限がかかります。

あたりまえに使っていますが、この裏側では何が起きているのでしょう？ ここが分かると、これから作るものが「魔法」ではなく「部品の組み合わせ」に見えてきます。

🤔 登場人物は4人（🟢 基礎）

LLMを使うアプリは、ざっくり 4人の登場人物 で動いています。第1弾と同じ レストラン のたとえに、新しい登場人物が1人加わります。

登場人物	役割	レストランでいうと
ブラウザ（画面）	あなたが見て・打って・送る画面	席に座っているお客さん（あなた）
自分のサーバー（Express）	注文を受け、外の頭脳に頼み、会話を記録する司令塔	お店そのもの（レジ＋ホール）
LLM（OpenAI / Anthropic）	文章を考える外部の頭脳。賢いが ①使うたびにお金がかかり ②毎回忘れる	電話で頼む外部の天才シェフ
データベース（Supabase）	会話を覚えておく倉庫＋ログイン	注文の台帳・会員名簿

ひとつずつ、もう少しだけ。

ブラウザ（Chrome や Safari）… あなたの目の前の画面。プレーンな TS/JS で作れます（React などの道具を使ってもOK）。
自分のサーバー（Express＝えくすぷれす）… ネットの向こうで動く、あなたのお店の司令塔。お客さんと外部シェフのあいだに立ちます。
LLM（えるえるえむ＝大規模言語モデル）… 文章を考えるAIの頭脳。OpenAIの GPT、Anthropicの Claude など。あなたのアプリの外にいて、API（窓口）越しに「答えて」と頼みます。
データベース（DB）… 会話をしまう倉庫。第1弾と同じ Supabase を使います。

🔑 なぜ「自分のサーバー」を間に挟むの？（🟢 基礎）

「ブラウザから直接LLMに頼めば、お店（サーバー）なんていらないのでは？」——いい質問です。でも、それをやってはいけない理由が3つあります。これがこの教材の背骨そのものです。

🔐 鍵を隠すため　LLMは秘密の合鍵（APIキー）で使います。これをブラウザに置くと、ページを見れば誰でも盗めます。盗まれた鍵で使われた分は、あなたに請求されます。→ だからお店（サーバー）が鍵を預かり、お客さんには渡しません。（第2章）
💰 財布を守るため　LLMは使った分だけお金がかかります。誰が・どれだけ使ったかを数えて上限をかけないと、いたずらや暴走で請求が無限に膨らみます。→ お店がログインを確認し、人ごとに「今日はここまで」を管理します。（第6章）
🧠 記憶を作るため　外部シェフ（LLM）は注文のたびに前の会話を忘れます。続きを話すには、これまでの会話を毎回まとめて渡す必要があります。→ それを台帳（DB）に書いて、毎回そろえて渡すのがお店の仕事です。（第4章）

🍔 たとえ話：あなた（お客さん）は、天才シェフに直接電話しません。お店（サーバー）に注文すると、お店が①シェフの電話番号（鍵）を隠したまま電話し、②あなたが頼みすぎていないか確認し、③「さっきはこういう話でした」と前回までの流れをシェフに伝えてくれる。お客さんがシェフの番号を知らない——これが安全と節約の出発点です。

🔁 「あなたのメッセージが返事になるまで」

メッセージを1回送ると、4人がこう動きます。

あなた（ブラウザ）
   │  「これに答えて」とメッセージを送る
   ▼
自分のサーバー（Express）
   │  ① ログイン確認（誰？）＋使った量チェック（上限こえてない？）
   │  ② これまでの会話＋新しい発言をまとめる（シェフは忘れるから）
   │  ③ 秘密の鍵をつけて LLM に送る
   ▼
LLM（OpenAI / Anthropic）
   │  文章を考えて返す（1文字ずつ流れてくる）
   ▼
自分のサーバー（Express）
   │  ④ 返事を台帳（DB）に保存／使った量を記録
   ▼
あなたの画面に、返事が1文字ずつ表示される

ポイントは、賢い部分（LLM）はあなたのアプリの外にいること。あなたが作るのは、お客さん（画面）と、あいだに立つお店（サーバー）です。

🛠 何を自分で作る？（🟢 基礎）

この教材で あなたが作るのは2つ——ブラウザ（画面） と 自分のサーバー（Express） です。賢い頭脳はLLMに、会話の保存とログインはSupabaseに任せます。

あなたが作る                          借りて使う
┌───────────┐    ┌──────────────┐    ┌──────────────┐
│  ブラウザ   │──▶│  自分のサーバー  │──▶│   LLM の API   │ （OpenAI / Anthropic）
│  (画面)    │◀──│   (Express)    │◀──│  文章を考える   │
└───────────┘    └──────┬───────┘    └──────────────┘
                          │ 会話の保存・ログイン
                          ▼
                    ┌───────────┐
                    │  Supabase  │ （データベース＋認証）
                    └───────────┘

ブラウザ（画面）：メッセージを打つ・送る・返事を表示する画面。プレーンな TS/JS で最小限に（React 等でもOK）。
自分のサーバー（Express）：鍵・財布・記憶を預かる司令塔。この教材の主役です。
LLM・Supabase：自分では作らず、API越しに「お願い」するだけ。

💡 第1弾（Twitter編）では、サーバーもDBも丸ごとSupabaseに任せました。今回は 「自分のサーバー（Express）を1枚はさむ」 のが新しいところ。理由は上の3つ（鍵・財布・記憶）です。

⚠️ ハマりどころ

「ブラウザから直接 OpenAI / Anthropic を呼べばいいのでは？」 → それをやると 秘密の鍵がページに丸見え になり、誰でもあなたの財布で使えてしまいます。必ず自分のサーバーを通す——これが鉄則です（第2章でじっくり）。
「LLMは会話を覚えている」と思い込む → 実は 毎回こちらが会話の全部を送り直しています。覚えているのは“こちら側（DB）”。ここを誤解すると、第4章以降の「記憶を作る」話がピンと来ません。
「サーバー＝LLM」だと思う → 別物です。自分のサーバー＝司令塔（あなたが作る）、LLM＝外注の頭脳（外にいる）。役割がちがいます。

🤖 AIに頼むなら（Vibe codingのコツ）

AIに「ChatGPTみたいなの作って」とだけ頼むと、鍵をブラウザに直書きした危ないコードが出てくることがあります。登場人物を意識して頼むと、安全なコードに誘導でき、出てきたものも読めるようになります。

🗣 プロンプト例：「TypeScript + Express のサーバーと、素の TS/JS のブラウザ画面で、超シンプルなチャットUIを作って。LLM（OpenAI など）の呼び出しはサーバー側だけに置いて、APIキーがブラウザに出ないようにして。どこがブラウザで、どこがサーバーかをコメントで分けて説明して」

出てきたコードを見るときの確認ポイント：

APIキーがブラウザ側（React）のコードに出ていないか？（出ていたらアウト）
LLMに送る前に、これまでの会話をまとめている部分はどこか？
ブラウザ → サーバー → LLM、の3段の流れになっているか？

📝 ことばメモ

LLM（えるえるえむ）：大規模言語モデル。文章を考えるAIの頭脳。GPT（OpenAI）・Claude（Anthropic）など
API（えーぴーあい）：他のサービスにお願いする窓口。ここではLLMに「答えて」と頼む窓口
Express（えくすぷれす）：Node.js で自分のサーバーを手早く作る道具
React（りあくと）：ブラウザの画面を作る道具の一つ（この教材では必須ではありません。素の TS/JS でもOK）
APIキー：そのLLMを使うための「秘密の合鍵」。料金はこの鍵の持ち主に請求される
ステートレス：呼ぶたびにまっさら（前回を覚えていない）こと。LLMのAPIはこれ

➡️ 次の章へ

第2章では、3つの理由のうち最初の 【守り①】秘密のAPIキーを守る を扱います。なぜブラウザに鍵を置いてはいけないのか、どう隠すのか——いちばん最初に固めるべき安全の土台です。

← 目次・はじめにへもどる

第1章 登場人物 — ブラウザ・自分のサーバー・LLM・データベース