ChatGPTクローンで学ぶ LLMアプリ開発入門 — はじめに・目次

このページは教材の入口（ハブ）です。まずここを読んで、上から順に各章へ進んでください。

この教材は、好評だった姉妹編 Twitterクローンで学ぶWeb開発入門 — はじめに・目次 の第2弾です。Twitter編が「そのデータは誰のもの？（データ分離）」を背骨にWeb開発の基礎を学んだのに対し、こちらは ChatGPTのような対話アプリ を作りながら、LLM（AIの頭脳）を組み込んだアプリ開発の勘どころを学びます。

なぜ「ChatGPTクローン」なのか

いきなり本格的なAIサービスを作ろうとすると、落とし穴がたくさんあります。でも、みんなが毎日さわっている ChatGPT には、LLMアプリ開発の大事なポイントがぎゅっと詰まっています。

  • メッセージを送ると返事が返る（LLMを呼ぶ）
  • 返事が1文字ずつ出てくる（ストリーミング）
  • 会話が続く（前のやりとりを覚えている……ように見える）
  • 会話を何個も持てる（複数セッション）
  • 使いすぎると制限がかかる（お金がかかるから）

これらを1つずつ作っていくと、LLMアプリの勘どころが自然と身につきます。しかも、あなたはユーザーとしてChatGPTの動きをすでに知っているので、説明がスッと入ります。

この教材の特徴（ふつうの入門書とどう違う？）

ふつうの本は「HTTPの仕組み」「APIの認証」「トークンとは」といった、初心者には分かりにくい裏側の仕組みから説明します。だから難しく感じます。

この教材は 逆向き に進みます。

すでに知っているChatGPTの動き → なぜそうなっているのか → 自分で作るとこう書く

この教材を貫く2本の背骨

全体を、たった2つの問いが貫いています。各章はどちらか（または両方）に必ずつながります。

🧠 背骨①：LLMは「毎回忘れる」。記憶を作るのは誰？

LLMのAPIは、呼ぶたびにまっさらに忘れます（ステートレス）。会話が続いて見えるのは、こちらが毎回「これまでの会話ぜんぶ」を渡し直しているから。だから「会話ログ」「トークンあふれ」「要約」「メモリ」が全部つながります。会話の記憶を作るのは、LLMではなく開発者（あなた）の仕事です。

🛡 背骨②：自分のサーバーで「鍵」と「財布」を守る

LLMのAPIは 秘密の鍵（APIキー） で使い、使った分だけお金がかかります。鍵をブラウザに置けば盗まれ、認証や上限が無ければ無限に使われて請求が爆発します。だから 必ず自分のサーバーを間に挟み、鍵を隠し、ログインした人ごとに使用量を制限します。

各章の読み方（共通の型）

どの章も、同じ順番で書いてあります。「いつものパターン」で読めます。

  1. 📱 ChatGPTではこう見える … あなたが知っている動きから
  2. 🤔 なぜ？／やらないとどうなる … 考え方と、サボったときの失敗例
  3. 🛠 こう作る … 実際の作り方（コピペで動く最小コード・1行ずつ解説）
  4. ⚠️ ハマりどころ … よくある間違いと直し方
  5. 🤖 AIに頼むなら … Vibe coding（AIに作らせる）のコツ

各項目には、むずかしさの目印を付けます。

  • 🟢 基礎：全員が読むところ
  • 🔧 応用：もう少し深く知りたい人向け（読み飛ばしてもOK）

💡 本編は🟢基礎で一直線に進みます。難しい話（ストリーミングの中身・割り込みの作り込み・使用量制限の実装など）は、本編では“紹介”にとどめ、くわしくは付録に置いています。

用意するもの

  • パソコン（WindowsでもMacでもOK）
  • Node.js（サーバーと画面を動かす土台。サーバーは TypeScript＋Express。画面はプレーンな TS/JS でOK）
  • Googleアカウント（ログインに使用。第1弾と同じくSupabaseの認証で）
  • Supabaseの無料アカウント（会話の保存＝データベースとログイン）
  • LLMのAPIキー（OpenAI または Anthropic。取り方は付録A・付録C）
  • AIコーディングツール（Claude / Cursor / Codex など）

💡 フロントは 概念優先・フレーム非依存。画面のコードは プレーンな TS/JS（fetch ＋ 画面表示）で例示します（React / Vue などを使ってもそのまま動きます）。むずかしいフレームワークの作法には深入りせず、「鍵を守る」「会話を覚える」という骨組みに集中します。 💡 本編のコード例は OpenAI（GPT） を主に使います。Anthropic（Claude）への切り替えは付録Cで1か所差し替えるだけ。「ChatGPTクローン」はアプリの“見た目・体験”の話で、中の頭脳は差し替え可能です。

目次

第1部　まず動かす

第2部　会話を管理する

第3部　体験をリッチにする（通信方式・ツール）

第4部　まとめ

付録（難所・手順はここに集約）

この教材の到達点

最後まで進むと、こんなものが作れて、仕組みも説明できるようになります。

  • Googleでログインして使う、自分専用の ChatGPTもどき
  • 返事が 1文字ずつ流れて出る（ストリーミング）対話画面
  • 会話を何個も保存して、後から開いて続けられる
  • 秘密の鍵が漏れず、ログインした人ごとに使いすぎを止められる仕組み
  • 長い会話でもトークンあふれを起こさない（要約＋ログ）
  • AIに作らせたコードを読んで「ここが危ない／ここが安全」と判断できる目

関連ページ

  • Twitterクローンで学ぶWeb開発入門 — はじめに・目次 — 姉妹編（第1弾）。データ分離・RLS・認証の基礎はこちらが詳しい
  • 第4回 Singularity Society BootCamp 企画ノート — この教材を作る背景（生成AI / Vibe coding 重視のブートキャンプ）