なぜページをリロードするとデータが消えるのか？

おめでとうございます！もしあなたがこれまでのHTML、CSS、Reactのコースを学んできたなら、今や「美しいウェブサイトを構築する」能力を身につけているはずです。Todoリストのような素敵なウェブサイトを作れるでしょう。項目の追加、削除、完了チェックも可能です。

しかし、このページを友人に送ると、彼は喜んで「明日牛乳を買う」と入力し、誤ってブラウザの「更新（F5）」を押してしまいました... ガーン！入力したデータがすべて消えてしまいました！

なぜこうなるのでしょうか？純粋なフロントエンド（HTML/JavaScript）は「記憶喪失の天才」のようなものだからです。計算能力は高く、美しい画面を作れますが、記憶は「短期記憶（ブラウザのメモリ内）」しかありません。ページを閉じたり更新したりすると、記憶は一瞬で消去されます。

もし本当の「ビジネスレベルのアプリケーション」—例えばユーザー登録、全世界に見える投稿、明日も残っているショッピングカート—を作りたいなら、この天才に「長期記憶ハードディスク」を装備する必要があります。

この長期記憶ハードディスクは、ソフトウェアエンジニアリングの世界では**「データベース（Database）」**と呼ばれています。

リレーショナルデータベースの王者：PostgreSQL

データベースには多くの種類があり、車にセダン、スポーツカー、トラックがあるのと同じです。現代のソフトウェア業界で最も主流で、Apple、Instagram、Uberなどの大企業で広く使われているのが**「リレーショナルデータベース（Relational Database）」**です。

「リレーショナルデータベース」は「極めて厳格で、絶対にミスを許さない超Excelスプレッドシート」と想像してください。

そして現在、世界で最も人気があり、パフォーマンスが高いオープンソースのリレーショナルデータベースが、このコースの主役である**PostgreSQL（エンジニアからはPostgresと愛称で呼ばれます）**です。

なぜMySQLやMongoDBではなくPostgreSQLを選ぶのか？

厳密なデータ一貫性：ECサイトを作る場合、顧客の支払い処理は絶対にミスできません。Postgresはこの種の「トランザクション」を最も厳格に保護します。
究極の拡張性：プレーンテキスト、地理空間データ（PostGIS）、AIに必要なベクトルデータ（pgvector）まで保存可能。これが現在のAI企業がこぞってPostgresを使う理由です！
VercelとSupabaseの第一選択：現代のサーバーレス開発フローでは、最大のクラウドデータベースプロバイダーであるSupabaseの基盤も純粋なPostgreSQLです。

SQL（Structured Query Language）：データベースと話す魔法の呪文

もしデータベースが難攻不落の図書館なら、SQLはあなたが司書とコミュニケーションを取る唯一の言語です。

すべてのリレーショナルデータベース（Postgres、MySQL、Oracleなど）は、SQLという標準言語を理解します。これは一連の英単語で構成される文で、データベースにデータの「作成、読み取り、更新、削除」（エンジニアはCRUDと略します）を命令します。

いくつかの典型的なSQL例を見てみましょう：

1. データの検索（Read / SELECT）

「会員テーブル（users）」から「18歳以上の」会員の名前とメールを取得したい場合。従来のExcelでは、フィルターを開き、年齢列を選択し、18より大きいと設定します。 SQLの世界では、データベースにこの呪文を唱えるだけです：

SELECT name, email 
FROM users 
WHERE age > 18;

データベースは0.01秒で数百万のデータをフィルタリングして返します！

2. データの追加（Create / INSERT）

新規ユーザーがサイトに登録した時、バックエンドプログラムはデータベースに次の命令を出します：

INSERT INTO users (name, email, age) 
VALUES ('王大明', 'ming@example.com', 25);

3. データの更新（Update / UPDATE）

王大明が名前を「王小明」に変更したい場合：

UPDATE users 
SET name = '王小明' 
WHERE email = 'ming@example.com';

4. データの削除（Delete / DELETE）

王大明がアカウントを削除したい場合（注意：実際のビジネスではDELETEは稀で、通常は無効フラグを立てます）：

DELETE FROM users 
WHERE email = 'ming@example.com';

Vibe Coding時代、SQL構文を暗記する必要はあるか？

ここまで読んで、あなたはこう不安に思うかもしれません：「大変！JavaScriptもまだマスターしていないのに、新しいSQL言語まで覚えないといけないの？」

ご安心ください。ここでVibe Coding（詠唱開発）が真価を発揮します。

現代のAI（ChatGPT、Claudeなど）は世界最高のSQL翻訳機と言えます。SQLの構文は40年前から存在し、ネット上には数十億のSQLチュートリアルがあるため、AIのニューラルネットワークはSQLを完全に習得しています。

JOIN、GROUP BY、HAVINGといった複雑な高度な構文を暗記する必要は全くありません。必要なのは：

AIに「テーブルの構造」を日本語で説明する
AIに「欲しい結果」を日本語で伝える

【驚くべきVibe Promptの例】 ordersという注文テーブルがあります（フィールド：注文ID、会員ID、合計金額、注文日）。 usersという会員テーブルもあります（フィールド：会員ID、会員名）。

次のPostgreSQLクエリを作成してください：「2024年に合計購入金額が10,000円を超える『上位5人のVIP会員』を抽出し、名前と総購入金額を降順で表示」。

この呪文を唱えると、AIは即座にベテランエンジニアでも少し考える必要がある複雑なJOINとGROUP BY構文を生成します：

SELECT u.name, SUM(o.total_amount) as total_spent
FROM users u
JOIN orders o ON u.user_id = o.user_id
WHERE EXTRACT(YEAR FROM o.order_date) = 2024
GROUP BY u.user_id, u.name
HAVING SUM(o.total_amount) > 10000
ORDER BY total_spent DESC
LIMIT 5;

このコードをコピーしてデータベースの実行ボックスに貼り付け、Enterを押すだけで、上司が求めるVIPレポートが瞬時に完成します！

実戦準備：無料クラウドデータベースSupabase

以前は、自分のPCにPostgreSQLをインストールするのは非常に面倒で、PCがクラッシュすることさえありました。しかし今ではSupabase—無料でワンクリックでPostgreSQLデータベースを提供する超強力なクラウドプラットフォームがあります。

次の章では、Supabaseアカウントの登録方法をステップバイステップで解説し、Cursor AIと連携してReactサイトからこの実際のデータベースに接続する方法を教えます。これでウェブの「記憶喪失」を完全に治療しましょう！準備はいいですか？さあ、次に進みましょう！