jQueryとJavaScriptの違いから学習・操作方法を解説

Web制作においてDOM操作は必須のスキルです。DOM操作を行うにはjQueryかJavaScriptを使います。どちらでもWebページに動きをつけることはできます。では、jQueryとJavaScriptの何が違うのでしょうか。

本記事ではjQueryとJavaScriptの違い、どちらから始めるべきか、勉強方法を解説しています。DOM操作をこれから勉強しようとしている人はぜひ読んでください。

JavaScriptとjQueryの違い

では早速、JavaScriptとjQueryについて説明していきたいと思います。

JavaScriptとはブラウザ上で複雑な機能をできるようにするオブジェクト指向スクリプト言語。つまり、Webサイトを「動かす」ためにあるプログラミング言語の一つです。

jQueryは、JavaScriptを短く簡単に記述できるライブラリ（多くの人が作成する事になる汎用的に使うプログラムだけ取り出してまとめた物）の一つです。
JavaScriptが「プログラミング言語」ではあるのに対して、jQueryは「ライブラリ」であることが２つの大きな違いです。

ちなみに、JavaScriptのライブラリはjQueryの他にも、React、Vue.js、Angularなどがあります。

JavaScriptはプログラミング言語

JavaScriptはブラウザを操作するためのプログラミング言語です。ブラウザの操作とはWebページ上のテキストや画像を変えたり、クリックしたら文字を表示、非表示にしたりすることです。

ブラウザとはChromeやSafari、EdgeなどのWebページを表示するソフトウェアを指します。そして、WebページはHTML、CSSで書かれています。HTML、CSSは一度ブラウザに読み込まれたら変化しません。

JavaScriptを使えばHTMLやCSSを書き換えることができます。

JavaScriptのメリット

以上の話を聞くとJavaScriptは必要ないかと思われるかもしれませんが、しっかりと理解したいならJavaScriptも勉強するといいでしょう。
jQueryの作業をしていて思い通りに動作しないとき、JavaScriptの知識が必要になることがあります。

またアプリやゲーム開発、フロントエンドエンジニアのようなWebサイト開発をする現場では、JavaScriptがよく使われます。
動作スピードの面で、JavaScriptはjQueryよりも早いので、大量のデータを処理する機能の実装や、大規模なWebサービス開発をするのであれば、JavaScriptを勉強するといいでしょう。

jQueryはJavaScriptを簡単に書くためのライブラリ

なぜライブラリが必要か

ライブラリは汎用的なコードをまとめたものです。特にjQueryはJavaScriptのコードを短くできるため、頻繁に使用されます。コードが短くなるため、開発速度が上がる、プログラムファイルが軽くなるなどのメリットがあります。

ただし、jQueryのコードは単独で動作せず、JavaScriptのコード内でjQueryを読み込むことで動作します。必ず使用時にはjQueryを読み込むようにしましょう。jQueryの使い方は下記の記事に書いていますので、ぜひ参考にして下さい。

jQueryはプラグインが豊富に存在する

プラグインとはソフトウェアの拡張機能です。jQueryはプラグインが豊富にあり、簡単なコードで様々な動作が可能です。アイコンを押すとメニューがスライドして出てくる（ドロワーメニュー）、画像が左右にスライドする（スライダー）などが短いコードで実装できます。

よく使われるプラグインを下にまとめました。

• slick：スライダー
• Drawer：ドロワーメニュー
• Lightbox2:ポップアップウィンドウの表示
• jQuery Validation Plugin:フォームの入力チェック

jQueryはクロスブラウザ対応

jQueryはクロスブラウザに対応しているライブラリのため、どんなブラウザでも同じ動きをします。JavaScriptはブラウザの種類によって動きが若干変わってくることがあります。

例えば、document.getElementsByClassNameというJavaScriptのメソッドはインターネットエクスプローラーの一部バージョンでは使用できず、レイアウト崩れが起こる可能性があります。

どんなブラウザでも同じ動きということはユーザーの使用するブラウザに縛られません。あなたが開発したときと同じ動きがユーザーにも見えるため、動きの違いによる認識の差がなくなります。ユーザー目線の開発をする上でクロスブラウザ対応になっているjQueryは必須です。

jQueryのメリット

少し煩雑なJavaScriptを、少ない記述で多くの表現できるのがjQueryの大きな魅力です。
初心者でもコーディングしやすく、複数人でメンテナンス業務をする際にも、簡素な記述であるjQueryの利便性が光ってきます。
Webデザインを始めるならば、まずは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の両方が学べる本を下に紹介しますので、参考にしてみてください。

確かな力が身につくJavaScript「超」入門

プログラミング教室

時間とお金に余裕があるならばプログラミング教室をおすすめします。プログラミング教室のメリットはわからなければ講師に質問ができることです。プログラミングの勉強ではエラーの連続です。

プログラミング教室であれば、講師がすぐに教えてくれます。独学だとググって解決方法を見つけていく必要があるため、時間がかかります。しかし、自分で調べる力が無くなってしまうというデメリットもあります。

jQueryとJavaScriptでサイトに「動き」を取り入れる方法

Webサイトを作る際、HTMLとCSSを利用するのが基本になります。HTMLでテキストを入力し、CSSで色や大きさ変更などの装飾を加えます。しかしHTMLとCSSだけで作成されたWebページは、ローディング後にアニメーションを動かしたりナビゲーションの表示・非表示を切り替えたりなど、ブラウザ上での動きを加えることはできません。

ブラウザ上で動きを加えることができるのが、JavaScriptやjQueryです。今回は、動きのあるサイトの効果や、JavaScriptとjQueryの基本的な使い方などについて解説していきます。

Webサイトでの「動き」の役割

まずは、「動き」を加えることによってどんな効果が与えられるのかについて解説していきます。
Webサイトにおける動きの役割は、大きく分けて以下の２つになります。

• ユーザーの操作に連動した動きで、より分かりやすく、より注目させる
• サイトの世界観をユーザーに伝える

一つ目の「ユーザーの操作に連動した動きで、より分かりやすく、より注目させる」とは、お問い合わせフォームの未入力項目を知らせる注意喚起や、ページを移動する時に現れるローディング画面など、ユーザーの気を引き止めて体験を深める役割を果たします。
ユーザーによる操作に対してフィードバックを返すような動きを、近年では「マイクロインタラクション」といい、ユーザビリティの観点から重要視されています。

二つ目の「サイトの世界観をユーザーに伝える」とは、例えばウィンタースポーツのサイトであれば雪を降らせたり、子供向けのサイトであればイラストを動かして楽しい印象を与えたりなど、動きでサイト全体のイメージを印象を付けます。

「動き」が発生するタイミング

Webサイトで「動き」が発生するタイミングには、一定のパターンがあります。「マウス動かしたら、画像が移動する」などのように「◯◯をしたら、××する」という動かすきっかけが必要になります。
ここではサイト閲覧の流れに沿って、どのようなタイミングで動きが発生するか挙げていきます。

• 画面の読み込み時に動く（例：ローディングアニメーション）
• 画面が読み込まれた後に動く（例：スライドショーや見出しなど）
• 画面がスクロールされたら動く（例：エリアや掲載内容など）
• 要素やクラス・ID名をクリックしたら動く（例：ページトップへ戻るリンクなど）
• 要素やクラス・ID名にマウスが乗ったり外れたりしたら動く（：リンクボタンの形や色の変化など）
• 要素やクラス・ID名がタッチされたり外れたりしたら動く
• マウスが移動したら動く（例：マウスに追従するポインタなど）
• 画面がリサイズされたら動く（例：レスポンシブ対応の場合、モバイルのみのアコーディオンが動くなど）

jQueryによる「動くきっかけ」の記述方法

画像の読み込み時に動く

$(function () {
  //画像の読み込み時に動かしたいソースコードを記述する
});

画面がスクロールされたら動く

$(window).on('scroll', function () {
  //画面がスクロールされ後に動かしたいソースコードを記述する
});

要素やクラス・ID名にマウスが乗ったり外れたりしたら動く

$('クラス・ID名').on('mouseenter', function () {
  //マウスが乗ったら動かしたいソースコードを記述する
});

$('クラス・ID名').on('mouseleave', function () {
  //マウスが外れたら動かしたいソースコードを記述する
});

まとめ

jQueryとJavaScriptの違いから使い分けを解説しました。

また、jQueryとJavaScriptの違いや、動きのタイミングなどについて解説してきました。

jQueryはDOM操作のコードを簡単に書くためのJavaScriptです。しかし、jQueryはJavaScriptを分かっていなければ書けないわけではありません。むしろ、JavaScriptより前に勉強することをおすすめします。

Web制作をする上で、jQueryは不可欠になります。jQueryでWebページを動せればアイデアの幅が広がるので、JavaScriptや他の言語を使うときでも様々な機能をつけれるはずです。jQueryを理解したら、JavaScriptでもっと高度なWeb制作をしましょう。