いいえ、絶対に使ってはいけないわけではありません。jQueryを必要としない所でも安易に使用していないか自問しろということです。
jQueryの利点と欠点
jQueryを使う利点は次のような物がありました。
- 現在サポートされていない古いブラウザ間の違いを吸収する。(ただし、1.x系を使用する必要がある。)
- 現在サポートされていない古いブラウザに存在しない便利な関数を提供する。(ただし、1.x系を使用する必要がある。)
- CSSセレクタを使ったDOM検索や便利なajax関数など、簡易な書き方を提供する。
対して欠点もいくつかあります。
- jQueryは巨大なライブラリであり、それだけで読み込み自体が遅くなる。
- ブラウザの組込関数1に比べて、ラッピングしている関係上、どうしても速度が遅い。
- jQueryは直接DOM操作を行うため、Virtual DOMやそれに類似する技術を用いた場合よりも遅い。
- Virtual DOMやそれに類似する技術を用いたフレームワークと、jQueryのDOM操作を併用すると、思わぬ結果をもたらす。
- 古い日本語の情報が多くの混乱をもたらす。
- jQueryに頼りっぱなしになると、JavaScript自体を覚えなくなり、jQueryの中身についても理解しようとしなくなる。
利点のうち、1.と2.は古いブラウザのためです。すでにサポートが終了したIE8以下に対応しなければならないという特殊な事情が無い限り、意味がありません。また、最新の3.x系は使えず、古い1.x系(保守はされているが、機能追加等は無い)を使う必要があります。
つまり、もはやjQueryの利点は3.しかありません。ただ、3.だけでもとても有用です。それは、欠点を十分理解しているのであれば、という条件付きですが。
さて、欠点を見る前に、一つ言わなければならないことがあります。現在のブラウザにおいて、jQueryが提供するような関数のほとんどは初めから用意されています。jQueryのように短く書けるという訳ではありませんが、jQueryを使わないとできないと言うことはほとんどありません。このことは重要ですので、覚えておいてください。
欠点を見ていきましょう。欠点は大きく分けると「速度」と「学習」に関することです。まずは「速度」ですが、jQueryはやはりどうしても遅くなります。また、大量のDOM直接操作は総じて遅いです。これはJavaScriptの処理が遅いのでは無く、ブラウザが逐一レンダリングするため、そのレンダリングが遅いことが原因です。現在のDOM周りのフレームワークはVirtual DOM等を利用して、高速化を図っています。jQueryは昔ながらのDOM直接操作しかできませんので、jQueryを使い続ける限り、高速化はできません。そして、それら高速なフレームワークとjQueryのDOM操作は極めて相性が悪いです。
次に「学習」です。jQueryで検索すると、多くのサイトや書籍が見つかりますが、そのほとんどが「学習」することに適しているとは言えません。
- バージョンが明記されておらず、古い情報のままの場合がある。
- 逆引きでの「使い方」のサンプルだけで、jQueryやJavaScriptの説明が無い。
これらを見て「jQueryを使えたつもり」になってしまっている方が多数います。単に使うだけが目的のユーザーはそれでかまいません。しかし、今後JavaScriptを学び、JavaScriptを使いこなそうとする人にとっては、それらの情報は全く意味がありません。
jQueryを使っていると、できるようになった気分にさせるだけで、いつまでたっても素人のままで、初心者のステージに立ってすらいません。これはjQueryの功罪だと思っています。
jQueryを使わないならどうしたらいいのか？
一個や二個のDOM操作のためにjQueryを使うことは冗長です。DOMの取得はdocument.getElementById()などでjQueryを使わずに取得できます。イベントもaddEventListner()で十分なときがあります。
実行を遅らせるために$(function(){...});を使う必要もありません。単に<scritp>タグを最後に書けばいいだけです。余計な処理は何もありません。
多くのDOM操作が必要になるとき、そのときこそjQueryは悪手です。React、AngularJS、Riot、Vue.jsなど、jQueryよりも高速で、jQueryよりも扱いやすいフレームワークがたくさんあります。そういうのはいきなり触るのは難しいとか考えていませんか？逆です。jQueryで一つ一つ積み上げていく方が非常に難しいです。どのフレームワークがベストなのかは私からは何も言えませんが、少なくとも、jQueryよりはどれも素晴らしいフレームワークと言えます。
ajaxのためにjQueryを使うことは悪い手段ではありません。あれ、今までと言っていることが違いますね。ajaxを現行のブラウザでネイティブに実現するにはXMLHttpRequestを使う必要がありますが、使いやすいとは言いがたいからです。ですが、jQueryだけがajaxを書くための選択肢では無い事に注意すべきです。たとえば、Fetchはこれからの標準APIです。IEとSafariのみ未対応ですが、polyfillが用意されていますので、どのブラウザでも使用できます。SuperAgentやaxiosなども人気があるライブラリです。ajaxのためだけにjQueryを使うという手段は余計な物が付いてくるだけかも知れません。
実際の例を見てみましょう。
[
{"name": "太郎", "age": 18},
{"name": "花子", "age": 17},
{"name": "権太", "age": 20}
]
上のデータを取得し、表示する場合、jQueryでは下記のようになるでしょう。2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQueryでのサンプル</title>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function() {
var listNode = $('#list');
var messageNode = $('#message');
$('#show').click(function() {
listNode.empty();
messageNode.text('データを取得中…');
$.ajax({
url: 'data.json',
dataType: 'json',
success: function(data, status, xhr) {
$.each(data, function(idx, value) {
listNode.append(
'<li>' + value.name + ' ' + value.age + '</li>'
);
});
messageNode.text('データを表示しました。');
},
error: function(xhr, status, err) {
console.error(err);
messageNode.text('データ取得に失敗しました。\n' +
err.toString());
}
});
});
});
</script>
</head>
<body>
<p><a id="show" href="#">表示</a></p>
<ul id="list"></ul>
<pre id="message"></pre>
</body>
</html>
ネイティブに書き直すと次のようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ネイティブのサンプル</title>
</head>
<body>
<p><a id="show" href="#">表示</a></p>
<ul id="list"></ul>
<pre id="message"></pre>
<script>
const listNode = document.getElementById('list');
const messageNode = document.getElementById('message');
document.getElementById('show').addEventListener('click', () => {
while (listNode.firstChild) {
listNode.removeChild(listNode.firstChild);
}
messageNode.textContent = 'データを取得中…'
fetch('data.json')
.then(response => response.ok ? response.json()
: Promise.reject(response.statusText))
.then(data => {
for (const value of data) {
const node = document.createElement('li');
node.textContent = `${value.name} ${value.age}`;
listNode.appendChild(node);
}
messageNode.textContent = 'データを表示しました。';
})
.catch(reason => {
console.error(reason);
messageNode.textContent =
`データ取得に失敗しました。\n${reason.toString()}`;
})
});
</script>
</body>
</html>
ES6の機能を使っているため、このままではChromeでしか動作しませんが、Babelを用いたES5への変換とFetchとPromiseのpolyfillを用いれば、ほかのブラウザでも十分動作すると思われます。
jQueryは$を使うことで短く簡易に書けることを目的としていますが、時として、それは魔法のような物になってしまいます。$一つが多くの意味を持ち、その意味は注意深く見る必要があります。ネイティブな関数は、長いように見えますが、その分、意味がはっきりとしており、よりわかりやすいことを念頭に置いています。
実際の行数はほとんど変わりません。短く書けることとロジックが簡潔に書けることは別の意味です。どちらも簡潔に書くことができています。また、現在において、普通のコールバックよりもPromiseが重視されています。Promiseさえ覚えておけば、色んな所で応用が利くのに対し、jQueryはそれぞれの関数について個別で覚えておく必要があります。
それでもjQueryを使う場面
もし、jQueryを使う必要があるとすれば、それは、ライブラリの依存関係で使う必要がある場合でしょう。多くの有用なライブラリがまだまだjQueryを使用していますので、それらを使うのであれば、どうしても必要になります。
ただ、世の中としてはjQuery離れは加速しています。今後、新しいライブラリはjQuery依存は少なくなってくるでしょう。使いたいライブラリがjQueryを使っているから自分も使うのではなく、本当にそこでjQueryが必要なのかを考えてください。そのまま使ってしまうと、jQuery離れがいつまで経ってもできず、時代に取り残されてしまいます。
jQueryを使うな
私が一番危惧しているのは、JavaScript=jQueryと思い込み、jQueryの使い方で満足してしまっている人達のことです。彼らは、何かのコピペで動くからそれで十分だと思っているかも知れませんが、応用などできるわけがありませんから、どこかで限界が来るでしょう。
jQueryしかわからないのであれば、JavaScriptに入門すらしていません。今後、本当にJavaScriptを勉強していきたいと思うのであれば、jQueryを一度禁止し、何ができるのかを考えてみてください。そして、jQuery無しでも書けるようになってください。jQueryが何をしているのかを理解できるようになってください。その後、jQueryに戻ってくることは何も問題ありません。jQueryを使うべきか使うべきでないかの判断ができるようになっているはずですから。
-
これら組込関数を用いるVanilla JSという冗談のようなフレームワークがあります。 ↩
-
suceesとerrorのコールバックは昔ながらの書き方を採用しています。 ↩