【超入門】jQuery とは？できること・基本をわかりやすく解説

Webサイトの制作時に jQuery を詳しく知らなくても簡単な設定のみで、使いやすく魅力のある機能を加えることができます。jQuery の概要を知ることで、制作作業の質と効率はさらに向上します。こちらの記事では初心者の方向けに概要や実装方法だけでなく、効果的な学習方法についてもまとめています。

 jQuery（ジェイクエリー）とは？

こちらの統計によれば、JavaScriptの「ライブラリ」では最も多くのWebサイトで導入されています。

概要

2006年にジョン・レシグ氏が公開しました。本人の発言によれば当初「JSelect」という名称を考えていましたが、ドメイン名がすでに取得され使用できなかったため jQueryと命名した経緯があります。

jQueryでできるのは、表示されているページをより使いやすくすることです。Webサイトの利用者にとっては、必要な時にだけやりたいことができる仕組みです。一方その制作者にとり、ページ上の限られた場所を有効活用するための機能を、効率的に実装できる手段です。単に見た目の動きを加えるというより、他のさまざまなプログラムと同様に大切な役割があると考えます。

 jQuery「プラグイン」とは？

Webサイト制作の現場で特定の機能が欲しいになった時、jQuery と併用してすぐに利用できるプログラムです。簡単な設定だけで導入できるので重宝します。例えば、スライダー（スライドショー）や各種メニューなどがあります。公式サイトには、2,000以上のjQuery プラグインが公開されています。基本的な設置例は「導入事例」の章をご覧ください。

 関連する用語を理解する

（1）ライブラリ

よく出てきますが、とっつきにくい用語です。プログラミングでは、特定の用途のためにまとめたものといえます。その「部品」が公開されることで多くの開発者が利用できるため、最初からすべてのプログラミングをしなくても良く、開発など作業時間の短縮につながります。一般的には図書館の意味で使われているライブラリは、まさに各種のプログラムがわかりやすく保管と公開が行われている空間といえるでしょう。

（2）JavaScript

Webサイトの制作には、欠かすことのできないプログラミング言語の一つです。1995年に発表されてから今日まで、広く利用されてきました。このJavaScriptの代表的な「ライブラリ」として、本記事のテーマ「jQuery」があります。

JavaScriptについて、カゴヤのサーバー研究室では以下の記事で詳しく説明しています。

（3）DOM（Document Object Model）

Webページを表示させる基本的な仕組み（HTMLなど）に、JavaScriptから各種の操作をする方法やルールのことです。

＞専用サーバーを1,000円台から利用できる国産レンタルサーバー

利用するために必要なこと

（1）だいたいの書き方を知る

まずは基本的な書き方から始めましょう。

$(function(){
    $(a).b()
});

上記の「$(a).b()」の部分が処理内容で、aが「セレクタ」、bが「メソッド」と呼ばれています。セレクタとは該当する箇所（要素）の部分で、メソッドとは指示内容（命令文）です。

わかりづらいため、以下のような簡単なHTMLとCSSを使う例で、jQuery からの文字の装飾を指定する方法をまとめました。

<div id="test01">
  <p class="test02">1番目の文章などがここに入ります</p>
  <p class="test03">2番目の文章などがここに入ります</p>
</div>

セレクタとは「test02」や「p」などで、メソッドとは「CSS」です。以下のように書くことで、jQuery により文字の装飾を指定できます。

$(function(){
    $(".test02").css("color","green")
});

このjQueryを実行すれば、上記のHTMLで「1番目の文章などがここに入ります」の文章だけを緑色に指定可能です。

（2）設置方法を知る

jQueryの設置方法には以下の2種類あります。

（a）プログラムをダウンロードして使用する

手順は以下の通りです。

1. 公式サイトなどからプログラム一式をダウンロードする
2. 入手したファイルを解凍する
3. サーバー上で特定の場所にアップロードする
   *JavaScript関連ファイルの保管場所として「js」ディレクトリを作成している場合は、そこにアップロードする
4. 以下のようにHTMLファイル上にjQuery保管場所の指定をする

【例】 下記を < head> と </ head> の間に記述します。

<script type="text/javascript" src="js/jquery-X.X.X.min.js"></script>

（注1）X.X.X の部分にはjQuery のバージョンに該当する数字が入ります

（注2）保管場所として「js/」ディレクトリを指定しているとき

（b）CDNを利用する

この場合 jQueryのプログラム一式を手元のPCにダウンロードし、サーバー上にアップロードする必要はありません。他のサーバー上にあるjQueryプログラムを読み込む設定をするだけです。以下をHTMLファイル上 < head> と </ head> の間に記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js"></script>

この仕組みで使われているのが、CDN（Content Delivery Network）というサービスです。CDNについて、カゴヤのサーバー研究室では別の記事で詳しく説明しています。

 （3）設定方法のコツを知る

jQuery とjQuery プラグインの両方を使い、Webサイトを効率的かつ効果的に制作するには、下記の理解も大切です。

（a）jQuery ファイルの「min」の意味

ファイル名「jquery-X.X.X.min.js」のように、「min」のあるファイル名の利用を指定されていることがあります。この「min」の有無で、機能が変わることはありません。違いはファイルのサイズで、「min」のある方が軽くなっています。SEO対策で少しでもWebサイトの表示を速くしたい場合は、軽快な「min」の方を指定しましょう。

（b）その他の設定も忘れずに

jQuery 関連のプログラムを読み込んだだけでは、目的の機能を動かすことはできません。そのため「起動スクリプト」と呼ばれる設定で、各種の指定をしましょう。

さらに、jQuery プラグインのファイル一式にCSSファイルが含まれている場合は、指定をしましょう。このCSSファイルにより、レイアウトなどを調整する手間を省くことができます。

jQuery の導入事例

特殊な作業ではなく、以下の3つの内容をWebページに書くことで実現可能です。

1. jQueryとjQueryプラグイン、CSSファイルを読み込む（ダウンロードまたは CDN）
2. 「起動スクリプト」で動作内容をカスタマイズする
3. HTML部分に「セレクタ」部分を加える

それでは典型的な事例を以下ご紹介しましょう。

コードの画面で、「JS」の欄に書かれている内容が「起動スクリプト」に相当します。画面には、左から「HTML」「CSS」「JS」と3つの項目が並んでいます。このなかで一番右側の「JS」の部分を指しています。

事例（1） スライダー（スライドショー）

複数の画像を次々に切り替える仕組みです。トップページのメインビジュアルとして、主要な製品やサービスの画像を自動的に順番に提示する場合などに使われています。見た目の効果を期待できるだけでなく、メインビジュアルという限られた貴重な場所を有効活用できます。今回は最も人気の高い「slick」というjQueryプラグインを利用しています。

See the Pen Untitled by nishiyama (@ichironishiyama) on CodePen.

事例（2） ハンバーガーメニュー

特に画面のサイズが限られているスマートフォンでは、多くのメニュー項目を常時表示させておくのは、閲覧者にとってわずらわしいことです。そのためメニュー操作が必要なときにだけ、その項目が出る方法が用意されています。jQueryでなくても実装できますが、より多くのコードを書かなければなりません。

こちらの事例では、右上にある青色の四角内に三本の白線が並んでいる箇所をクリックすると、メニュー項目が別に表示されます。

See the Pen test02 by nishiyama (@ichironishiyama) on CodePen.

事例（3） アコーディオンメニュー

こちらもスマートフォン用に多く使われています。普段は隠れているため、表示したいときはタップしたから表示することができます。まるで楽器のアコーディオンのように開閉することで、こちらも限られた表示画面を効率良く使いこなすことができます。

デモでは以下のソースコードを参考にしています。

【参考サイト】
jQuery UI
https://jqueryui.com/accordion/

See the Pen test03 by nishiyama (@ichironishiyama) on CodePen.

利用のヒント

動作しないときにチェックすること

1. jQuery と jQuery プラグインのリンク先が正確かよく確認する
2. jQuery と jQuery プラグイン を読み込む順番を直す（jQuery 本体を先に指定する）

最新のバージョンを利用する！

公式サイトで公開されているjQuery プラグイン は、最新バージョンに更新されていないことがあります。jQuery プラグインをダウンロードして利用する時は、各jQuery プラグインの公式サイトで最新バージョンの入手をおすすめします。機能を強化できるだけでなく、セキュリティ面の強化につながります。

 WordPressでの導入方法

WordPressでは専用プラグインを導入することで、手軽に欲しい機能を拡張することができます。jQuery プラグインをコマンドで設定するより、設定がより簡単にわかりやすくなっています。

jQuery を効率的で体系的に学ぶ方法

人気のプログラミング言語であり、無数の手段があります。こちらの章では、比較的知名度の高いコースを中心にご紹介しています。

学習サイト（主に動画）

動作確認がすぐにできるのがメリットです。

事業者	コース名	備考
Udemy	jQueryコース	・幅広い分野で、レベル毎に豊富なコースが提供されている ・有料、キャンペーン実施時には破格の料金になる
Progate	jQuery	・基礎を5段階で「プログラミングに触れる」（無料会員） ・より実践的なコースあり（有料会員、月千円程度）
ドットインストール	jQuery	・一部は無料で公開されている ・プレミアム会員（月千円程度）で多くのサービスが受けられる
Schoo（スクー）	jQuery	・学校のような雰囲気や機能あり ・プレミアム会員（月千円程度）で「全録画授業が見放題」

書籍

断片的ではなく、体系的に理解できるのがメリットです。

Amazonでは、「 jQuery 」と検索して表示された書籍から「試し読み」やレビューから複数選ぶことをおすすめします。書名や宣伝文句に惑わされないようにしましょう。

まとめ

jQuery の利便性を知り、Webサイトの制作時に役立ていただきたいと考えます。稼働させるサーバーを手軽に用意するには、レンタルサーバーの利用をおすすめします。カゴヤ・ジャパンでは以下のようなプランを提供しています。活用されてみてはいかがでしょうか。

全プランが専用サーバーのレンタルサーバー

WordPressがインストールされた状態からスタート可能