jQuery不要論は胸が痛い。思うことをつらつらと書いていく| cumak

2022年10月9日

jQuery不要論は胸が痛い。思うことをつらつらと書いていく

はじめに〜いらないと言われる理由

ぼやきとも言える文章にもなりそうですが、jQueryについて思うことを書いていこうと思います。結論を先に言うと、「jQueryが疑問視された始まりは誤解もあったと思うんだけど、将来的にはなくなっていきそうだなぁ（胸が痛い）」という内容です。

いろいろ考えたきっかけは、一個前に書いたコーダーのためのWeb制作環境〜万能な静的ファイル群を作ろう〜という記事で、jQueryについて書こうか迷ったことでした。

だいぶ前からjQueryオワコン説が流れたり、Twitterを見ていても「いらない」という発信を見かけることがあります。「jQueryいりますか？」と聞いている初心者の方に対して、「いる」「いらない」両面の意見も見かけます。

私はどちらかというとWeb制作では使いたい派ですが、正直言うと今はもうVanillaで十分とも言えるし、今から学習する人に奨めはしません。でもちょっと前まではいらないというほどではなかったし、誤解からこのストリームが生まれたのではと思っています。

そもそも、jQueryがなんだかイケテナイという立ち位置にある原因を考えつくまま下記に挙げました。

重い（重かった。現在はそうでもない）
ライブラリやフレームワークに組み込みにくい
jQueryの恩恵を感じられる人は多くない
「jQueryがいらないもの」という認識が新しい世代のクリエイターに広まってる

1, jQuery「重い」について（重くない）

これに関しては、嫌われ始めた最初の原因だと思いますが、現在はそうでもないです。

ちょっと記憶があいまいなのですが、昔は100kBくらいあったような気がしています。現在は「jquery-3.6.1.min.js」を読み込むと31.2kBでした。「 jquery-3.6.1.slim.min.js」に至っては24.8kB。軽いです。

そもそも、仮に100kBあったとしても WebサイトのTOPページの転送容量を考えると、まったく気にならないサイズです。大きめのイメージ画像1つで100kBなんてすぐ超えてしまいます。

じゃあなんで重いと言われてしまうのかというと、マニュアルのようなめちゃくちゃシンプルなWebサイトを作っている人か、 Web制作ではなく開発の方でJSをごりごり書いている勢からの意見だったのではと思います。

あんまり言いたくないですが、Web制作はWeb開発と比べて、初心者が手を出しやすい分野であるため、容量の基準も知らないまま人の言ったことを真に受けることが多かったり自分で検証することができない人も多いのではと思います。

また、JSをごりごり書いているWeb開発側の人からすると、Web開発ではWeb制作ほど画像を扱わないので 100kBなんて重いと感じたのかもしれないです。

結論をいうと、jQueryの容量は現在30kBほどで、Web制作で扱うのにまったく問題がありません。

2, ライブラリやフレームワークに組み込みにくいことについて

開発の現場ではjQuery不要論は納得できます。 ES Modulesとして公開されてないのでそもそもReactやvueのアプリケーションに組み込みにくいし、何か小さなパッケージを使いたい時にそれがjQuery依存だった場合、そのためにjQueryもインストールしなければいけなくなったりして、無駄な感じがしてしまいます。

また、コードを書く際に宣言的な書き方を採用している場合、jQueryの「$('.hoge')」のような、クラスを指定してあれこれする機能は、何が便利なのかわからないと思います。そもそもそういう書き方を必要としていないので、jQueryを学ぶ機会もないと思います。

ゆえに、開発に軸足を置く人が、jQueryは不要だと言うのはわかります。 Vanillaで書けばいいし、たまにやるWeb制作のためにjQueryの文法を勉強しないといけないのは面倒です。

…という背景があって、これらでjQueryが不要だと感じた人たちがjQuery不要論を展開し、それを見たWeb「制作」初心者が、単純にいらないと思い込んだ現状がある（あった）ような気がします。

3, jQueryの恩恵を感じられる人は多くない

通常のWeb制作では命令的な書き方の方が都合が良いため、jQueryの恩恵は十分に感じられます…が、

それが感じられるのはある程度JSを書けるWebサイトの制作者
しかしWebサイト制作にはJSが「かける」ことは必須ではない

ため、jQueryを必要だといえる人の意見が不足していたように感じます。

初心者も多いことや、コピペでJSを導入する能力さえあればとりあえずはできるので（それが悪いとは言ってない）、「そうは言ってもjQueryいいでしょ」と自信持って言える人は少なかったのではと思います。

4, 「jQueryがいらないもの」という認識が新しい世代のクリエイターに広まってる

これは、1〜3の結果です。

私がjQueryを学習し始めたのは2013年くらいです。最初jQueryから入って、ネイティブがかけるようになってきたという感じです。

それから約10年ですが、新しい世代のクリエイターが、何を学ぶかをSNSで問いかけ技術を選別する時、答えとしてjQuery不要論を説いているものをよく見かけました。

上述したように、jQueryの良さがわかるのは、ある程度JSがかけるWeb制作のクリエイターです。 Web制作の初心者が学習の対象としてjQueryを選ぶには（モチベーションの意味で）ちょっとハードルがあると感じます。

これから学ぶ人たちがjQueryを使わなかった場合、さらに5年後10年後には、jQueryを使ったWebサイトやプラグインは少なくなることが予想されます。

現在jQueryを学ぶ理由として「使いたいプラグインがjQuery依存である」「保守を任されたWebサイトにjQueryが使われている」というのは大いにあると思いますが、現在の新しいクリエイターがjQueryを使わない場合、この現象が将来的になくなります。そうすると、また不要論の根拠が一つ増えることになります。

それを加味して、「将来的にjQueryは不要」という考えもあると思います。（世の中にそう考えてる人がいるかは知りません。自分が思ったことです）

Vanillaは、もうほぼjQueryの記法と同じくらいの量でかける

jQueryが便利だった部分は主に、セレクタ指定や、複数要素の処理がすごく短く簡単に書けるところでした。しかし今は、vanillaで同じくらいの量で書けるようになっています。

例えば下記のような場合です。

<ul>
  <li class="hoge-li">リスト1</li>
  <li class="hoge-li">リスト2</li>
  <li class="hoge-li">リスト3</li>
</ul>

JSでhoge-li全てにspanタグを入れたい場合

<li class="hoge-li"><span>リスト1</span></li>

jQuery

$(function(){
  $('.hoge-li').each(function() {
    const innerText = $(this).html();
    $(this).html(`<span>${innerText}</span>`);
  })
})

ネイティブJS

window.addEventListener("load", function() {
  const li = document.querySelectorAll('.hoge-li');
  li.forEach(e => {
    const innerText = e.innerHTML;
    e.textContent = '';
    e.insertAdjacentHTML('beforeend',`<span>${innerText}</span>`)
  })
})

jQueryが便利だったポイントと、のちにネイティブがサポートした部分を挙げてみます。

１、$('.hoge')という書き方で、そのクラスの要素全てを取得できる → querySelectorAllが登場した

２、each(function(){...})で、オブジェクト全てに対して同じ処理を書ける → forEachがnodeListに対しても使用可能になった

３、文字列で作ったタグもhtml()で差し込み可能 → insertAdjacentHTMLを使えば文字列をHTMLにパースして挿入できる。createElementの必要がなくなった

ほかにも、当時はclosest()やnext()やparent()なども、vanillaでは書きにくいと感じていましたが、いろいろとサポートされてきました。

…それでもまだ、一旦要素を取得してから処理を当てなければいけないところや、CSSの扱い、その他一部jQueryがないと面倒だと感じるところはあるのですが、それは自分がjQueryを書ける状態だからだと思います。 jQueryの記法を知らない人が、一から記法を学ぶほどのメリットではないと思います。

「使いたい人だけ使えばいい」とは言えない。時流に沿うことも必要

Web制作の工程で、コーディングで完結してあとは公開するだけのものもあれば、その静的コーディングを元にCMSを組み込むこともあります。

また、コーディング自体を手分けして複数人で行うこともあります。

複数人が関わる場合、jQueryを使う人がjQueryでJSを書いた場合、知らない人がそのファイルを扱うのは困難になります。こういった場合に、「jQueryが使えた方がいいからみんな使えるようになろう」ということができなければ、jQueryで書くということはプロジェクトにとってマイナスになってしまいます。

今後は、先に書いたような理由でjQueryを新たに学ぶ人は少ないと予想されるので、jQueryを使わないことがWeb制作のスタンダードになれば、今書いている人もVanillaに移行せざるをえなくなるのではと思います。

これが、私が「jQueryが悪いわけじゃないのに今後なくなる」んじゃないかと思っている理由です。胸が痛い。

(ちなみに)vueやReactと比較されるものではない

まれに、jQueryがライブラリだというだけで、「vueやReact」と「jQuery」比較されることがありますが、これは議論の余地もないと思っています。

「jQueryは、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリ」by Wikipedia
でありvueやReactとは性質が全く異なります。

Web制作ならjQuery（を検討の余地あり、個人的にはやらなくてもOK）、Web開発ならvueやReact優先でいいと思います。 Web制作の中でも、SPAなど（仕組みが）アプリ寄りのWebサイトを作りたいならvueやReactが良いと思います。（が、SPAなどは初心者がいきなり手を出すものではないと思うので、Web制作初心者がまずvueやReactをやるのはちょっと違うと思う）

まとめ

Web制作で主に扱うHTMLやCSS、純粋なJavaScriptは比較的「捨てられる」技術は少なかったように思います。

今まで使ってきたものがなくなって、やり方を変えないといけなくなったときに、柔軟に変化についていけるクリエイターになりたいと思っています。

…が、胸は痛いという長めのぼやきでした。おしまい。

Blog