Web制作においてDOM操作は必須のスキルです。DOM操作を行うにはjQueryかJavaScriptを使います。どちらでもWebページに動きをつけることはできます。では、jQueryとJavaScriptの何が違うのでしょうか。
本記事ではjQueryとJavaScriptの違い、どちらから始めるべきか、勉強方法を解説しています。DOM操作をこれから勉強しようとしている人はぜひ読んでください。
JavaScriptはプログラミング言語
JavaScriptはブラウザを操作するためのプログラミング言語です。ブラウザの操作とはWebページ上のテキストや画像を変えたり、クリックしたら文字を表示、非表示にしたりすることです。
ブラウザとはChromeやFafari、EdgeなどのWebページを表示するものを指します。そして、WebページはHTML、CSSで書かれています。HTML、CSSは一度ブラウザに読み込まれたら変化しません。
JavaScriptを使えばHTMLやCSSを書き換えることができます。
jQueryはJavaScriptのコードを簡単に書くためのライブラリ
なぜライブラリが必要か
ライブラリは汎用的なコードをまとめたものです。特にjQueryはJavaScriptのコードを短くできるため、頻繁に使用されます。コードが短くなるため、開発速度が上がる、プログラムファイルが軽くなるなどのメリットがあります。
ただし、jQueryのコードは単独で動作せず、JavaScriptのコード内でjQueryを読み込むことで動作します。必ず使用時にはjQueryを読み込むようにしましょう。jQueryの使い方は下記の記事に書いていますので、ぜひ参考にして下さい。
誰でも簡単に始められる！jQueryの使い方を解説【コード例】
jQueryはプラグインが豊富に存在する
プラグインとはソフトウェアの拡張機能です。jQueryはプラグインが豊富にあり、簡単なコードで様々な動作が可能です。アイコンを押すとメニューがスライドして出てくる（ドロワーメニュー）、画像が左右にスライドする（スライダー）などが短いコードで実装できます。
よく使われるプラグインを下にまとめました。
・slick：スライダー
・Drawer：ドロワーメニュー
・Lightbox2:ポップアップウィンドウの表示
・jQuery Validation Plugin:フォームの入力チェック
jQueryはクロスブラウザ対応
jQueryはクロスブラウザに対応しているライブラリのため、どんなブラウザでも同じ動きをします。JavaScriptはブラウザの種類によって動きが若干変わってくることがあります。例えば、document.getElementsByClassNameというJavaScriptのメソッドはインターネットエクスプローラーの一部バージョンでは使用できず、レイアウト崩れが起こる可能性があります。
どんなブラウザでも同じ動きということはユーザーの使用するブラウザに縛られません。あなたが開発したときと同じ動きがユーザーにも見えるため、動きの違いによる認識の差がなくなります。ユーザー目線の開発をする上でクロスブラウザ対応になっているjQueryは必須です。
jQueryとJavaScriptどちらから始めるべき
ゲームや複雑なWebアプリを作らない限りはjQueryから勉強することをおすすめします。DOM操作を単純でわかりやすいコードで書けるため、Web制作に真っ先に活きてきます。
JavaScriptを先に始めると、DOM操作に行くまでに、計算、変数、ループ処理、条件分岐などDOM操作に関係ないところに時間が取られます。その過程で挫折ポイントも多いので、Web制作に必要な知識であるDOM操作をjQueryでやることをおすすめします。
しかし、JavaScriptの勉強をしなくてもいいわけではありません。jQueryを勉強し終えたら、JavaScriptもやることをおすすめします。
jQueryとJavaScriptを学ぶ方法
独学
独学で勉強するならば、Progateがおすすめです。jQueryとJavaScriptの両方を月額1080円で学べます。jQueryについてはProgateでも実践的な知識が得られます。
ただし、JavaScriptの講座ではDOM操作はあまり学べません。JavaScriptの基礎を網羅的に学ぶために利用して、入門本を買うことをおすすめします。
入門本ではJavaScriptの復習だけではなく、Progateでは説明されていないような技術についても解説されています。
JavaScriptとjQueryの両方が学べる本を下に紹介しますので、参考にしてみてください。
プログラミング教室
時間とお金に余裕があるならばプログラミング教室をおすすめします。プログラミング教室のメリットはわからなければ講師に質問ができることです。プログラミングの勉強ではエラーの連続です。
プログラミング教室であれば、講師がすぐに教えてくれます。独学だとググって解決方法を見つけていく必要があるため、時間がかかります。しかし、自分で調べる力が無くなってしまうというデメリットもあります。
まとめ
jQueryとJavaScriptの違いから使い分けを解説しました。jQueryはDOM操作のコードを簡単に書くためのJavaScriptです。しかし、jQueryはJavaScriptを分かっていなければ書けないわけではありません。むしろ、JavaScriptより前に勉強することをおすすめします。
Web制作をする上で、jQueryは不可欠になります。jQueryでWebページを動せればアイデアの幅が広がるので、JavaScriptや他の言語を使うときでも様々な機能をつけれるはずです。jQueryを理解したら、JavaScriptでもっと高度なWeb制作をしましょう。
