Twitterクローンで学ぶWeb開発入門 — はじめに・目次

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

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

Web開発が初めての人が、いきなり本物の商用サービスを作ろうとすると、落とし穴がたくさんあって挫折しがちです。AIが普及する前から、初心者の定番練習は 「Wikiを作る」 か 「Twitter（X）のクローンを作る」 でした。

Twitterのクローンには、Web開発の大事なポイントがぎゅっと詰まっています。

• ログイン（あなたが誰かを知る）
• 自分のデータと他人のデータを分ける（下書きは本人にしか見えない）
• 投稿を保存・表示する（データの読み書き）
• タイムライン（新しい順に並べる）
• フォロー／フォロワー（人と人をつなぐ）

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

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

ふつうのWeb開発の本は、「HTTPの仕組み」「認証と認可」「データベースの使い方」といった、初心者には分かりにくい裏側の仕組みからくどくど説明します。だから難しく感じます。

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

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

そして、全体を貫く一番大事な問いはこれです。

🔑 そのデータは「誰のもの」か？

「自分の下書きは自分にしか見えない」「他人のツイートは消せない」——これを成り立たせる仕組みが、この教材の背骨です。これをサボると、他の人のデータが見えてしまう・消せてしまうという、初心者がやりがちな事故が起きます。

この「データを持ち主ごとに分ける」考え方を、Supabaseの RLS（行レベルセキュリティ） という機能でそのまま体験しながら学びます。

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

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

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

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

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

用意するもの

• パソコン（WindowsでもMacでもOK）
• Googleアカウント（ログインに使います。パスワードを自分で管理しなくて済むので安全＆簡単）
• Supabaseの無料アカウント（サーバー・データベース・ログインがまとめて手に入ります）
• AIコーディングツール（Claude / Cursor / v0 など。第12章「Vibe coding編」で使います）

💡 最初は難しいフレームワークを使いません。HTMLが1枚と、Supabaseの部品だけでも動きます。 まずは「認証」と「データ分離」という骨組みに集中しましょう。

---

目次

第1部　全体像をつかむ

• 第0章　はじめに（このページ）
• 第1章　Webアプリの登場人物 — ブラウザ・サーバー・データベース・API。あなたのツイートが画面に出るまで

第2部　ログインする：認証と「ユーザー」

• 第2章　「ユーザー」って何？ — Google認証と、いろいろなID ✅ — ユーザーの正体／OAuth(Google)のIDと auth.users のID／@ハンドル／連番を避けてUUID／クッキー・localStorage と DB の違い

第3部　投稿する：データベース(DB)とデータ分離

• 第3章　ツイートしてみる — はじめてのデータ保存 ✅ — データを保存(insert)して新しい順に取り出す(select)。まだ持ち主なし＝第4章への布石
• 第4章　【最重要】自分のデータを他人に見せない — データ分離とRLS ✅ — 「このデータは誰のもの？」を user_id と RLS で守る、教材の背骨
  • 補足：RLSのない普通のDB（PostgreSQL / MySQL）ではどう守る？

第4部　見せる：API設計とタイムライン

• 第5章　APIって何？ — データの出し入れ窓口を「設計」する ✅ — CRUDと「ユーザーごとの出し分け」の正体（同じAPI＋ログインID＋RLS）。Supabaseの自動API／RESTの2つの顔
• 第6章　公開タイムライン — 「自分だけ」と「みんな」をRLSで両立 ✅ — is_publicで公開/下書きを分け、読むルールを「公開 or 自分」に広げる

第5部　人とつながる：リレーション

• 第7章　フォローする — 人と人を結ぶ（中間テーブル） ✅ — follows中間テーブル（多対多・複合主キー）。follower→followee の向き
• 第8章　ホームタイムライン — フォロー中の人だけ表示（テーブルをまたぐ） ✅ — follows→tweets を結合/inで。結合・サブクエリの入口。Twitterの心臓部

第6部　速さと安全：キャッシュとセキュリティ

• 第9章　キャッシュ — 速さの工夫と、その落とし穴 ✅ — 控えを置いて速くする代償（古くなる・他人のが残る）。個人データは共有キャッシュ厳禁
• 第10章　ありがちな失敗と直し方 — セキュリティ落とし穴集 ✅ — RLS切り忘れ/フロントだけ/秘密鍵/XSS/キャッシュ事故/インジェクション…の総ざらい

第7部　仕上げ・応用

• 第11章　AIに作らせて、読む（Vibe coding編） ✅ — AIに作らせ、出力の安全を読む目（各章の🤖チェックリスト統合）
• 第12章　スケールの物語 — フォロワー1億人をTwitterはどう捌いたか（読み物） ✅ — fan-out（push/pull）とセレブ問題。規模で設計が変わる

付録

• 付録A　Supabaseセットアップ手順 ✅
• 付録B　Google認証 設定手順 ✅
• 付録C　普通のDB（PostgreSQL / MySQL）入門 — RLSがない世界での守り方・対応表 ✅
• 付録D　ORマッパー（ORM）入門 — SQLを書かずにデータを扱う道具 ✅
• 付録E　用語ミニ辞典（ふりがな・言い換え付き） ✅
• 付録F　アクセストークン と リフレッシュトークン — ログインの「証明書」のしくみ ✅
• 付録G　テーブル設計の小道具 — フラグ・ID・インデックス ✅ — is_public等のフラグ／status列／ソフトデリート、ID（名札）とインデックス（索引）の違い、どの列に索引を張るか

---

この教材の到達点

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

• Googleでログインできる、自分専用のTwitterもどき
• 他人に下書きを見られない・消されない「データ分離」のあるアプリ
• フォローした人の投稿だけが流れる「ホームタイムライン」
• AIに作らせたコードを読んで「ここが危ない／ここが安全」と判断できる目

関連ページ

• 第4回 Singularity Society BootCamp 企画ノート — この教材を作る背景（生成AI / Vibe coding 重視のブートキャンプ）
• セキュリティ脅威マップ（攻撃視点の分類ハブ） — 「データを守る」をもっと広く学びたいときの姉妹コンテンツ