コーダーを目指す方にとってはこの辺りの疑問は一度は持ったことがあるのではないでしょうか？
今コーディングを勉強中の方であれば、まずはじめにJavaScript？jQuery？何それ？ってなりますよね。

プログラミング初心者の方だと難しい分野だと思いますし、どの程度勉強すれば良いかわからない方もいらっしゃるのではないでしょうか。
本記事では、コーダーとして活動していく上でどちらを勉強すれば良いのか、どれくらいのスキルを要するかなどまとめました。

早速ですが、先に結論を書いておきます。

このような感じです。
ではまずはそもそもJavaScriptとjQueryとは何か、その違いから簡単に見ていきたいと思います。

JavaScriptとjQueryの違い

JavaScriptは、WebサイトやWebアプリケーション等で使用されるプログラミング言語です。

一方、jQueryとはJavaScriptから派生されたものであり、Webサイトでよく使用される多機能なプログラムが集められたライブラリとなります。

なぜjQueryが使われるのか

Webサイト制作の現場では、jQueryを使用することが多いです。

このようにjQueryはJavaScriptに比べて、初心者でも学習コストが低く、少ないコードで簡単にWebサイトに動きをつけられるため、Webサイト制作の現場でよく使われているわけです。

脱jQueryという主張もある

前項を読むとjQueryの良さについてなんとなく知っていただけたかと思いますが、
世間では「脱jQuery」「jQueryはオワコン」なんていうことが言われていたりします。

私がいる現場ではまだまだjQueryは活躍していますが、今ではVue.jsやReact.jsなどのJavaScriptフレームワークを使うのがモダンになってきているのも事実です。

また前項で述べたように、jQueryはJavaScriptの派生なので、
結局はjQueryはJavaScriptに書き換えていくことが可能です。

jQueryが初めてリリースされたのが2006年で、当時は非常に便利なライブラリということで広まっていったということですが、
当時から考えると今ではJavaScriptもCSSも大きく進化し、新しい技術も出てきたりとjQueryを使わなくても良い場面も多くなってきたのだと思います。

コーダーであればjQueryが書ければOK

色々と書いてきましたが、結論コーダーであればjQueryが出来ていれば現場でも働けると思います。
なぜなら繰り返しになりますが、Webサイト制作の現場ではまだまだjQueryシェア率が多いからです。

ですが、「コードのコピペ」だけでjQueryが出来た気分にならないよう注意しましょう。
Webサイトでよく使われるアニメーション実装のjQueryコードは、検索すると沢山落ちている分、コピペで完結してしまうケースが多いと思います。

プログラミング初心者の方・まだ駆け出しコーダーの方であれば、最初はコピペで始まっても良いですが、
ある程度慣れてきたら、必ず一つ一つのコードの意味を理解して、自分の中で落とし込むようにしていきましょう。

スキルアップを目指すならJavaScriptも勉強しよう

コーダーであればjQueryを勉強すればOK、と言いましたが、できるのであれば次の段階でJavaScriptを勉強していった方が良いでしょう。

コーダーとは別に、「フロントエンドエンジニア」という職種があります。
フロントエンドエンジニアは、コーダーが持つスキルに加え、
JavaScriptそのものや、Vue.js・React.jsといったJavaScriptフレームワークを扱えるような、より高度なプログラミングスキルを持ち合わせたエンジニアです。

このようにJavaScriptができるようになると、コーダーのさらに上の「フロントエンドエンジニア」を目指せるようになるので、スキルアップをしたい方はJavaScriptを勉強していくと良いと思います。

その際まずは今までjQueryで書いていたコードをJavaScriptで書き換えてみたり、
最初からjQueryを使わずに生のJavaScriptで書いてみたりすると良いかもしれません！

あとは後述しますが、良いJavaScript参考サイト（書籍もあり）があるので基礎固めとして読んでみることをおすすめします。

具体的に必要なjQueryスキル

これはWebサイトに求められる動きや、現場によって頻繁に使用する機能が違ってきそうなので一概には言えませんが、
私自身の2年程の経験に基づいて、これは抑えておいた方が良いと思ったポイントをまとめましたので、参考にしてみてください。

まずは結論から。

一つずつ詳しく見ていきます。

プラグインを入れてカスタマイズできる

例えばですがよく使う代表的なプラグインとして、slick.js（カルーセルが簡単につくれるもの）があるかと思いますが、
こういったプラグインをWebサイトに組み込むと、大体そのままでは自分が欲しい状態にはなっていないので、カスタマイズする必要が出てきます。

そういったときに自分で調べたり、コードを読んでいきながら改変していけるかが大事になってきます。

コピペして終わり！公式ドキュメントに沿ってプラグインを入れて終わり！ではなく、練習として色々カスタマイズしたりしてみると良いです。

ループを理解できる

ループ処理は非常によく使います。
簡単ですがこんなサンプルを作ってみました。

ボタンを押すとリストすべての文字が赤色になるというものです。
このときのように、複数の要素（今回だとliタグ４つ）に対し、何かしらの処理を行ないたいときなどにループを使います。

jQueryではeachメソッドがループ処理にあたるので、是非使えるようになりましょう。

クラスの付け外し

クラスの付け外しは動的アニメーションを加えたい時の定番手法です。

これはボタンをクリックすると、.panel要素にis-openというクラスが付与され、アニメーションが行われるというものです。

これくらいの内容であれば、jQueryの他のメソッドを使っても同じように実装できますが、クラス付与もよくある手段なので、是非使えるようになってください。

イベント処理

イベント処理ですが、例えば下記のようなものがあります。

他にもイベントは沢山あるので、詳しく知りたい方はこちらのサイトを見てみてください。

このように何かユーザーがWebサイト上で操作を行なったときには特定の処理を行うことができます。

実は、前2項ではボタンに対して「クリックイベント」を使っていました。
イベントも非常に良く使うので、どんなイベントがあるのかや構文についても調べたりして知っておくと良いと思います。

アニメーション実装

jQueryには非常に便利なアニメーションに関するメソッドがいくつも用意されています。

• fadeIn()：opacityを増やして要素を表示させる
• fadeOut()：opacityを減らして要素を非表示にする
• fadeToggle()：要素が表示されている時はfadeOutさせ、非表示の時はfadeInさせる
• slideUp()：要素の高さを操作してスライドアップさせる
• slideDown()：要素の高さを操作してスライドダウンさせる
• slideToggle()：要素が表示されているときはslideUpし、非表示の時はslideDownする

先の「クラスの付け外し」のときは、CSSでアニメーション処理を記述していましたが、こういったメソッドを使えば、CSSを記述することなくアニメーションを施してくれます。
個人的にjQueryを使うメリットはこういったアニメーションメソッドが豊富に使えることではないかと思っています。

本当にコーディングが楽になるので是非使ってみてください！

おすすめ勉強法

ここまで少し具体的な紹介も交えながら、jQueryとJavaScriptについてお話ししてきました。

といった方向けにおすすめの勉強法について紹介したいと思います。

一番は実務や現場で適宜調べながら、かつ手を動かしながら実装していくことが一番の勉強になりそうですが、
そういうと元も子もないのでおすすめの書籍やサイトなどを紹介させていただきます。

jQuery

まずはjQueryからです。

Progate

Progateは無料から始められるオンライン学習サイトです。

jQueryのコースがありましたのでやったことがない方はチャレンジしてみてください。
全4回に分かれたレッスンです。
⇒jQueryのレッスンはこちら

書籍

初心者の方でも理解しやすいように丁寧に書かれている書籍です。
途中で挫折することなく、最後まで学習できるように設計されていますので、
これから勉強を始めたい方、もしくは勉強はしているけど基礎が不安な方におすすめと言えそうです。

めちゃくちゃ使えるサイト

動くWebデザインアイディア帳というサイトです。

こちらは実際に見ていただければわかると思うのですが、
よくWebサイトで使われるアニメーション機能ごとにコードとその解説をしてくれているものになります。
種類も豊富なので、大体のアニメーションは網羅されているんじゃないかなと思います。

デザインも可愛らしく、サイトも見やすいのでjQueryが右も左も分からない頃、大変参考にさせてもらったサイトです。

JavaScript

Progate

jQueryと同じように、Progateには、JavaScript講座もありますのでそちらをチェックしてみると良いと思います。

全7回に分かれたレッスンです。
⇒JavaScriptのレッスンはこちら

書籍

とても有名な書籍に「JavaScript Primer」というものがあります。
書籍でも発売されていますし、Webサイトでも無料で読むことができます。

JavaScript PrimerはこれからJavaScriptを勉強したい方向けのものとなっており、いわゆる入門書といえます。

ボリュームはありますが、一つ一つ体系立てて解説されており非常にわかりやすいです。
初めての方は、JavaScriptは少し複雑で難しく感じるかもしれませんが、
基礎固めに非常に良い書籍となっていますので、一度目を通しておくと良いと思います。

私も何かわからないことがあれば、JavaScript Primerを見て勉強しています。
辞書的な感じですぐに調べたり、何度も読み返して理解を深めていっているので、これからも長くお世話になる本だと思います。

⇒Webサイトはこちら

ただJavaScript Primerは、ボリュームが多く難しいと感じる方も多いかもしれません。
下記書籍は中身のデザインも見やすく、かなりわかりやすく体系的にまとめられているので、こちらもおすすめです◎

最後に

JavaScript・jQueryについてそれぞれ違いから解説し、おすすめの勉強方法やjQueryについては具体的に必要なレベル感までまとめてみました。

「脱jQuery」といった言葉から、jQueryが徐々に影を潜めつつあるように思えますが、実際の現場では今後もまだまだ使用されていくと思います。

初心者の方が最初からJavaScriptを勉強すると挫折してしまう方が多いと思うので、プログラミングというものに慣れていくためにも、まずはjQueryから勉強し始めると良いと思います。

jQueryができるようになると動きがあるWebサイトを作れるようになってとっても楽しいと思います。
JavaScriptができるようになると、またその更に上のステップにいけてWebアプリケーション・Webシステムなども作れるようになるので色んな可能性も広がりますね。

この記事が参考になれば幸いです。
最後までお読みいただきありがとうございました。