【初心者向け】これだけわかっていればいいJavascriptとjQuery簡単な違いや使い方

投稿日：2020/11/02
JavaScript/jQuery

ちょっとホームページを作り出すとぶちあたるのがこの壁だと思います。

JavascriptとjQueryってどう違うの？　どう使えばいいの？

サイトに動きや変化をもたせたい時、htmlやCSSだけで補えないところを頑張ってくれるのがJavascriptでjQueryです。
この記事は初心者の方を対象に「最低限これだけわかってればいいJavascriptとjQueryのお話」をしようと思います。

jQueryはJavascriptのライブラリの一種である

JavascriptはhtmlやCSSと同じくプログラミング言語の一種です。
特にブラウザ上での動き（目に見える動きだけでなく目に見えない動作部分も含む）を制御するのに使用されます。

Javascriptでは様々なことが行えますが、いかんせん書き方が難しい（とっつきにくい）とされていました。
そこで登場したのがjQueryです。

jQueryはJavascriptのライブラリの一種です。
Javascriptでよく使用される機能などをあらかじめまとめておいて、単純にJavascriptで記述するよりもより簡潔な書き方で利用できるようにしてくれているものです。

よって、jQueryはJavascriptで書かれています。
jQueryがなくてもJavascriptを利用することはできますが、jQueryを利用するとより簡単ですよというのがjQueryの売りとなります。

jQueryのメリット

上にも書きましたが、jQueryを利用するとJavascriptをより簡単に利用できるのがjQueryのメリットとなります。
Javascriptだと数十行にも及ぶコードを、jQueryだと一行で簡潔に記述することができたりします。

利用している人が多いので、解説サイトやプラグインがたくさんあることもメリットの一つです。
jQueryを利用したプラグイン（スライダーやドロワーメニューなど）を開発している人も多く、それらをダウンロードして読み込むだけで利用できたりもします。

ブラウザ間の差異が少ないことも魅力の一つです。
ようやくIEがChromeエンジンになりサポート終了まで秒読みとなりましたが、まだ生き残っているIEは多く、これらに対して個別にコードを記述する必要がないことは開発上の負担を軽減します。

jQueryのデメリット

jQueryのデメリットといえば、なんといっても重いことです。
jQueryを利用するときはまずjQuery本体を読み込んでからjQueryを利用した処理を書いていきますが、このjQuery本体が重いのです。

jQuery自体様々なバージョンがありますし、プラグインとバージョンの相性もあります。
使用したいプラグインがこのバージョンでは利用できない、などのことも実際あります。

GoogleなどではjQueryのCDNが用意されており、jQuery本体をダウンロードしてきて自サーバーにアップロードしなくても、Googleで公開されているjQuery本体を読み込めますし、他サイトでも同じCDNを利用されていた時など、既にキャッシュされていれば読み込み時間を短縮できる可能性があります。
関連記事：jQueryなどサイト制作によく使うCDNまとめ

jQuery以外のJavascriptライブラリやフレームワーク

jQueryは確かに便利なのですが、万能というわけではありません。
jQueryでJavascript数十行分のコードを数行にまとめることができるのは確かですが、逆に、jQueryで実現しようとすると数十行のコードとなってしまう処理も存在します。

よって、最近ではjQuery以外のJavascriptライブラリやフレームワークが注目されるようになりました。

上記３つあたりが有名所です。
機会があれば調べてみてはいかがでしょうか。

jQueryの使い方

jQueryを利用するには、まずは本体の読み込みが必要です。
jQueryプラグインを利用するにもjQuery本体の読み込みは必須です。

jQuery本体を読み込む

jQuery本体を読み込む方法はいくつかあります。

jQuery公式サイトから利用したいバージョンのjQueryをダウンロードし、<head>～</head>などに読み込み用のタグを記載して読み込む。
```
<script src="/js/jquery.min.js"></script>
```
jQueryのCDNから利用したいバージョンのjQuery用タグをコピーして<head>～</head>などにペーストして読み込む。
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
```

jQueryを利用した処理を自分で書く

jQuery本体を読み込めばjQueryを利用する準備は完了です。
jQueryの関数を利用するなど様式に従って、加えたい処理を記述します。

例えば、bodyタグのクラスを取得したい場合、

$(function () {
    alert($('body').attr('class'));
});

のようになります。

jQueryプラグインを利用する

世の中には様々なjQueryプラグインがあります。
こちらのサイトで紹介しているものだと、

などです。
これらのプラグインは、jQuery本体を読み込む他、jQueryプラグインも読み込んだ上で使用します。
jQueryプラグインで利用できる関数やオプション設定を用意してくれているので、それらを利用して自分のサイトにあわせて記述を変更します。

jQueryプラグインの利用方法は、プラグインの公式サイトの他、解説記事をUPしてくれている有志の方がいると思うのでそちらを参考にしてください。

jQueryプラグインを読み込んだのに使えない場合

jQueryプラグインには、jQueryのバージョンを限定しているものがあります。
また、jQueryプラグイン同士の相性があり、

jQueryプラグイン同士が共存できない場合
jQueryプラグインの読み込み順を変えれば使用できる場合

があります。

もしプラグインが使えないことがあれば、

公式で推奨されているjQuery本体のバージョンを確認する
jQueryプラグインを１つのみ生かした状態で利用してみる
jQueryプラグインの読み込み順を変えてみる

などを試してみましょう。

まとめ

2020年現在、世間では脱jQuery（jQueryを使わずJavascriptのみで構成されている）が進んでいます。
有名なCSSライブラリであるBootstrapが脱jQueryを行うなど、jQueryは必ずしも利用しなければならないものではなくなってきています。

けれど、構文のわかりやすさなど、jQueryならではのメリットがあることも事実です。
jQueryは必ずしも万能ではありませんが、気軽にリッチなサイトを作れるライブラリとしてこれからも活躍していくことでしょう。
jQueryを扱う上での基本的な知識を身に着けて、ぜひ開発を進めてみてください。