近年Web開発においてjQuery利用やめる理由

12 min read

jQuery とは何か

jQuery は、2006 年に登場した JavaScript ライブラリである。Web ページの DOM 操作やイベントハンドリングをクロスブラウザを意識することなく簡単に行うことができるため、JavaScript 経験が少ない開発者でも使いやすく、広く浸透した。


イベント
2006 年jQuery の最初のバージョンをリリース
2007 年MIT ライセンスで jQuery がリリース
2008 年jQuery 1.2 がリリース
2009 年jQuery 1.4 がリリース
2011 年jQuery 1.7 がリリース
2013 年jQuery 2.0 がリリースされ、Internet Explorer 6/7/8 のサポートが廃止された
2014 年jQuery 1.11 と 2.1 がリリース
2015 年jQuery 3.0 リリース
2016 年jQuery 3.1 リリース、2.2.4・1.12.4 のリリース(1 系、2 系の最終バージョン)
2017 年jQuery 3.2 リリース
2019 年jQuery 3.4 リリース
2020 年jQuery 3.5 リリース
2021 年jQuery 3.6 リリース

jQuery が広く使われるようになった理由

jQuery が広く使われるようになった理由の 1 つに、クロスブラウザの互換性問題があった。jQuery はクロスブラウザで動作するため、開発者はブラウザ毎の互換性問題を意識する必要が薄くなった。また、jQuery の構文は初心者でも使いやすいため多くの開発者が利用し、コミュニティが発展した。これによって、jQuery プラグインやドキュメントが豊富に提供されるようになった。

jQuery の登場とほぼ同時期に、Prototype.js もその役割を担っていた。しかし、jQuery は Prototype.js よりも広く採用され、トレンドが移り変わった経緯がある。

  • シンプルな構文
    両者とも当時のプレーンな JavaScript に比べシンプルな構文を持っていたが、Prototype.js より jQuery の構文が受け入れられた。
  • パフォーマンス
    jQuery は Sizzle と呼ばれる高速なセレクタエンジンを使用していたため、jQuery は Prototype.js に比べパフォーマンスが良かった。
  • プラグインの豊富さ
    jQuery には、多くのプラグインが存在しており、簡単に利用できるため、jQuery を利用することで機能拡張が簡単だった。一方、Prototype.js にはプラグインが存在していたが、jQuery に比べてその数も少なく利用しにくかった。
  • コミュニティの規模
    Prototype.js に比べ、jQuery のコミュニティの規模は大きく、多くの開発者が利用していたため、機能の改善やバグの修正が頻繁に行われた。

jQuery の功績と功罪

jQuery は、Ajax 通信、アニメーション、イベントハンドリングなどの機能をクロスブラウザ対応し、当時の Web 開発における生産性を向上させた。さらに、プラグインの豊富さや、ドキュメントの質の高さも、jQuery の人気を高める要因となった。

jQuery は、ブラウザに組み込まれている DOM 操作の API をラップしているため、現代の JavaScript の機能を完全に活用できない1

jQuery と JavaScript のコード比較
jQueryJavaScript
// jQueryを使ったDOM要素の取得
var myElement = $(".my-class");
// JavaScriptのDOM APIを使ったDOM要素の取得
var myElement = document.querySelector(".my-class");
// jQueryを使ったAjaxリクエスト
$.ajax({
  url: "https://example.com/api/data",
  type: "GET",
  success: function (data) {
    console.log("Data received: ", data);
  },
  error: function (error) {
    console.log("Error: ", error);
  },
});
// JavaScriptのFetch APIを使ったAjaxリクエスト
fetch("https://example.com/api/data")
  .then((response) => response.json())
  .then((data) => console.log("Data received: ", data))
  .catch((error) => console.log("Error: ", error));

jQuery と Prototype.js とモダン JavaScript のコード比較

以下は、jQuery、Prototype.js、およびモダン JavaScript で同じタスクを実行するためのサンプルコードである。これらのコードで各コードの異なるアプローチが分かる。

// jQuery
$(document).ready(function () {
  $(".button").on("click", function () {
    $(this).toggleClass("active");
  });
});
// Prototype.js
document.observe("dom:loaded", function () {
  $$("button").invoke("observe", "click", function () {
    this.toggleClassName("active");
  });
});
// モダンJavaScript
document.addEventListener("DOMContentLoaded", function () {
  const buttons = document.querySelectorAll(".button");
  buttons.forEach((button) => {
    button.addEventListener("click", function () {
      this.classList.toggle("active");
    });
  });
});

それぞれのコードは、DOM がロードされた後、クラス名が "button" の要素をクリックした際に "active" クラスをトグルする。

  • jQuery のコード: 最初に必要な要素を取得するために、セレクタの使用と、クリックイベントの登録にclick()メソッドを使用している。
  • Prototype.js のコード: $$()メソッドを使用して要素を取得し、invoke()メソッドを使用して各要素にクリックイベントを追加する。
  • モダン JavaScript のコード: querySelectorAll()メソッドを使用して要素を取得し、forEach()メソッドを使用して各要素にクリックイベントを追加する。

現代の Web 開発と jQuery

jQuery が登場した 2006 年当時は、 JavaScript のクロスブラウザ対応が難しく、DOM 操作や Ajax 通信などを簡単に実装できる jQuery は多くの開発者から支持された。

しかし、現代の Web 開発では、jQuery が必要とされるケースはもはやほとんどない。現代の Web 開発においても jQuery が必要な場面はあるが、多くのブラウザは標準的な JavaScript API をサポートするようになっており、クロスブラウザ対応も改善されている。

jQuery をやめるメリット

jQuery をやめると、ファイルサイズを削減でき、オーバーヘッドもなくすことができるため、ページの読み込み速度が向上する可能性はある。また、jQuery をやめることが、モダンな Web 開発の基礎へ移行することにつながるケースもある。

  • ファイルサイズの削減
    jQuery を利用することで、不要な機能も含まれた大規模なライブラリを読み込む必要がある。しかし、現代の Web 開発には、必要最小限の JavaScript コードを読み込むことが求められている。jQuery を利用しないことで、ページの読み込み時間を短縮し、ユーザーエクスペリエンスの向上につながる。
  • モダンな Web 開発の基礎への移行
    jQuery は、標準の JavaScript を拡張しているが、現在の JavaScript は jQuery が提供する機能の多くを備えている。jQuery を利用することで、最新の JavaScript の特長を活用できなくなる場合がある。

jQuery の代替手段

jQuery の利用をやめる場合、代替手段を探す必要がある。代替手段には、プレーンな JavaScript の利用やモダンなフレームワークの利用などがある。

プレーンな JavaScript の利用

現在、ブラウザのアップデートにより、JavaScript 単体での DOM 操作やイベントハンドリングに必要な機能が整っているため、jQuery を使う必要性は減っている。

以下は、jQuery で書かれたコードと、同じ動作をする JavaScript のコードの例である。

// jQuery
$(".my-class").hide();

// JavaScript
document.querySelectorAll(".my-class").forEach(function (elem) {
  elem.style.display = "none";
});

You might not need jQueryを確認すれば、プレーンな JavaScript での書き方を確認できる。

// jQuery
$.ajax({
  type: "POST",
  url: "/my/url",
  data: data,
});

// JavaScript
await fetch("/my/url", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(data),
});

モダンなフレームワークの利用

jQuery の直接的な代替ではないが、ReactVue.jsAngular などのモダンなフレームワークを使うこともできる。これらのフレームワークは、仮想 DOM などの技術を使ってパフォーマンスを最適化し、開発効率を向上させることができる。

以下は、モダンなフレームワークを使って同じ動作をするコードの例である。

<!-- Vue.js -->
<template>
  <div v-if="visible" class="my-class">
    <!-- content -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        visible: true,
      };
    },
  };
</script>
// React
import React, { useState } from "react";

function Example() {
  const [visible, setVisible] = useState(true);

  return <div className={visible ? "my-class" : "hidden"}>{/* content */}</div>;
}

export default Example;

jQuery の代わりに、これらのフレームワークを使うことで、より高速で簡潔なコードを書くことができる。ただし、フレームワークの学習コストがかかる場合もあるため、プロジェクトの要件に合わせて適切な選択をする必要はある。

おわり

jQuery はブラウザ互換性の問題を解決し、Web 開発を簡単に行える便利なライブラリだったが、現代の Web 開発においては必要性が薄れてきている。jQuery の利用にはファイルサイズの大きさによる Web ページの読み込み速度の低下や過剰な DOM 操作によるパフォーマンス低下があるため、jQuery の利用をやめ、直接 JavaScript を書くことで必要最低限のコードしか実行しないようにできる。そのため、新しい JavaScript 機能やモダンなフレームワークを利用することでより高度な Web アプリケーションを開発できるようになる。

Footnotes

  1. 2023 年現在、addEventListener の第三引数(options)の拡張などに追従できない。

このページをシェアする

関連タグ

関連記事

Boolean型の変数に適した命名規則

背景 / プレフィックス / どのような条件なのか分かりやすくする / 否定形を避ける / 同じ意味の単語を避ける / プロジェクトの命名規則やコーディング規約に従う / Linter で矯正する

[ESLint] 特定のimportにおいてパスの末尾スラッシュを禁止する方法

背景 / やりたいこと / @typescript-eslint/no-restricted-imports を利用した / 余談(末尾のスラッシュ自体を禁止にする)

CSS in JSとは何か

想定読者 / そもそも JS フレームワーク(React、Vue.js)を採用する理由とは何か / 「命令的 UI」 と 「宣言的 UI」 / 「命令的 UI」 VS 「宣言的 UI」 / CSS in JS とは / CSS in JS ライブラリ / Emotion の使い方 / 利用するメリット / 利用するデメ

Deprecated になった jQuery API を静的に検出する方法

モチベーション / eslint-plugin-no-jquery を導入する / 実行する

竈門炭治郎をCSS Paint APIで再現する

概要 / 完成品 / 実装方法 / 〆 / 参考

[CSS in JS] 外部のリセットCSSを使う方法

目的 / 課題 / おまけ