Google Mapsの登場が世界を変えました。地図をドラッグしても画面が真っ白にリロードされない！
これが Ajax（非同期通信） の衝撃であり、SPA (Single Page Application) の幕開けでした。
1. 「サーバーはデータだけよこせ」
🔄 自分で盛り付ける「バイキング」
これまではサーバーが料理を完成させていましたが、これからは「素材（データ）だけもらって、自分（ブラウザ）で盛り付ける」スタイルに変わりました。
クライアントサイド・レンダリング (CSR)
sequenceDiagram
participant User as ユーザー
participant Browser as ブラウザ (JS/React)
participant API as APIサーバー
User->>Browser: サイトにアクセス
Browser->>User: 🌀読込中... (枠だけ表示)
Browser->>API: [Fetch] データください (JSON)
API-->>Browser: { "title": "Hello" }
Browser->>Browser: JSが画面を組み立てる
Note over User: 画面遷移なしで
サクサク動く！
図: ブラウザが主役の世界
2. 深掘り：生きている木（DOM）
🌳 DOM（ドム）ツリー
ブラウザの中には、HTMLタグでできた巨大な樹（DOMツリー）が生えています。
JavaScriptは、この樹の枝を切ったり（削除）、新しい実をつけたり（追加）する「庭師」のような存在です。
graph TD
HTML[html] --> Body[body]
Body --> Header[header]
Body --> Main[main]
Main --> Article[article]
Article --> H1[h1: タイトル]
Article --> P[p: 本文]
JS[js: 庭師]
JS -.->|appendChild| P
JS -.->|remove| Header
style JS fill:#FFF9C4,stroke:#FBC02D
図: JSがHTMLの構造を直接いじる
3. 現代の武器たち
mindmap
root((Frontend))
jQuery
Old Hero
DOM操作
Modern Frameworks
React
Virtual DOM
Vue.js
Angular
Build Tools
Webpack
Vite
図: フロントエンド技術の進化
4. 複雑化する世界
しかし、開発は恐ろしく複雑になりました。ビルドツール、バンドル、依存関係地獄...。
そこでたどり着いたのが、原点回帰の思想「SSG」と「Cloud」です。