『jQueryは古い・オワコン・使わない』と言われることがあります。Twitterでも誰かの発信をきっかけに話題に上がることがあります。
色々な意見がり、正解はありません。ただ、それだとこれから勉強する方は困るので、この記事ではなるべく客観的な事実を踏まえて、初心者向けにjQueryをこれから勉強すべきか？について解説します。
💡 コーディングの練習なら模写修行！
この記事の目次
jQueryとは
jQueryはJavaScriptのライブラリです。
初学者の方は、『JavaScriptのコードをより簡単に書けるようにしたもの』と思えば一旦OKです。
また、簡単に書ける以外のjQueryを使うメリットとして、ブラウザごとの記述の違いをあまり気にしなくて良くなる点がありました。←過去形にしているのは、現在は色々と事情も変わってきているからです。詳しくは後述します。
- JavaScriptのコードをより簡単に書ける
- ブラウザによる記述の違いを吸収してくれる
👆 ただしこれらのメリットが薄まってきているので、古い・オワコン・使わないと言われるようになってきたわけです。
便利な機能や部品の集まりのようなものです。自分で作ろうと思うと大変な機能もライブラリを使えば、サクッと導入できます。
jQueryの旬は終わった？
個人的にjQueryの旬は終わったと思っています。
Google トレンドでは2012年をピークに下降
👇 jQueryの日本でのトレンド
👇 jQueryの全世界でのトレンド
上記のスクショはGoogle トレンドでjQueryと調べた結果です。
2012年をピークに下降トレンドにあることがわかります。ここからまたブームが来る可能性は、ほぼ0だと思います。
近年jQueryの書籍は出ていない
AmazonでjQueryと検索すればわかりますが、ここ数年は出版社経由で出たjQuery関連の書籍がほとんどありません。
下記はよく他の記事で紹介されているjQueryの書籍と発売日です。
出版時期がこれだけ古いと注意点があります。
- 今はCSSだけで実装できる
- 今はもっと効率的に書ける
- 今はもっとパフォーマンスが良い書き方がある
例えば、このようなことが考えられます。出版時期にはベストな実装方法でも今は古くなっていることがあります。
Reactのような現在トレンドの技術は、書籍の出版も盛んです。jQueryと違って、ここ1,2年で出た書籍があります。
技術系の書籍は出版時期が新しいものを選ぶと良いです！言語によっては古い書籍だと、現在は非推奨な書き方や動かないコードもあります！
jQueryは古い・オワコン・使わないと言われる理由
- jQueryよりも適したライブラリやフレームワークが出てきた
- CSSでできることが増えた
- 素のJavaScriptでできることが増えた
- ブラウザ間の差が少なくなった(IEが終わった)
↑このような各技術の進化や時代の流れで、jQueryを使うメリットが少なくなり、古い・オワコン・使わないと言われるようになりました。
『ブラウザ間の差が少なくなった(IEが終わった)』に関して、補足します。
jQuery / React / Vueなどのライブラリやフレームワークを使わないJavaScriptのこと。生のJavaScriptやVanilla JSと呼ぶこともある。
ブラウザ間の差が少なくなった(IEが終わった)
Google Chrome / Safari / Microsoft Edge / Firefox / (Internet Explorer)などのブラウザは、開発元が違うため、細かい機能や仕様が異なります。
それゆえ、コーディングやプログラミングをする際に、『Google Chromeでは動くけど、Safariでは動かない...』なんてことが起こります。
昔はブラウザによる違いが大きく、その差を埋めるのが大変でした。jQueryはそこをうまくカバーしてくれる点が大きなメリットでした。
しかし、今は問題児だったInternet Explorerも終了し、各ブラウザの差が少なくなりました。
環境によって変わるjQuery事情
- jQueryの現在の使われ方
- jQueryの将来性
- jQueryをこれから勉強するべきか
これらは全て、置かれている環境によります。大きく分類すると、web制作なのか、web開発なのかで変わります。
場合分けして解説します。
web制作とweb開発、共通で言えること
- 既存サイト / サービス / システムの保守には使う
- 何らかの事情で使わないといけない場合もある(かも？)
jQueryが使われているサイト / サービス / システムを改修や拡張する際には、もちろんjQueryの知識が必要です。
世にあるサイトの77.4%でjQueryが使われている(参考)というデータもあるくらい、jQueryはたくさんのサイトで使われています。従って、改修等で触る可能性は十分あります。
また、複数人で制作・開発するプロジェクトでは、参加メンバーの都合上、jQueryを使うことがあるかもしれません。(過去に経験あり)
web制作でのjQuery
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた先日、↑こちらの記事を読んで、最近作られたサイトでも想像以上にjQueryが使われていることに驚きました。
『あるギャラリーサイトに載っている国内サイト』のうち67.9%でjQueryが使われていたとのことです。考察も含めとても参考になる記事なので、ぜひ読んでみてください。
このデータ+肌感的に、web制作においては『jQueryオワコン』ではないと感じています。
jQuery嫌いなエンジニアが多い印象でしたが、そうでもない？のかもしれませんね。
web開発でのjQuery
web開発の新規プロジェクトでjQueryを使うことは、ほぼないと思います。メリットもないです。今もこれからもReactやVueが採用されるケースが多いでしょう。
現役でフロントエンドエンジニアをやっている方の『jQueryに対する意見』は、下記の動画も参考になります。
『jQueryオワコン』と言っている方の多くはweb開発系の方な気がします。確かに、web開発ではjQueryはオワコンと言われてもおかしくないと思います。
jQueryを使わない？ならどうする？
jQueryを使わないならどうする？
もちろん一概には言えませんが、下記の場合が多いです。
web制作志望の方に、『今はjQueryよりReactを勉強した方が良いですか？』と質問されたことがありますが、web制作でReactを使うことは多くないです。
web制作でjQueryとReactを同列で並べるのは間違いな場合が多く、どちらかというと並べるべきはjQueryと素のJavaScriptです。
web制作志望の初学者の方にとって、ReactやVueの勉強は優先度低めです。やらない方もたくさんいます。
【結論】jQueryはこれから勉強すべき？
jQueryはこれから勉強すべきかに関して、web開発志望とweb制作志望に分けておすすめを紹介します。
あくまでおすすめです。勉強しても損はないので、興味がある方は少しでも触ってみると良いです。
web開発系フロントエンドエンジニア志望の場合
web開発志望の方は、自身の環境でどうしてもjQueryを使わないといけない場合を除いて、jQueryの勉強はしなくて良いと思います。
ReactやVueを頑張った方が良いです。
それに、jQueryの学習コストはあまり高くないので、どうしても必要になってから勉強するでも十分でしょう。
web開発であればjQueryよりReactやVueの方が適していることがほとんどです。
web制作系コーダー・フロントエンドエンジニア志望の場合
web制作志望の方は、jQueryの勉強をしても良いし、しなくても良いです。
前述した通り、web制作では現在もjQueryは使われています。しかし、使うメリットは少なく、使わないとできないこともありません。書きやすさも慣れの問題で、素のJavaScriptでも大差ないと感じます。
web開発系の方同様に、必要になったら勉強するでも良いのでは？と個人的には思っています。
ただし、素のJavaScriptよりjQueryの方がわかりやすいと感じる方は多いはずです。挫折しないためにjQueryを挟むのであれば、賛成です。
jQueryを挟む場合、下記の流れで学習するのがおすすめです。
- HTML・CSSの勉強
- 少しJavaScriptの基礎を勉強
- jQueryの基礎を勉強
- jQueryで色々作ってみる
- 4で作ったものを全て素のJavaScriptで作ってみる
web制作の学習ロードマップは、別記事であげているので、興味がある方はぜひご覧ください。
【2023年版】web制作でプロになるための学習ロードマップ！jQueryを勉強をしたい場合どうやって勉強する？
- 基礎を勉強する
- 色々作ってみる
この流れで勉強すると良いです。
Step1：基礎を勉強する
本来、書籍を使いたいところですが、最近出た書籍がないので、webの学習教材や記事で勉強すると良いです。
Progateとドットインストールで勉強しても良いでしょう。
できれば公式ドキュメントも見る習慣をつけると良いです。英語が苦手な方はDeepLのChrome拡張機能を入れておくと良いです。
Step2：色々作ってみる
jQueryを使ってよくあるwebのUIやアニメーションを作る書籍は、下記が人気です。サイトもあるのでまずは覗いてみましょう。
動くWebデザイン アイディア帳
動くWebデザイン アイディア帳 実践編超実務向け！コーディングの練習が出来るサービス作りました 🎉
模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。
こんな方におすすめ！
- 実務のレベル感を知りたい
- プロの制作フローを学びたい
- 何を考えながらコードを書くのか知りたい
- 基礎学習中、もしくは終えたばかり
- CSS設計やSCSSを使った書き方を学びたい
模写修行ではデザインデータ(FigmaとXD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。
他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。
コーディング教材の【模写修行】は他の教材と何が違うのか？嬉しい声もいただいています！
自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました！
TwitterでDMいただきました！🙇
classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです！解説記事もわかりやすい...！
Tweet
デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet
答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet
この記事を書いた人
Gaku / @gaku92014091
大学・大学院時代から個人で仕事をする。フリーランス歴11年 / 今は法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き！
web制作志望 or web開発志望によっても変わるので、その辺も踏まえて解説します！👍