jQueryはJavaScriptを扱う上で知っておきたいライブラリの一つです。この記事では、jQueryを使うとできることやメリット・読み込み方法・使い方の基本を解説します。jQueryの扱いをマスターして思い通りのWeb開発、制作ができるようになりましょう。

短期で基礎を習得できるオンライン・リモート講座(入門5日・基礎10日)はこちら

jQueryとは何か

JavaScriptでの動的サイト制作を学習する上で、jQueryというものを目にする人は多いでしょう。使いかたやメリットを理解するためにも、まずはjQueryとは何なのか・どのような特徴があるのかを把握しておきましょう。

簡単なWebサイトの改修の内製化を目指すフロントエンド(HTML・CSS・JavaScript)入門5日はこちら

JavaScriptのライブラリ

jQueryはJavaScriptのライブラリの一種です。ライブラリとは開発に使える汎用的なプログラムをまとめたものを指します。

利用したい機能やプログラムがあるときに一から構築するのではなく、すでにライブラリにあるものを使うことでコーディングを省略することができます。

jQueryは2006年にリリースされて以来根強い人を誇っているライブラリで、JavaScriptのライブラリの中では事実上の標準といわれています。

JavaScriptの扱いが簡易になるjQueryの登場により、プログラミング初心者でも以前より簡単にWeb制作・開発ができるようになりました。

jQueryの特徴

jQueryは動きのあるWebサイトを制作する際によく使われています。例えばSNSへのリンクボタンの設置や、サイトをスクロールしていくと画像が変化するといったような機能に使われます。

jQueryを利用すれば、JavaScriptをそのまま記述するより簡単にこれらの機能を追加できるようになるのが特徴です。

HTMLの要素やCSSで設定したスタイルを操作するとき、JavaScriptで一から書くと手間がかかります。そこでJavaScriptのプログラムをまとめたjQueryを利用することにより、簡単に操作できるようになるのです。

■関連記事

jQueryで何ができるのか

jQueryは動的サイトのスピーディーな開発に欠かせません。ではjQueryを使うと、サイト開発の上でどのようなことができるのでしょうか？代表的な四つの例を挙げて解説します。

DOM操作が簡単になる

Document Object Model (通称DOM) とは、HTMLのドキュメントをツリー状のオブジェクトに変換するAPIのことです。DOMに変換された段落や画像などのHTMLドキュメントは、オブジェクトとして直接操作できるようになります。

例えばテキストの中身や画像を差し替える、あるボタンを押すとページの別の部分にジャンプする、CSSをユーザーの行動に合わせて変更するといった操作が動的サイト制作でよく行われるでしょう。

DOM操作はJavaScriptでも可能ですが、jQueryを利用すればより簡単にできるようになります。

アニメーション

jQueryを使うと、HTML要素の位置を変更する・透明度を変化させるなどの工夫が簡単にでき、見た目に動きがあるページを作れるようになります。

特に仕様が大きく変わったjQuery3.0以降では、.show()、.hide()、.toggle() 関数を使わなくても、表示・非表示用のクラスを用意しクラスを切り替えることで簡単に挙動を制御できるようになっています。

またjQueryのanimateというメソッドを使えば、任意のアニメーションを簡単にサイトに組み込むことができます。メソッドチェーン（複数の処理を連鎖させること）を使って複数のアニメーションをつなげることも可能です。

グラフや図形の描画

Webサイトではよく、統計の記載やデザイン上で図形やグラフを使うことがあります。グラフや図形もjQueryを使うとより簡単に描画できます。

グラフ描画用のjQueryプラグインには有料のものだけでなく、無料で使えるオープンソースライセンスのプラグインにも、Google Chartsをはじめとした高機能なものも多くあります。

JavaScriptで作るサイト上では、図形の描画にHTML5から導入された「canvas」がよく使われます。円や線などさまざまな図形を描けるcanvasも、jQueryのプラグインを使えばより簡単に扱えるでしょう。

SNSとのシェア

Webサイトやブログなどで、FacebookやTwitterなどのSNSと連携できるボタンを見たことがある人は多いでしょう。SNSのシェアボタンをプログラムで一から作るのは複雑で手間がかかりますが、jQueryであれば簡単に作れます。

ボタンにシェア機能だけでなく、直接SNSのサイトやブラウザに飛ばなくてもサイト内で「いいね」などのリアクションを可能にする機能も付けられます。

企業向け実績2500名以上,個別指導型の通年開講プロエンジニア育成コース(Java1~3ヶ月)はこちら

■関連記事

jQueryを使うメリット

jQqueryというライブラリを使うことで、JavaScriptをより便利に扱えます。では具体的にはどのような点がメリットになるのでしょうか？JavaScriptでは得られないメリットを三つ紹介します。

DX時代に活躍する人材育成を！ 若手、新人エンジニアの成長を阻む 人材育成5つの失敗と解決策はこちら

ソースコードの簡易化

JavaScriptは比較的簡易的なコードでプログラムできる言語ですが、jQueryを使うとさらにソースコードを簡易化できます。10行必要なコードも1～2行で記述できるようになり、全体的にすっきりとした記述が可能です。

コードがすっきりすると、書いた本人やチームメンバーが読みやすいだけでなく、バグやエラーが発見されたときに追いやすくなる・追加実装が簡単になるというメリットもあります。

コードが短くなればその分エンジニアの作業時間を減らせるため、プログラミングの効率化につながるでしょう。

豊富なプラグインが使える

プラグインとは機能を拡張させるためのプログラムのことです。jQueryにはさまざまなプラグインが用意されています。

例えばレスポンシブデザインでよく利用されるプラグインには、ドロワーメニューを簡単に実装できるようなものもあります。

サムネや画像をクリックした際に文書や画像をポップアップ表示するような機能も、ユーザーの利便性を上げるためによく使われるでしょう。

他にも動画や画像・問い合わせフォームを簡単にWebサイトに実装させるプラグインなどがあり、種類は非常に豊富です。UIを向上させる機能を手軽に実装できる点も、jQueryを使うメリットといえます。

さまざまなブラウザに対応できる

JavaScriptで書かれたコードは、ブラウザによって挙動が変わってしまうことがあります。現在はユーザーの環境が多様化しており、サイトにアクセスするデバイスも使っているブラウザも人によってさまざまです。

jQueryで作られたWebサイトには、ブラウザが変わっても同じ動きをするという特徴があります。実装テストをするときにいちいち色々なブラウザで試したり、挙動を何度も確認したりといった手間がなくなります。

Ajaxを使える

Ajaxでサイトを便利にする外部の機能を簡単に埋め込むことができる点も、jQueryを使うメリットです。Ajax（エイジャックス）とは、JavaScriptで非同期通信を行うための手法です。非同期通信とは、サーバーとユーザーの情報が同期せずに処理する仕組みを指しています。

例えばGoogleマップでは、サイト全体を更新しなくてもマップを拡大したりスライドしたりできます。これは非同期通信の仕組みによるものです。

他にもショッピングサイトでの商品リストや商品の合計・連絡通知・SNSでのタイムラインなども、Ajaxを使うことでスムーズになります。Ajaxを扱えると便利なWebサイト開発に役立つでしょう。

■関連記事

jQueryを使う準備

実際にjQueryを使った開発を始めるには、準備の知識が必要です。jQueryを導入する際、ダウンロードして使う方法とダウンロードせずに使う方法があります。それぞれのやり方を確認しておきましょう。

社内のエンジニア不⾜を解決するたった1つの解決⽅法はこちら

ダウンロードする方法

jQueryをダウンロードしておくと、オフライン環境下でも扱えるようになります。ダウンロードは公式サイトからできるようになっており、ページは基本英語表記です。詳しく読みたい場合は翻訳機能などを活用しましょう。

公式サイトを開き右上の「Download jQuery」というボタンをクリックします。ダウンロードページが開いたらページ本文の中にある「Download the compressed, production jQuery 3.x.x」のリンクを右クリックし、「名前をつけてリンク先を保存」を選択しましょう。

Macの場合はダウンロードページのリンクを右クリックしても保存できないため、URLを開きcommand+sなどで保存します。Windows・Macともにファイル名は「jquery-3.x.x.min.js」です。

保存したjQueryのファイルを開発中のWebサイトで使用しているサーバーにアップロード（他のファイルと同じフォルダに保存など）し、HTMLファイルのheader部分に以下のようなscriptタグを記述します。

<script src="/js/jquery-3.x.x.min.js"></script>

これで保存したjQueryのファイル内容をHTMLに読み込ませることができました。コードを書く際はファイルのパスに注意しましょう。

jQuery公式サイト

CDNを利用して使う方法

ダウンロードせずにjQueryを使うにはCDNを利用します。CDNとは「Content Delivery Network」の略で、インターネットを経由してファイルを扱うことができる仕組みのことです。

CDNを利用するためには、headerタグ内に以下を記述しましょう。headerタグの中であれば書く場所は問いません。

<script src="https://code.jquery.com/jquery-3.x.x.min.js"></script>

同じくheaderタグ内に以下のmetaタグも記述します。jQueryがレスポンシブに対応するため必要になるコードです。

<meta name="viewport" content="width=device-width,initial-scale=1">

■関連記事

jQueryの書き方

jQueryの準備ができたら実際にコードを書いて開発を進めましょう。jQueryの基本構文やセレクタの記述方法・メソッドの種類などを解説します。

全国の若手~ベテランエンジニアが受講している個別指導のオンライン・リモート講座(入門5日・基礎10日)資料ダウンロードはこちら

基本構文

jQueryの基本的な書き方は一般的に以下のようになります。

$(function(){
//ここにjQueryのコードを記述する
 });

初めに記述することで、サイトの読み込みが終わった後すぐにjQueryが読み込まれます。

jQueryの基本構文は以下のとおりです。

$("セレクタ").メソッド("パラメータ[引数]");

指定したセレクタに対して、メソッドを実行していくのがjQueryを扱う上での一般的な流れです。引数についてはメソッドの種類によって必要ない場合もあります。

セレクタで指定した要素に特定のアクションが加わったとき操作を行う場合は、メソッドの部分にイベントを記述します。イベントの場合は記述が若干異なるため、「イベントの処理」を参考にしましょう。

セレクタの記述

セレクタとは、CSSを適用させたいHTML要素を指定するために用いるものです。セレクタには、idやクラス・子孫・グループなどの記述ができます。

例えば、h2という要素の文章（テキスト）を変更したい場合は以下のように書きます。

$('h2').text('hello world');

セレクタを使うことにより、任意のHTML要素をjQueryで操作できるようになります。

短期Java講座(入門5日・基礎10日)ー株式会社ジョブサポート

メソッドの種類

メソッドの部分には、指定したセレクタに対して「どのような操作をしたいのか」を記述する部分です。オーソドックスなメソッドには、以下のようなものがあります。

他にも多くのメソッドがありますので、自分のサイトで使いたいメソッドを習得しましょう。

短期5日・10日講座(Java・フロントエンド)研修実績はこちら

イベントの処理

イベントとメソッドは構文の中での位置が同じですが、イベントの前にはonを付ける点が異なります。書き方は以下のとおりです。

$(“セレクタ”).on(“イベント”,引数{
});

イベントを使用すると、主にユーザーがWebサイトで何かアクションを行ったときに実行する処理をパラメータで指定できます。よく利用されるイベントには以下のようなものがありますので、使いそうなものを覚えておきましょう。

イベント処理を取り入れることで、より動きが豊かなWebサイト制作を実現できます。

■関連サイト

jQueryのさまざまな使い方をマスターしよう

この記事で紹介したもの以外にも、jQueryにはさまざまな使い方があります。jQueryを使うことで、コードを簡易化して可読性を向上させられる・さまざまな機能をサイトに追加できるなど多くのメリットを体感できます。