【初心者向け】JavaScript と jQuery を混同しているあなたのために

JavaScript と jQuery への理解
この記事は、Javascript と jQuery の違いがイマイチよく分からないといった初学者や触り始めて間もない人を対象にしています。

「サイト構成、ページデザインを見ると JavaScript で動きをつける部分は少なく、その箇所も高難易度ではないのでコード量も多くならないと思います。ここは jQuery を使わずに素の JS で書いても良いではないでしょうか。jQuery を読み込まないのでリクエスト数も減りますし。」

困惑の表情を浮かべたものの、意を決した様子で彼は言った。

「どういう意味ですか?」

想定外の返答に私は事態を飲み込めず、「どこのことですか?」と質問に質問を返すという愚行に出た。しかし、その答えは単純で、彼は JavaScript = jQuery だと誤認していたのであった。


先週の土曜日に相談された時の会話を少し脚色しました。で、いろいろ聞いていると、上に登場した彼は JavaScript (以下、長いので JS と記載します。) を実行するには jQuery が読み込まれている必要があると思っていたようです。さらに他の人にも話を聞いていると、jQuery とは何ぞやを理解できていない人や JS の事を「JAVA(ジャバ)」という人もいました。JAVA と言ってしまうと一般的には全く別の言語の事を指してしまうので要注意!!

JavaScript とは

JavaScript は Webページに動きをつけるのに用いる言語で、クリックやタップ時のページ上の挙動の制御やアニメーションの実行、フォームのエラーチェックなどで活躍します。このようなブラウザ上で動くものをクライアントサイドと呼び、Web デザイナーやフロントエンドエンジニアの方が主に扱うのはこの部分です。

さらに、JavaScript はサーバ側でも用いられており、サーバ側で実行するものはサーバサイドと呼びます。その最たる例に Node.js というものがありますが、これについては本記事の主旨から外れるので、興味のある人は Google 先生に聞いてください。

jQuery とは

wikipedia によると以下のように記載されています。

jQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる。
jQuery - wikipedia

やや難解な表現で書かれていますが、要は「JS を少ない記述で書ける」ようにするのが jQuery です。そして、ライブラリという表現も出てきます。

ライブラリって何だ??

これからプログラミングを学ぶ人にとって耳にする機会の多い言葉で、「使用頻度の高い機能や効果などのプログラムを再利用できる形にまとめたもの」を指します。JS で実行できる処理を jQuery でより簡潔に記述できるのは、jQuery が JS を利用しやすい形にまとめたライブラリであるからです。なので、jQuery のコード内部をテキストエディタで見ると膨大なコードが JS で記述されています。

言い換えれば、jQuery でできることは JS だけでも実現できるということです。

ライブラリを使用するメリット

jQuery は利用者が多く導入しやすいことから、事実上の標準(デファクトスタンダード)と言われています。なので、わからないことの大半は検索すれば解決できます。それ以外にもライブラリだからこそのメリットがあります。

効率的に開発できる

先述していることですが、少ない記述で書けることは作業時間の短縮化に直結します。さらに、コードが無駄に長くならないのでメンテナンスもしやすくなります。長いコードは読みにくく修正箇所を特定しにくくモチベーションが下がる原因になりやすいので、初学者はライブラリの恩恵を受けながら習得していくのも良いと思います。

ブラウザのごとの差異を軽減してくれる

Internet Explorer(最近は Edge)、Google Chrome、FireFox などブラウザひとつとっても種類が豊富で仕様もバラバラです。Chromeでは想定通りに動いたけど、FireFoxでは動かなかったということも起こります。ライブラリでは、ブラウザ間の挙動の差異をなくすように設計されているものもあるので作業負担の軽減となります。

デメリットも理解する

総合的に見るとメリットの方が勝っている気がしますが、いくつかデメリットも紹介します。

読み込みによるパフォーマンス低下

jQueryのファイルサイズ

上記は jQuery1.11.3 のファイルサイズを記したもので、ファイル名の最後に「.min」があるのは縮小化(ミニファイ化)されたファイルであることを意味しています。この縮小版は改行やコメントアウト、余白を消した状態になっているため、ファイルサイズが小さくなっています。(下画像参照)

ミニファイ化されたjQuery

この程度のサイズなら過剰に気にする必要もないかもしれませんが、場合によってはページの表示速度低下に影響があるかもしれません。

jQuery 固有の記法を知る

JS の記述を少なくするために jQuery 独自の記法があります。よく使うもので言えば、オブジェクトを指定する$()でしょうか。また、メソッドにはaddClassremoveClassなどがあり、これは JS では使えません。つまり、JS に加え jQuery の記法も学ぶ必要があります。

コードの違いを見てみよう

以下の HTML の div 要素のクラス名を取得してコンソールで表示するコードを例に、JS と jQuery それぞれの記述の違いを見てみましょう。

<!-- 以下の div 要素のクラスを取得したい -->
<div id="test" class="sample sample-test">
 ...
</div>

実行結果として得たいものは、ID名 test の div 要素のクラス名 sample sample-testなので、

// JavaScript で取得する場合(jQuery 未使用)
var target = document.getElementById('test')
console.log(target.getAttribute('class'));

//もしくは以下でもオッケー
console.log(document.getElementById('test').getAttribute('class'));

// jQuery で取得する場合
console.log($('#test').attr('class'));

と記述できます。この処理結果をコンソールでの出力すると

コンソールでの実行結果

このように結果はどちらも同じになりはずです。

簡単なコードの実行にも関わらずコード量が少なくなっている事がわかります。処理が複雑化するとコード量が長くなるので jQuery を用いることは冗長性を回避するのに適していると言えますね。

jQuery は便利だけど、その前に JavaScript をちゃんと理解しよう

JavaScript に慣れるためやできることを理解するために jQuery を使い始めるのは良いことです。また、Wordpress でサイト運用している場合は、そもそも Wordpress に jQuery が同梱されているので使う機会が多いはず。なので、jQuery を使う場合は、セレクタの指定やループ、条件分岐などにおいて高速化する記述方法を合わせて見ておくと良いでしょう。

ですが、どの案件でも jQuery を使う訳ではありません。違うライブラリやライブラリ自体を使わない案件だってあります。実際にやってみるという意味で jQuery を使って学習を進めるのは良いですが、JS を体系的に理解しておくと、どのライブラリを使ったとしても、サーバサイドの JS を触れる機会があったとしても役に立つはずです。

少し書き散らかした感がありますが、JS と jQuery は似て非なるものだよということがわかれば良いなと思います。


ちなみに、勉強するなら以下のサイトを見ておくと良いです。

  • JavaScript | MDN

    初心者向けから上級者向けまでのリファレンスが載っています。ボリューム満点ですが、ここの内容全て網羅できるとスキルは上がっているはずです。私も見ています。

  • Qiitaで「javascript」と検索する

    優秀なプログラマーさんが様々な考察や役立つ情報をまとめてくれています。中には高度で初心者には理解不能はものもありますが、有益なものが多いので該当しそうなものを片っ端から見ていくと良いです。

どうしても本で学びたい人は、読みやすそうなものを「JavaScript」「jQuery」をそれぞれ1冊ずつだけ購入してやり切るのが良いです。私がそうだったのですが、何冊も買ってしまい、どれも中途半端になって身に付かなかったという人は結構多いです。

関連記事