catch-img

jQueryを使うための基礎知識。読み込み方法やできることを紹介

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

目次[非表示]

  1. 1.jQueryとは何か
    1. 1.1.JavaScriptのライブラリ
    2. 1.2.jQueryの特徴
  2. 2.jQueryで何ができるのか
    1. 2.1.DOM操作が簡単になる
    2. 2.2.アニメーション
    3. 2.3.グラフや図形の描画
    4. 2.4.SNSとのシェア
  3. 3.jQueryを使うメリット
    1. 3.1.ソースコードの簡易化
    2. 3.2.豊富なプラグインが使える
    3. 3.3.さまざまなブラウザに対応できる
    4. 3.4.Ajaxを使える
  4. 4.jQueryを使う準備
    1. 4.1.ダウンロードする方法
    2. 4.2.CDNを利用して使う方法
  5. 5.jQueryの書き方
    1. 5.1.基本構文
    2. 5.2.セレクタの記述
    3. 5.3.メソッドの種類
    4. 5.4.イベントの処理
  6. 6.jQueryのさまざまな使い方をマスターしよう


jQueryとは何か

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

JavaScriptのライブラリ

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

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

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

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

jQueryの特徴

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

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

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

■関連記事

  JavaScript開発におすすめエディタ6選。OS別や機能解説 | Java・フロントエンド研修のジョブサポート プログラム開発において、開発環境を整えることは重要です。その中でも今回は、JavaScript開発に適したエディタを、その理由と共に紹介します。エディタの特性や機能を把握し、開発に最適なエディタを選びましょう。 Java・フロントエンド研修のジョブサポート

オンラインリモート講座(入門5日・基礎10日)ー株式会社ジョブサポート

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のサイトやブラウザに飛ばなくてもサイト内で「いいね」などのリアクションを可能にする機能も付けられます。

■関連記事

  JavaScript入門者が学ぶべきポイント。知っておきたい基礎解説 | Java・フロントエンド研修のジョブサポート JavaScriptは汎用性の高い言語ですが、研修を実施するにあたり、どのような内容で進めていけばよいのか、計画段階で悩むことも多いのではないでしょうか。JavaScriptの基礎知識や入門者向けの学習方法などを紹介します。 Java・フロントエンド研修のジョブサポート

通年開講プロエンジニアコース(Java研修1~3ヶ月)ー株式会社ジョブサポート

jQueryを使うメリット

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

ソースコードの簡易化

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

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

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

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

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

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

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

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

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

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

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

Ajaxを使える

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

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

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

■関連記事

  JavaScriptでAjaxを使う方法。使用例や利用方法を解説 | Java・フロントエンド研修のジョブサポート よりユーザビリティの高いWebアプリやサイトを作るには、非同期通信を用いる必要があります。そのためのツールの一つが「Ajax」です。Ajaxの使い方や使用例を紹介しますので、Ajaxを使ったサイトやアプリを作れるようになりましょう。 Java・フロントエンド研修のジョブサポート

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

jQueryを使う準備

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

ダウンロードする方法

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">

■関連記事

  基礎から学ぶJavaScript研修。プランやカリキュラム解説 | Java・フロントエンド研修のジョブサポート JavaScriptに関して知識があまりなく、どのような研修を行えばエンジニアやエンジニアを目指す従業員に効果的か分からない人事の方もいるでしょう。この記事では、研修の具体的なプランやカリキュラムについて解説していきます。 Java・フロントエンド研修のジョブサポート

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

jQueryの書き方

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

基本構文

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

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

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

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

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

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

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

セレクタの記述

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

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

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

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

メソッドの種類

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


メソッド
()内にパラメーターを追加したとき行われる処理
.css()
指定のCSSスタイルに変更する
.html()
指定のhtmlに書き換えを行う
.text()
指定のテキストに書き換える
.prepend To()
HTMLの先頭に指定した要素を追加する
.append()
HTMLの末尾に指定した要素を追加する
.remove()
指定した要素を削除
.vall()
指定した要素のvalueに値を設定する
.insertBefore()
指定した要素の移動先を指定する
.addClass()
指定した要素にクラスを追加する
.toggleClass()
指定した要素のクラスを切り替える

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

イベントの処理

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

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

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


イベント名
処理が行われるタイミング
change
フォーム部品の状態に変化があったとき
click
要素がクリックされたとき
blur / focus
要素にフォーカスが当たったとき、または外れたとき
load
ドキュメントが読み込まれた後
resize
ウィンドウサイズが変化したとき
scroll
画面がスクロールされたとき
mousemove
指定の要素内でマウスが動いているとき
submit
フォームが送信されたとき
error
JavaScriptでエラーが発生したとき

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

■関連サイト

  フロントエンド(HTML5・CSS・JavaScript)入門5日講座-ジョブサポート フロントエンド(HTML5・CSS・JavaScript)入門5日講座は通学で基礎力強化します。スキルチェンジ、基礎から学びたい方向けの講座です。貴社の希望開始日、オンライン受講の選択も可能です。Java・フロントエンド研修はジョブサポートにお任せください。 Java・フロントエンド研修のジョブサポート


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

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


メールマガジンの購読設定

ジョブサポートの最新情報をお届けするほか、

人事、採用教育担当者、若手エンジニア向けに

役立つ情報をお届けします。

アップロードしています。少々お待ちください。