その他のフレームワークと歴史 — jQuery / Svelte / Solid / Angular

📖 このページのゴール：React と Vue 以外の主な選択肢（jQuery / Svelte / Solid / Angular）を、歴史の流れといっしょに知ること。「なぜ昔は jQuery が必要だったのか」「Svelte/Solid が“速い”のはなぜか」「Angular はどんな現場向きか」を、たとえと表でつかみます。 ← 目次・はじめにへもどる

React と Vue を見てきました。でも世の中のフレームワークはこの2つだけではありません。昔を支えた立役者（jQuery） から、今どきの尖った新顔（Svelte / Solid）、全部入りの大物（Angular） まで——名前だけは聞くこれらを、地図の上に置けるように整理しましょう。

まずは「なぜこんなに種類があるのか」、歴史の流れから見るのが近道です。🟢

🟢 歴史の流れ — なぜ道具が変わってきたか

フロントエンドの道具は、そのときの“いちばんの困りごと”を解決する形で進化してきました。ざっくり3幕です。

第1幕：素のJSは「クロスブラウザ」が大変だった（〜2000年代）
   ↓  ブラウザごとに書き方が違い、同じことをするのに分岐だらけ…
第2幕：jQuery が救った（2006〜2010年代）
   ↓  「どのブラウザでも1行で動く」DOM操作で世界を席巻
第3幕：宣言的フレームワークの時代へ（React/Vue、2013〜）
       画面が複雑になり「状態 → UI」を自動反映するやり方が主流に

📌 クロスブラウザ（＝いろんなブラウザでちゃんと動かすこと）：昔は Internet Explorer・Firefox などで JavaScript の書き方や挙動が微妙に違い、「Aブラウザでは動くがBブラウザでは動かない」が日常茶飯事でした。このブラウザ間の差を毎回手で吸収するのが、当時いちばんの苦労だったのです。

第2幕の主役が、次に紹介する jQuery です。

🏺 jQuery — いにしえの技、されど現役

🏺 たとえ：方言だらけの土地に現れた“共通語の通訳”。 どのブラウザ（＝方言）にも、jQuery を1人かませば同じひと言で通じるようになった——それが jQuery のありがたみでした。

項目 内容
登場 2006年〜。2010年代の Web を席巻した
すごかった点 クロスブラウザの DOM 操作を簡単にした立役者。$(...) ひとつで、どのブラウザでも同じように要素を取得・変更・アニメ
今の立ち位置 主役は素のJS・React/Vue に譲った。でも引退ではない
現役の現場 WordPress などで、今も世界中の多くのサイトで現役。膨大な既存サイト・プラグインが jQuery 前提で動いている

小さなコード例で雰囲気だけ見ておきましょう。「ボタンが押されたら○○する」が、たった1行です。

$('#btn').on('click', () => alert('押されたよ'));

$('#btn')＝「id が btn の要素を取ってきて」、.on('click', …)＝「クリックされたら、この処理を動かして」。素のJSなら数行・ブラウザ差の心配ありの所が、短く・ブラウザ差を気にせず書けたわけです。これが当時どれほど画期的だったか、想像できますね。

🟢 新規開発で jQuery を最初に選ぶことは、今は普通ありません。 ブラウザ間の差が昔ほど大きくなく、素のJSや React/Vue で十分だからです。とはいえ「いにしえの技、されど現役」——既存サイトの保守では今も普通に出会います。出会ったときに「あ、これは画面を手で操作する命令的なやつだな」と分かれば十分。敬意をもって接しましょう。🟢

ここから先は、jQuery とは逆向き——より新しく・より宣言的な新顔たちです。🔧

Svelte（スヴェルト）— “ビルド時に消える”コンパイラ

🔧 たとえ：注文を受けてから作るのではなく、あらかじめ料理を“完成形”に下ごしらえしておく。 多くのフレームワークがブラウザの中で画面の差分を計算するのに対し、Svelte はビルドのとき（あなたが書いたコードを変換する段階）に、素のJSへコンパイルしてしまいます。

  • 🧱 コンパイラ（＝変換する道具）：書いた Svelte のコードを、ビルド時にむだのない素のJSへ変換。実行時にフレームワーク本体を持ち歩かない発想。
  • 🪶 仮想DOM を使わない：前ページで出た「いったんメモリ上で差分を計算する仮想DOM」を使わずに、必要な所だけ直接更新するコードに変換 → 動作が軽い。
  • ✍️ 記述が少ない：おまじない（定型コード）が少なく、見た目がすっきり。初心者にも読みやすいと評判。
  • 🚀 SvelteKit：Svelte 用の“全部入り”メタフレームワーク（ルーティングやSSRなど）。Next.js の Svelte 版のような立ち位置。

💡 ざっくり：「ブラウザでがんばる」のではなく「ビルドで仕込んでおく」のが Svelte の個性です。

Solid（ソリッド）— React似の書き味で“超高速”

🔧 たとえ：React の見た目はそのまま、エンジンだけスポーツカーに載せ替えた。 書き方は React によく似ていて移りやすいのに、内部の更新の仕組みがまるで違います。

  • 🧬 React風の書き味：JSX（JSの中にHTMLっぽく書くやつ）など、React 経験者がなじみやすい書き方。
  • ⚡ 細粒度（さいりゅうど）リアクティブ：「状態が変わったら、本当に影響する一点だけ」をピンポイントで更新。画面まるごとを見直さないので超高速。
  • 🪶 仮想DOM を使わない：Svelte 同様、仮想DOM なしで直接・最小限に更新する方式。

💡 ざっくり：「React の書き心地」と「ムダのない更新」の両取りを狙ったのが Solid。新しめで尖った選択肢です。

Angular（アンギュラー）— Google製の“全部入り”

🔧 たとえ：必要な道具がぜんぶ揃った“システムキッチン”。 これまでの React/Vue が「土台＋好きな道具を足す」方式だったのに対し、Angular は最初から全部そろっているのが特徴です。

  • 📦 フルセット（全部入り）：ルーティング・フォーム・DI（依存性注入） などが最初から標準装備。あれこれ別途選ばなくてよい。
  • 🧩 DI（依存性注入）（＝部品を外から渡してもらう仕組み）：大きなアプリで部品を整理・差し替えしやすくする、企業開発で好まれる設計。
  • 🅰️ TypeScript 前提：型をきっちり付けて開発する文化。大人数でも崩れにくい。
  • 🏢 大規模・企業向け：ルールがしっかりしていて統制が効く反面、覚えることが多く学習は重い。

💡 ざっくり：「個人で気軽に」より「大人数できっちり」に向くのが Angular。Google製の安心感も企業に好まれる理由です。

🔎 ぜんぶ並べて比較

“何で作るか”の仲間たち（React/Vue も再掲）を一枚に。

  特徴（ひとことで） 学習 こんな時に
🏺 jQuery 命令的にDOMを直操作。クロスブラウザの先駆者 やさしい 既存サイトの保守。新規ではまず選ばない
⚛️ React 宣言的・仮想DOM・巨大エコシステム（求人最多） やや急 迷ったらこれ。情報も人材も豊富
💚 Vue 宣言的・HTMLに近いテンプレ・学びやすい やさしめ 学習コストを抑えたい／小〜中規模
🔥 Svelte ビルド時に素のJSへ・仮想DOM無し・記述少 やさしめ 軽さ・書き味重視。新しめでOKな個人〜中規模
🟦 Solid React風＋細粒度リアクティブで超高速・仮想DOM無し ややReact寄り 速度を極めたい・React に慣れている人
🅰️ Angular Google製フルセット（ルーティング/フォーム/DI）・TS前提 重い 大規模・企業・大人数できっちり

🔒 どれを選んでも横断の鉄則は同じ：APIキー・秘密はフロントに出さない。jQuery の古いサイトでも、新しい Svelte/Solid でも、ブラウザに送ったコードは誰でも見られます。秘密はサーバー側へ（このあとの SSR の話につながります）。

🟢 で、初心者はどうすれば？

選択肢が増えて少しクラクラしたかもしれません。でも結論はシンプルです。

🌱 まず学ぶなら React か Vue。 情報・教材・人材がいちばん多く、つまずいても助けが見つかります。新規開発で jQuery を選ぶことは普通ありません（既存サイトの保守で“会う”道具です）。Svelte / Solid / Angular は「そういう個性の仲間がいる」と地図に置いておけば十分——必要になったとき戻ってくればOK。🟢

🟢 ひとことで言うと

道具の歴史は「素のJSはクロスブラウザが大変 → jQuery が救った → 宣言的フレームワーク（React/Vue）の時代へ」という流れ。jQuery は“いにしえの技、されど現役”（WordPress 等で今も活躍、でも新規では選ばない）。Svelte/Solid は仮想DOM無しで軽量・高速、Angular は全部入りで大規模・企業向け。とはいえまず学ぶなら React か Vue が王道です。

➡️ 次へ

次のページ：SPA（クライアント描画 / CSR）— ブラウザで全部描く → ← 目次・はじめにへもどる