この記事の内容
よく、「初心者なんですが、jQueryを習得すべきか悩んでいます」という声をききます。ので、jQueryの現状についてと、では結局勉強すべきか否かについての回答を書いています。あと勉強するならここだけおさえればOKという点についても触れています。
「jQueryはオワコン」か
よく囁かれる話題ではありますが、データを見るとオワコンと言うにはちょっと難しいかなと思われますが、トレンドとしては他のjsフレームワーク/ライブラリと比べると下降トレンドですが。
こちらは、Hideout der Eremitさんのブログ記事からの引用となりますが、
上の図は6月1日時点での全世界トレンド(5年間)である。
青がjQuery、赤がReact、黄がAngular、グラフの意味をなしていないが緑と紫がそれぞれVue.jsとBackbone.jsである。
ということで、jQueryは結構人気が下がっているようにみえますね。一方、ReactやAngularはかなり人気が増してきていると。(世界的にはVueは息をしていないんでしょうか？日本や中国だけ？)
日本では、jQueryの人気は未だに高く、下降トレンドではあるものの世界と比べると使用割合が高いですし、下降もゆるやかです。
また、jQuery本体のバージョンアップ頻度も以前より落ち着いてきていますし(これは成熟したとも取れますが)、これからさらにjQueryが盛り上がることがあるかというと、なかなか難しいかと思います。
jQueryが下降トレンドにというのは完全に事実です。しかしオワコンかというとやっぱり難しいです。
Qiitaの2019年に注目すべきWebテクノロジー6選では、
新規プロジェクトにおいて、jQueryが最初の選択であるとは限りません。
しかし、それは一日30万ダウンロードされており、2017年初頭に比べて300%という伸びを記録しています。
さらに驚くべきことに、上位50万サイトの実に90%がまだjQueryを使用しています。
ということで、トレンドとしては事実として下がってきているものの、実態としてはjQueryが導入されているWebページは極めて多く、また、未だにダウンロード数もかなりのものですね。
というわけで総括すると、「jQueryは下降トレンドではあるものの、未だに採用しているWebサイトは極めて多く、オワコンというのは難しい」というところですかね。
jQueryは何処で使われているのか
Webページ/Webサイト
前述の通りですが、上位50万サイトの90%がいまだにjQueryを使っているとのこと。めっちゃ多いですね...
脱jQueryの波がジワジワきていると思っていたので、こんな状態だとは思っていませんでした。
企業の既存Webシステム
企業に導入されているいわゆるWebシステムでは、jQueryが入っている可能性が極めて高いですね。
企業にWebシステムが導入された頃、大体10年ちょっと前でしょうか。この時はJavascript標準のAPIも今ほどすごくなかったですし、jQueryマジありがてぇーという感じでしたので、迷わずjQueryを入れていたと思います。
稀に企業のWebシステム改修案件なんかを見ると、やはりjQueryは入っていますね。
小規模な個人作成のWebアプリを新規でサクッと作る時
DOMをいじいじしてもカオスにならないことが分かり切っているケースではjQueryを使うこともしばしばあります。
Array.from(document.querySelectorAll("div")).forEach(el=> console.log(el))
とするのか、
$("div").each((i, el)=> console.log(el))
とするのか、
微妙に書き方がシンプルになったりするのでjQueryとりあえず入れとこ。みたいなこともあります。
jQueryは学ぶ必要がないのか
今までの流れからすると分かるかと思いますが、「ガチガチに勉強する必要は無いけど、とりあえずサラッとおさえておく」のが良いかと思います。やはり、2019年時点ではjQueryを見かけることが多いですからね。
必要な所だけをおさえるのには2日もかからないと思います。
jQueryでおさえるべきところは...
要素が簡単にとれます
$(".hoge-class")
で要素とれる
$()の中にCSSセレクタを書いて、要素を取得することができます。
要素が簡単に作れます
$("<div>")
jquery無しだと、
document.createElement("div")
これだけだと若干短くなっただけじゃん、という感じですが、jQueryの場合はこのままチェーンしてDOM生成とプロパティ設定と要素のinsertがワンライナーで書けたりします。(しますが適切に折り返して可読性あげるべき)
メソッドチェーンできます
$("div").addClass("hogehoge").attr("data-mytest", "hogeval").appendTo("body")
のように、jQueryオブジェクトのメソッド1つ1つがjQueryオブジェクトを返す性質を利用して、こんな感じのメソッドチェーンができます。
purejsだと、一旦要素を作って、クラスを付与して、属性を与えて、bodyに付ける、など別個にやらないといけない、はず。
DOMにループ適用できます(each)
$("div").each((i, v)=> console.log(v))
でループできます。
ajaxできます
$.ajax({url: "https://hogehoge.com"})
みたいな感じです。
これは普通にfetchでもOKなんですけどね。こんな感じで既存プロジェクトでは$.ajaxの記述がされていることが多いので一応。
.attrで属性取得/セットできます
$("div").attr("hoge") // 取得
$("div").attr("hoge", "val") // 値セット
.cssでstyle設定できます
$("div").css({opacity: 0, display: "none"})
.animateでアニメーションできます
$("div").animate({opacity: 0}, 500)
おわりに
総括すると、jQueryは減少トレンドではあるものの、まだまだ世の中に存在しているので、覚える
悩んでいます、という場合にはとりあえず必要な所だけさらっておくのが良いでしょう、という感じですね。
いやあ、特に日本でのグラフを見ると、jQueryはまだまだまだまだ人気のようです...