どう使う？HTMLコーディングの為のjQuery学習｜JavaScriptとの違い

pc HTMLコーダー
jQueryを学習した方がいいってよく聞くんだけど、どういうものなんだろう？何ができてどうやって使えばいいんだ？
そのような疑問を持つ方向けの記事です。

この記事の内容は

jQueryとは、JavaScriptとの違いは？

HTMLやCSSを学んでいると次はJavaScriptとjQueryを学んだ方がいいという情報にたどりつきますよね。実はこの二つはどちらも同じJavaScriptで書かれたものです。

素のJavaScriptはもちろんそのままの名称、JavaSciptを用いてよくある処理をライブラリ化して簡単に呼び出せるようにしたものをjQueryと呼びます。

例えばファイルのアップローダーや音楽のプレイヤー、デザイン関連でスライダーを実装できたりと出来ることは多岐にわたります。

ライブラリは本当に様々なものがあり、使用したいものドンピシャのものがあればそれを使ってもいいです。しかし大抵はカスタマイズが必要になります。

どうやって使う？

大抵は使用したいライブラリのページをいきファイル一覧をダウンロードしてきて設置します。使用方法については記載されてるのでそれに沿って設置することになるでしょう。

英語で書かれていることも多いですが、中学英語がわかればなんとかなることが多いですし、翻訳を使えばほぼわからないことはないでしょう。

しかし難しいのは設置してからです。大抵はここの動きがもっとこうだったらとか、見た目はもっとこうしたいといったカスタマイズが必要になるからです。

その為、じつは私はjQueryで出来上がったライブラリを使うということはあまりないです。

実用例

ではどんな時に実用するか？ということですが、これは例をまじえて紹介していきます。例えば簡単な例でボタンが押されたらアラートを表示するとします。

javascriptをインラインで書いてしまう素の例がこちら。

HTML

<input type="button" value="テスト" onclick="alert('test')">

こちらは1行の簡単な例なのでインラインで書けてしまいましたが、HTMLの中に余計なJavaScriptのコードが混じることはあまりよろしくない形です。

次に例えば値aとbを足した合計値sumをアラート表示する例を見てみましょう。

HTML

<input type="button" value="テスト" onclick="testAlert()">

JavaScript

function testAlert() {
    const a = 10;
    const b = 20;
    let sum = a + b;
    alert(sum);
}

このコードをjQueryで書くと以下のようになります。

HTML

※headタグ内でダウンロードしたjQueryを読み込み
<script src="js/jquery-3.4.1.min.js"></script>

<input type="button" value="テスト" id="btnTest">

JavaScript

$('#btnTest').click(function() {
    const a = 10;
    const b = 20;
    let sum = a + b;
    alert(sum);
})

要素がクリックされた場合に要素に直接「onclick」を指定していましたが、要素には「id」のみを指定するように変更しました。

次にそのidの要素がクリックされた場合のイベントとして関数を定義しその中の処理が行われるといった具合です。

ほとんどJavaScriptと変わりないじゃないか？

実はそうなんですが、世の中にはjQueryによるサンプルやライブラリが多いので、ここを理解しておかないとカスタマイズの時に困ってしまうことがあるでしょう。

jQueryのインストール方法

先ほどの例では唐突に「※headタグ内でダウンロードしたjQueryを読み込み」と記載しました。

具体的には以下のページよりまず基本のjQueryファイルをダウンロードします。
https://jquery.com/download/

そのファイルをローカル内に設置して、headタグ内から以下のように読み込みます（例ではjsフォルダに設置）

HTML

<head>
    <title>test page</title>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>

jQueryはインストールして利用するようなものではなく、JavaScriptのライブラリなので設置して読み込めば使えます。

これは例えばファイルアップローダーや音楽プレイヤーやスライダーといった他のjQueryライブラリでも同様の流れです。

jQuery不要説

vue.jsやreact.jsといった新たなライブラリの登場により、jQueryは不要だという脱jQueryを行う流れも一部にはあります。

実は先ほどの「$(‘#btnTest’).click」もJavaScriptのみで以下のように書くことが可能です。

JavaScript

const btnTest = document.getElementById('btnTest');
btnTest.addEventListener('click', function() {
    const a = 10;
    const b = 20;
    let sum = a + b;
    alert(sum);
});

確かにjQueryを利用した場合と比べると1行増えるのですが、jQueryのライブラリをheadタグ内で読まなくても済むようになりますので一長一短ですね。

これは簡単な例なので1行しか違いませんが、jQuery方式でいくほうが便利な場合もまだまだたくさんあります。

その為、jQueryについてもこのように基礎部分は理解して使えるようにしておいた方が良いですというお話でした。

HTMLコーディングの際の使用例

HTMLコーディングを行う際にjQueryの利用を検討するのは以下のようなものを実装する時だと思います。

  • スライダー
  • カルーセル
  • モーダル
  • アコーディオン
  • ハンバーガーメニュー

これらの実装方法を調べた時に、参考にしたページがjQueryを利用していればjQueryの利用をする必要があるでしょう。

jQueryなどのライブラリは使わない実装方法を紹介しているページも多いので、jQueryを使わないパターンも調べて比較して採用を検討するといいです。

こちらの記事で紹介したjQueryの基礎だけ理解しておけば、その判断もできるのではないかと思います。

HTML5の使用も検討

私の昔の例ですが、音楽プレイヤーを作るという仕事がありました。当時は音楽プレイヤーのjQueryのライブラリを使いましたが、これをカスタマイズするのは骨が折れました。

一部分変更するだけでも中身の理解から他への影響など色々なことを気にしなければいけなかったからです。

今はHTML5のaudioタグで簡単に音楽が再生できるので、簡単なプレイヤー程度ならサクッと自作できてしまいます。

HTML5で出来ることも時間があれば調べておくと今後のWeb制作に役立つでしょう。