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

jQuery とは何か

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

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 の機能を完全に活用できない¹。

// 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 で同じタスクを実行するためのサンプルコードである。これらのコードで各コードの異なるアプローチが分かる。

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

jQuery

最初に必要な要素を取得するために、セレクタの使用と、クリックイベントの登録にclick()メソッドを使用している。

// jQuery
$(document).ready(function () {
  $('.button').on('click', function () {
    $(this).toggleClass('active');
  });
});

Prototype.js

$$()メソッドを使用して要素を取得し、invoke()メソッドを使用して各要素にクリックイベントを追加する。

// Prototype.js
document.observe('dom:loaded', function () {
  $$('button').invoke('observe', 'click', function () {
    this.toggleClassName('active');
  });
});

モダン JavaScript

querySelectorAll()メソッドを使用して要素を取得し、forEach()メソッドを使用して各要素にクリックイベントを追加する。

// モダンJavaScript
document.addEventListener('DOMContentLoaded', function () {
  const buttons = document.querySelectorAll('.button');
  buttons.forEach((button) => {
    button.addEventListener('click', function () {
      this.classList.toggle('active');
    });
  });
});

現代の 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 の直接的な代替ではないが、React や Vue.js、Angular などのモダンなフレームワークを使うこともできる。これらのフレームワークは、仮想 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 アプリケーションを開発できるようになる。