JavaScript
アコーディオンメニュー
スライドショー
ハンバーガーメニュー

【初心者向け】jQueryとはどのようなものかを解説【導入例あり】

2021/09/24

( 更新日：2022/05/17 )

様々なWebページを見ていると画像が一定時間で切り替わる、アイコンをクリックするとメニューがでてくるなどの動きのある機能を見たことがあると思います。これらはHTML/CSSだけでは実現できない機能です。

このようなページを作るにはjQueryが使えなければいけません。

本記事ではWebページに動きのある機能をつけるためのツールであるjQueryについて解説します。jQueryが使えれば、Web制作の幅が広がります。ユーザーに見やすいページのために、jQueryの習得はおすすめです。

jQueryとは

jQueryはJavaScriptのライブラリです。jQueryを使用するとJavaScriptの機能をシンプルにすることができます。コード自体もjQueryの方が見やすく、概念として理解しやすいです。JavaScriptのコードが複雑で理解できなかった人はjQueryから入るのもおすすめです。

コードがシンプルで簡単なため、jQueryによってフロントエンドの開発が早くなりました。また、Web制作初心者にも分かりやすいため、動的な機能を持ったWebページが増えています。

個人でもWebページをもつことが簡単になっている現在ではjQueryの需要はまだまだあると思います。

jQueryでできること

DOM操作が簡単にできる

jQueryはDOM操作をシンプルで簡単することができます。JavaScriptで10行以上必要なコードもjQueryを使えばたった2～3行で書くこともできます。DOM操作とはHTMLやCSSを操作して、要素を見た目を変えたり、表示状態を変えたりすることです。

jQueryはHTML/CSSの操作に関するコードが多く含まれているため、初心者でも簡単に高機能なWebページを作れます。例えば、スライドショーやクリックしてコンテンツの表示非表示を繰り返すなどの機能です。

Ajaxが簡単にできる

jQueryを使えばAjax(サーバ非同期通信）が簡単に実装できます。AjaxとはJavaScriptを使って非同期通信を行って、Webページの一部を書き換える機能です。非同期通信にすることでレスポンスを待つ間に他の処理ができます。よって、ユーザーがレスポンスが車でただ待っているだけという時間をなくすことができます。

JavaScriptでコードを書くとコードをかなり記述しなければいけませんが、jQueryであれば数行で実装することができます。

ただし、jQueryを使うとシンプルが故に何をしているか分からなくなります。そのため、一度はJavaScriptでコードを書いてみてコードを理解することをおすすめします。理解した上で効率化の為にjQueryを使うことがよいと思います。

Ajaxについては別の記事でも解説しているので参考にしてください。

https://wp-load.in/javascript/ajax-jquery

jQueryを使うメリット

コードを短くできる

jQueryの最大のメリットはコードを短くできることです。コードを短くすれば、ファイルも軽くなり、サーバーへの負荷を減らすことができます。また、コードの量も少なくなり、開発効率も上がります。

ただし、巨大なWebサイトを作る際にはjQueryを使うと、処理が遅くなることが遅くなるので気を付けてください。

ほぼ全てのブラウザで使える

jQueryを使うメリットはほぼ全てのブラウザで使うことができる点です。他のライブラリであればブラウザが変わると上手く動かないことがあります。しかし、jQueryはGoogle Chrome、Microsoft edge、firefoxなどどのブラウザでも同じように動きます。

ユーザーの使うブラウザは決まっていません。そのため、特定のブラウザでしか動作しないとなるとユーザーにとって見にくいサイトになる可能性があります。すると、機会損失になり、良質なWebサービスであっても見向きされなくなります。

あなたのコンテンツを活かすためにも全てのブラウザで正常に動くjQueryはおすすめです。

jQueryを使うデメリット

処理が遅くなる

jQueryはライブラリの読み込みが必要です。そのため、短い処理であればJavaScriptの処理よりもjQueryの処理の方が遅くなることがあります。jQueryを使うのは、中規模のサイトで使うことがおすすめです。

フレームワークが使えないこともある

JavaScriptは様々なVue.jsやReactといったフレームワークがあります。フレームワークではjQueryが使えないことがあります。処理がフレームワークと競合するため、処理によってはエラーが生じる可能性があります。

最近のWeb開発ではフレームワークを採用すること多くなっています。フレームワークを使う案件ではjQueryが作動するかを確認して、利用してください。

jQueryの導入方法

jQueryを導入する方法は大きく分けて以下の二つがあります。

・jQueryのファイルをダウンロードして、ファイルを読み込む。

・CDNを利用する

ファイルをダウンロードする場合は、jQueryの公式サイトのダウンロードページからファイルをダウンロードします。そして、HTML内のheadタグ内またはbodyの閉じタグの前で読み込みます。読み込むためのコードは以下の通りです。

<script src="ファイルのパス/jQueryのファイル名.js"></script>

CDNを用いる場合は、CDNのコードをコピーして、HTML内のheadタグ内またはbodyの閉じタグの前にペーストします。その下にjQueryのコードや外部ファイルの読み込みをして下さい。

jQueryの導入例

jQueryの導入例を紹介します。下のコードはh2要素の上にマウスを持ってくるとp要素の文章が表示され、マウスを外すと文章が消えます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>テキストの表示非表示</title>
    <style>
      p {
        display: none;
      }
    </style>
  </head>
  <body>
    <h2>ここにマウスをおいてください</h2>
    <p>テキストが表示されます。見出しからマウスを外すと消えます。</p>

    <script
      src="https://code.jquery.com/jquery-3.6.0.js"
      integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
      crossorigin="anonymous"
    ></script>
    <script>
      $('h2').hover(
        function () {
          $('p').fadeIn();
        },
        function () {
          $('p').fadeOut();
        }
      );
    </script>
  </body>
</html>

jQueryの導入例は本サイト内でも別の記事で紹介しています。参考にしてください。

【コードで解説】jQueryでアコーディオンメニューを作る方法を解説

HTMLのスライドショーにjQueryを使う方法を解説【コード例付き】

まとめ

jQueryはWebページに機能を持たせるためには必須のスキルです。現在はスマホやタブレットの普及により、表示させる情報を最低限にする傾向があります。必要なときに必要な情報を表示させる機能などが頻繁に使われます。

ほかにもデザイン性の高いサイトほど滞在時間が高く、商品の購入に繋がるというデータもあります。そのため、jQueryの需要は今後も高まっていくと考えられます。静的なWebページが作れるようになったら、次はjQueryに挑戦することをおすすめします。

【初心者向け】jQueryとはどのようなものかを解説【導入例あり】

jQueryとは