トップに戻る
【オワコン】jQueryは終わったって本当？まだ使っても大丈夫？
 > 
コラム > 
HOME > 
2025/07/14
2025/09/26

【オワコン】jQueryは終わったって本当？まだ使っても大丈夫？

JavaScriptを用いたDOM操作やイベントの管理において、ほぼ100%名前が挙げられるのが「jQuery」です。

WEBの分野で仕事をしている方はもちろん、現在勉強中の方であっても、知らない人の方が少ないでしょう。

ただ、jQueryについて調べていると、たまに「jQueryは終わり」「オワコン」と批評している方も見かけます。

今回は、そんな「jQueryオワコン論争」について、管理人の主観を交えつつ話していきます。

jQueryがオワコンと言われている理由

jQueryがオワコンと言われている理由としては、主に以下の4つが挙げられます。

  • バニラJSが十分便利
  • コンポーネント設計が定番化
  • 冗長なコードになりやすい
  • アップデートが遅い（重要）

バニラJSが十分便利になった

昨今のjQuery需要減の裏には、バニラJSの改良が進んでいることが挙げられます。

バニラJSとは、いわゆる「JavaScript」そのものを指す言葉です。

JavaScriptを使用する場合はライブラリやフレームワークを使用することが多い昨今、「JavaScriptで3年間開発していました」と言われても、ReactなのかVue.jsなのか、Angularなのか、jQueryなのか、という話になります。

「素のJSを3年間使っていました」と説明できるよう「バニラ」と呼ぶようになったのです。

ただ、バニラJSという言葉がない10年以上前のJavaScriptは、はっきり言って使いにくいという他ないものでした。

VBScriptなど、JavaScript以外のScriptが流通していた上、ECMAScript（「JavaScriptはこういうものである」と定めた共通仕様）による統一も不正確だったため、ブラウザごとに対応している関数などはまちまちで、クロスブラウザ対応のJavaScriptの処理を作るのも一苦労。

その中でjQueryは「どのブラウザにも100%対応可能！最適化されたDOM操作・イベント管理向けライブラリ！」として、広まっていったわけです。

ただ、これはあくまで昔の話です。

IE（現在は無い旧覇権ブラウザ）も現代ではネス湖のネッシーのような立ち位置になり、一般に使われているブラウザは全てECMAScript準拠の設計であるため、JavaScriptの機能に対応しているブラウザがどうとか、考える必要はほぼありません。

その上、バニラJSにはDOM操作関連の改良はもちろん、JavaScriptの制御構文や配列・オブジェクトの取り回しに役立つ関数の追加など、ユーザが使いやすいようにモダンな機能の追加もどんどんなされています。

最近では配列やオブジェクトのディープコピーが簡単に行えるstructuredClone()というメソッドも追加されましたね。あれはかなり便利です。

このことから、現代ではバニラJSだけで作ろうが、jQueryだけで作ろうが、そこまでメンテナンス性に差が出ないという状態になっています。

なんなら、jQuery特有のクラス等を取り扱わない分、バニラJSの方がスマートで整合性の保たれたコードが書けると言えるかもしれません。

コンポーネント設計が定番化

jQueryが使われなくなっている要因として、コンポーネント設計の考え方からずれているというのも大きな点です。

従来のJavaScriptはHTMLタグにclass属性などを書き、それらを用いたセレクタを使って対象の要素とイベントリスナーを紐づけるようなコーディングが基本でした。

ただし、現在はイベントと描画する要素をまとめて「コンポーネント」として管理する設計が主流になっています。

以下に見本を示します。前が従来の書き方で、後ろが現在主流のコンポーネントの書き方です。

▼ 従来の書き方

<!-- HTML -->
<div class="button-wrap">
  <button>ボタン1</button>
  <button>ボタン2</button>
  <button>ボタン3</button>
</div>

<script>
  // 各ボタン要素にイベントを設置
  // （buttonは複数あるため、forEachで一つずつにイベントリスナーを設置）
  document.querySelectorAll("button").forEach(e => {
    e.addEventListener("click", (e) => {
      const target = e.target;
      // クリックされた要素のクラス属性にselectedを追加
      target.classList.add("selected");
    });
  });
</script>

▼ 現在主流の書き方

// このクラスを専用のレンダリングメソッドと描画すれば、画面に表示できる
class Button extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            "is_selected": false
        }
    }

    pushBtn = ()=>{
        this.setState({"is_selected": true})
    }

    render(){
        return(
            <button
                className={this.state.is_selected ? "is_selected" : ""}
                onClick={this.pushBtn}
            >
                {this.props.label}
            </button>
        );
    }
}

どちらも書き方は全く異なりますが、機能自体は全く同じです。

ただ、後者のコンポーネント設計の場合、要素とイベントの記述が一つのクラスにまとまっているのがわかると思います。

前者の従来の書き方だと、要素とイベントリスナーは基本別々のところに書かなければなりません。

サンプルは簡易なものだからまだ良いですが、これが中規模以上のプログラムになってくると、どの要素にどのイベントが紐づいているのかを発見するのが大変になり、メンテナンス性が大きく低下します。

コンポーネントで要素とイベントを管理しておけば、「ボタン要素のクリック時の挙動を変えたい」となったとき、該当箇所のコンポーネントを改修するだけで良いですから、メンテナンスが圧倒的に楽なわけです。

セレクタで指定する方法はタイポを招く

jQueryを使って開発した方なら、「セレクタでタイプミスして数時間、無駄な原因探求をしていた」という経験が、一度はあるのではないでしょうか。

例えば、「クラス属性がselectedの要素をクリックした際にはアラートを表示する」みたいなプログラムを以下のように書きましたが、動きませんでした。

$("selected").click(function(){
  alert("test"); //一旦テストだ！
});

原因は単純で、クラスを指定したいのに、セレクタを指定する箇所で「.selected」と書くところを「selected」と書いており、「 . （ドット）」が抜けているのです。

気を付けていればいいような気もしますが、そもそも特定の文字列を入力するような開発手法はタイプミス（タイポ）を招く脆弱な設計であり、ほぼすべてのケースでエディタの補完機能を活用することもできないため、開発効率が良くありません。

このことから、セレクタを用いたJavaScriptの開発は、今後復活してくることはないだろうな、と思っています。

冗長なコードになりやすい

jQueryはJavaScriptでのDOM操作やイベントリスナーの記述を簡易化できる点で、コードをすっきりさせる目的で利用されることもしばしありました。

ただ、現代ではReactやVue.jsなど、後発のJavaScriptフレームワークが多数登場しており、DOM操作やイベントリスナーの実装も、そちらのフレームワークを使っている方が、より構造的で、管理しやすく記述できてしまうのが事実です。

例えば、jQueryで「１，２，３の連番が入ったli要素を持ったul要素を新規作成し、挿入する」という処理を書こうと思うと、以下のようなコードを書くことになります。

// 挿入対象の要素
const $parent = $("#target");

// ul要素を新規作成
const $ul = $("<ul></ul>");

// 連番の作成
for (let i=1; i <= 3; i++) {
  // 連番をテキストに含むli要素の新規作成、追加
  const $li = $("<li>" + i + "</li>");
  $ul.append($li);
}

// ul要素を挿入
$target.append($ul);

jQueryでDOM要素を追加するといったら、大体こんな感じのコードになるとは思います。

一方、例えば管理人が愛用しているReactの場合は、以下のように記述することができます。

（説明が面倒なので、以下コードの解説はしないよ！ごめんね！！！！！）

let items = [];
for (let i=1; i <= 3; i++) {
  // ReactではJSXの機能で、タグをそのまま記述できる
  items.push(<li>{i}</li>);
}

// 要素描画
return (
  <ul>
    {items}
  </ul>
);

jQueryの時の処理と同じようなことを書いているのですが、まあ、後者の方がコードがすっきりしていて、ずいぶん見通しは良いのではないでしょうか。

ここにさらに追加した要素にイベントリスナーを置いて…とかやりだすと、jQueryでは追加する要素とイベントリスナーの処理を別々の場所に書くことが多く、はっきり言って改修するのも面倒になっていきます。

jQueryは確かに、要素の属性をいじるとか、ちょっとclickイベントをつけるとか、そういう用途では役立つのですが、昔からDOMの生成や新規作成をしたり、DOM要素を追加したりするには冗長なコードを書く他なく、その点においては決して便利ではありませんでした。

それが2025年現在になっても一切改善されていないのは、jQueryの怠慢と呼べるかもしれませんね。

アップデートの頻度がおっっっっっそい

jQueryの評判が年々落ちている一番の理由はこれだと思います。

明らかにアップデート（jQuery自体の機能更新）の頻度が遅いです。

現状のjQueryの最新バージョンは3.7.1なのですが、これが発表されたのは何と2023年8月23日。

私がこれを書いているのが2025年7月なので、およそ2年間、何もアップデートがなされていないということになります。

一応BETA版ではあるものの、バージョン4.0.0の公開も始まっていますが、それですら公開日は2024年7月17日で、1年以上何の音沙汰もありません。

2年間もあればJavaScriptのメソッドが新しく数十種類は追加されますし、トレンドの後発ライブラリやフレームワークはそれに合わせ、長くても半年程度のスパンで更新がなされており、ドキュメントもひっきりなしに更新・修正が繰り返され、盛り上がっています。

jQueryのテンション感は、例えるなら老後の余生を過ごしているかのようであり、はっきり言って「jQueryを良くしていきたい」という気概はあまり感じられません。

気が向いたら更新する、ぐらいのイメージでしょうか。

更新が遅いからと言って困ることはあまりないのですが、使う側としてはあまり応援する気分にはなれませんね。

jQueryは本当にオワコンなの？

結論ですが、jQueryはオワコンとも言えるものの、まだまだ実用レベルのライブラリであると言えます。

理由としてはシンプルで、jQueryの代替品がないの一点です。

先述したようにコードとしてはReactやVue.jsなどでDOMを管理する方が構造的でかつ管理性も良いのですが、彼らには既存のプロジェクトに導入しにくいという最大の欠点があります。

jQueryは手軽に導入しやすい

ReactやVue.jsを使って開発するということは、すなわちHTMLファイルを事実上ほとんど使わない形でのWEBサイト制作を行うことになります。

先ほどのリストの例で言えばリストを表すul要素はもちろん、それをラップするdiv要素や、それをラップするmain要素、さらにそのmain要素と合わせて、headerやfooter要素など、WEBサイトにおけるほぼ全ての要素をJavaScript側で管理するというのが、ReactやVue.jsなど、後発のフレームワークの設計思想です。

それ自体が悪いことではないのですが、その特性から、既にHTMLファイルを用いて作られているWEBサイトに、ちょっとDOM操作の仕組みを取り入れたい、という程度の改修には利用できない（しにくい）弱点があります。

PHPなどで作られているサイトにおいても、同じことが言えますね。

ReactやVue.jsの場合、操作する対象の要素を全てJavaScript側で管理できるよう、新たにDOM構造をJSに移す作業が必要になりますから、実質的にWEBサイトを作り直すレベルで工数がかかるわけです。

一方のjQueryなら、CDNでライブラリを読み込んで、操作したい要素のセレクタをjQueryメソッドで指定して、ゴニョゴニョするだけで改修が終わるので、圧倒的に手軽なんですよね。

工数がかかるということは、すなわちそれだけお金がかかってくるということ。

クライアントがいるような受託案件では「費用を安く済ましたい」という要望がほとんどですから、jQueryを使ったクラシカルなWEB制作を行うことが多いわけです。

【まとめ】バニラのJavaScriptも学習しておこう

jQueryはオワコンというのは管理人も間違いではないと思いますが、じゃあ使わないのかというと、全くそんなことはありません。

仕事でも普通に使いますし、何なら使えないと仕事にならないとも思います。

ただ、jQueryはjQueryで便利なのは間違いないですが、当然ながら「jQueryだけ使えたらOK」という話でもありません。

初心者の中には「jQueryのDOM操作の仕方はわかるけど、普通のJavaScriptで同じことやれと言われたら、できない（笑）」という方、結構いると思います。

管理人の考えとしては、それはダメです。

先述したように、jQueryは更新頻度が低く、はっきり言って予後は明るくありません。

また、後発のライブラリやフレームワークの中には、jQueryのメソッドと競合してしまい、jQueryを導入している環境下では動作しないものもあります。

WEBエンジニアなど、WEB開発を生業にして生きていくならばjQueryのない環境でも堂々とコーディングできる人材になるのが望ましいです。

jQueryは一度使うと中々やめられないヤバイブツですが、初心者の方はjQueryと合わせ、普通のJavaScript（バニラJS）の習得を怠らないことを、忘れないようにしてください。

SHARE