【JS番外編-3】あの「$」マークは何？jQueryの正体と、Reactが主流になった理由

ネットでJavaScriptの書き方を調べていると、こんなコードを見たことはありませんか？

// あなたが習った書き方
document.querySelector("#box").style.display = "none";

// ネットで見かける書き方
$("#box").hide();

「えっ、下の書き方の方が短くて楽じゃん！」と思いますよね。
これが、一昔前にWeb業界を支配していた王様、「jQuery（ジェイクエリー）」です。

今回は、このjQueryとは何者なのか、そしてなぜ最近は「React」や「Vue.js」などの新しい技術が使われるのか、その歴史をお話しします。

jQuery（ジェイクエリー）って何？

jQueryは、2006年に登場した「JavaScriptライブラリ」です。
「ライブラリ」とは、便利な機能をまとめた「道具箱」のこと。

当時、素のJavaScript（Vanilla JS）はブラウザごとの挙動の違いが激しく、書くのがとても大変でした。
そこで登場したjQueryのキャッチコピーが「Write Less, Do More（少なく書いて、多くを成す）」です。

$マークの魔法

jQuery最大の特徴は、$() という書き方です。

// IDが "main" の要素をクリックしたら、何かする
$("#main").on("click", function() {
    alert("押された！");
});

この短さと便利さのおかげで、世界中のWebサイトの70%以上で使われるようになりました。

なぜ今は「使わない」と言われるの？

しかし、最近のスクールや教材では「jQueryは覚えなくていい」と言われることが多いです。
理由は主に2つあります。

理由①：素のJavaScriptが進化したから

実は、私たちがこれまで学んできた querySelector や classList などの便利な命令は、「jQueryがあまりに便利だから、本家JSにも取り入れよう」として後から追加されたものが多いのです。

つまり、わざわざjQueryという道具箱を読み込まなくても、標準機能だけで同じくらい簡単に書けるようになったのです。

理由②：Webアプリが複雑になりすぎたから

昔のWebサイトは「画像をスライドさせる」「メニューを開く」程度の動きでした。
しかし今は、GoogleマップやSNSのように「画面遷移せずにデータが次々と変わる」複雑なアプリが当たり前です。

jQueryは「画面のこの部分を書き換えろ！」と命令するスタイル（命令的）なので、画面が複雑になるとコードがスパゲッティ状態になりやすいという弱点がありました。

次世代の主役：React / Vue.js

そこで登場したのが、「フレームワーク」と呼ばれる新しい技術です。

• React（リアクト）： Facebook（Meta）が作った。世界シェアNo.1。
• Vue.js（ビュージェイエス）： 初心者に優しく、日本で人気。

これらは「データの状態（変数）が変われば、画面は自動で変わる」という設計になっています（宣言的）。

jQuery：
「ボタンが押されたら、文字の色を赤に変えて、中身を『エラー』に書き換えて…」と全部指示する。

React/Vue：
「変数がエラー状態になった。あとは任せた！」→（自動で画面が赤くなる）

この「データ中心」の考え方が、大規模なアプリ開発に適しているため、現在の主流になっています。

じゃあjQueryは勉強しなくていい？

結論：「ガッツリ勉強しなくていいけど、読めるようにはしておこう」です。

なぜなら、既存のWebサイト（特にWordPressで作られたサイト）の多くは、まだjQueryで動いているからです。
実務に入ると「昔作られたサイトの修正」で必ずjQueryに出会います。

jQueryの読み方講座

これだけ知っておけば大丈夫です。

• $("#id") ➡ document.querySelector("#id") と同じ。
• $(".class") ➡ document.querySelectorAll(".class") と同じ。
• .on("click", ...) ➡ addEventListener("click", ...) と同じ。
• .css(...) ➡ style.xxx = ... と同じ。

まとめ

• jQuery： 昔の王様。「短く書ける」のがメリット。
  ➡ 簡単なLP制作や、WordPressの改修で今も現役。
• React / Vue： 現代の王様。「データで管理する」のがメリット。
  ➡ Webサービスやアプリ開発の主流。

あなたがこれから「Web制作（HPを作る）」に進むならjQueryの知識は役立ちます。
「Web開発（アプリを作る）」に進むなら、次はReactなどに挑戦してみてください。

JavaScriptの世界は広大ですが、基礎となる「変数・配列・関数・イベント」の知識があれば、どんな新しい技術も必ず習得できます。
自信を持って次のステップへ進んでください！