ブログトップ > プログラミング言語 > JavaScript > jQuery

jQueryとは？JavaScriptとの違いから使い方まで徹底解説【初心者向け】

侍ブログ編集部
侍ブログ編集部

2016/6/19

2020/8/27

jQueryってそもそも何？
jQueryは一体何ができるの？
JavaScriptとjQueryは何が違うの？

Webサイトの制作で必ずといっていいほど耳にする言葉の1つに、jQueryがあります。jQueryは、Web制作の幅が広がるので習得しておきたいスキルの1つ。

本記事では、jQueryについて基本から応用まで詳しく解説していきます。

jQueryとは？

jquery-logo

jQueryとは、ジョン・レシグが開発し、2006年1月にリリースした「JavaScriptのライブラリ」です。（JavaScriptって何？という方は、まずこちらの記事をご覧ください。）

「ライブラリ」とは、ある程度まとまったプログラムをあらかじめ作ってくれているファイルのこと。といわれても、使ったことがない人からするとイメージがわかないですし分かりづらいでしょう。

そこでライブラリを例えると、あらかじめ材料を切ってくれていて、すぐに料理できるように準備してくれている「カット済み野菜のようなもの」です。もともと切ってくれている材料を使えば、手間も省けて料理も簡単にできますよね。

それと同じでjQueryは、JavaScriptを使いやすいように拡張してくれているものなのです。1つの機能を実現するためにJavaScriptでは10行のコードを書く必要があっても、jQueryでは1~2行ほどで済みます。jQueryは、WEB業界の発展に最も大きく貢献している世界標準のJavaScriptライブラリと言えるでしょう。

jQueryはJavaScriptのプログラム

先ほど、jQueryは「JavaScriptを使いやすく拡張したもの」と述べました。これはつまり、jQueryの中身はごく普通のJavaScriptであるという意味にもなります。

「jQuery」と「JavaScript」は異なる言語と思い込んでいる方も多いですが、jQueryはJavaScriptを簡単に記述できるようにしたものです。少ない記述でさまざまな表現を安全に実行できるのは、jQueryの大きな魅力でもあるという点は覚えておきましょう！

HTMLやCSSを簡単に操作できる

Webサイトの中には、ユーザーへ訴求するために以下のような動作をつけることがあります。

  • クリックしたら画像が入れ替わる
  • ボタンにマウスオーバーしたらボタンの色と文字の色が逆転する
  • 入力フォームで入力するとすぐに内容をチェックする
  • 画面をスクロールしていくと見た目や数値が変わっていく

これらはすべて、JavaScriptを使ってHTMLやCSSを操作することで実現しています。しかし、これらの処理をJavaScriptで書こうとすると膨大なコードになってしまい、Webサイトの容量が増えて表示速度等に影響がでてきます。

jQueryを使えば、短いコードで簡単にHTMLやCSSを操作できて開発の効率が上がるため、頻繁に使われます。

Ajaxが簡単に扱える

Ajaxとは、あるWebページを表示した状態のまま、別のページや再読込などを伴わずにWebサーバ側と通信を行い、動的に表示内容を変更する手法。

引用元：IT用語辞典e-Words　http://e-words.jp/w/Ajax.html

Ajaxは、JavaScriptを使ったサーバーとの非同期通信のことです。

Ajaxが登場する以前は、サーバーとやり取りしてサーバーからの結果をページに反映させるためには、ページを再読み込みさせたり同じデザインの別ページを読み込む必要がありました。しかしAjaxを使うとページと非同期でサーバーと通信できるようになるため、無駄なページの読み込みが削減できます。

例えば、新規のユーザーIDを登録する際の「既に使われているIDです」「使えるIDです」や、申込みフォームの「全角で入力してください」といったものにAjaxが使われています。ユーザービリティの向上にも繋がるAjaxですが、jQueryを使うと簡単に記述できます。

jQueryの特徴とは？

今や、jQueryなしでWeb開発できないと言い切れるほど普及しているjQueryですが、ここまで普及したのは次の2つの特徴があったからです。

  • どんなブラウザでも使える
  • jQuery UIやjQuery Mobileなどもプラグインで拡張できる

それぞれ解説します。

どんなブラウザでも使える

これが、jQueryが使われる最大の理由です。ブラウザには、Windowsに標準で入っている「IE（インターネットエクスプローラー）」「Edge（エッジ）」、Googleの「Google Chrome」、MacやiPhoneで使われている「Safari」など様々な種類があります。

実は、ブラウザごとにそれぞれ微妙に仕様が違うため、同じJavaScriptのコードでも動かなかったり、動きが変になってしまうブラウザがあったりします。これは長年の間、WEB関係者を悩ませていた問題でした。しかし、jQueryはこれらのブラウザの違いを吸収して、どのブラウザでも同じコードで動作するようにしてくれるのです。

jQuery UIやjQuery Mobileなどもプラグインで拡張できる

jQueryは簡単な記述で多機能なWeb開発を行えるわけですが、プラグインを作成して独自の機能を追加できる拡張機能が用意されています。これにより、jQueryの標準では提供されていない機能を自分で作って、オリジナルのWeb開発に活用できるというメリットがあります。

さらに、jQueryをベースに開発された公式のライブラリも提供されているのをご存知でしょうか？ 代表的なライブラリとしては「jQuery UI」「jQuery Mobile」があります。

「jQuery UI」はダイアログ、ウィジェット、アニメーションなどを取り入れた人気のWebサイトを簡単に開発できるのが魅力。「jQuery Mobile」は、スマホなどのタッチ操作や画面に最適化されたWebサイトを素早く開発できるライブラリです。

これらのライブラリも、同じようにプラグインを作成して自分で機能を拡張することが可能です。実際のプラグイン作成事例については、次の記事でサンプルデモと一緒に確認できるのでぜひ参考にしてみてください！

jQueryの使い方は？

ここからは、jQueryの基本となる導入から簡単な使い方までを詳しく見ていきましょう！

jQueryファイルの読み込み方法

まずはjQueryを利用するにあたり、一番最初に行うのがjQueryファイルの読み込みです。ファイルの読み込み方法は、以下の2種類。

  • ファイルをダウンロードしてサーバーに直接アップする方法
  • jQueryの配布元に公開されたファイルを使うCDN

1つ目は、ファイルをダウンロードしてから読み込む方法です。

引用元：jQuery公式サイト　https://jquery.com/download/

公式サイトのDownloadページから「Download the compressed, production jQuery 3.x.x」を右クリックし、「名前を付けてリンク先を保存」でダウンロードします。ダウンロードしたファイルをサーバーにアップし、ファイルのパスを使ってscriptタグを作ります。

//ダウンロードした場合のスクリプトタグ

<script src="ファイルのパス/jquery-3.5.1.min.js"></script>

このタグをHTMLファイルの<head></head>内に記述します。

2つ目の方法は、jQueryの配布元に公開されたファイルを使う方法（CDN）です。この方法だと、ファイルをダウンロードしてサーバーへ設置する手間が掛からないので、便利です。jQueryが使えるCDNは、以下の3つ。

  • jQueryのCDN
  • GoogleのCDN
  • MicrosoftのCDN

それぞれのURLを使って、scriptタグを作ります。

//jQueryのCDN

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

 

//GoogleのCDN

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

 

//MicrosoftのCDN

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.min.js"></script>

3つのうちどれか1つのタグを<head></head>内に記述します。

「min.js」の扱い方について

みなさんは、jQueryファイルに2種類の形式があることに気づきましたか？一般的には「jquery.js」「jquery.min.js」という2種類があるのですが、どちらもまったく同じ動作をします。

それでは、両者の違いは一体どこにあるのでしょうか？ 実は、「min.js」と書かれたファイルは圧縮版（minified）という意味で、改行・コメント・インデントなどをすべて削除しています。これにより、ファイルの容量を限りなく小さくして読み込み時間を高速化しているわけです。

反対に「jquery.js」のファイルは非圧縮版（uncompressed）で、開発者がコードを見ながらデバッグしやすくしています。このような理由から、本番の運用時には「jquery.min.js」のファイルを使用するのがおすすめです。

jQueryの書き方

jQueryの基本構文は次の通りです。

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

セレクタには操作対象とするHTMLの要素、メソッドは処理内容を記載します。より具体的で細かい処理を指定したい場合はパラメータを使います。実際に簡単なjQueryプログラミングを試してみましょう！

例えば、「h1要素」に対して「文字列を太字にしたい」場合、セレクタでh1を指定し、CSSを指定するメソッドcss()を使用します。

$('h1').css('’color,'red');

わかりやすくてコードもシンプルですよね。

jQueryを使った実践サンプルプログラム

スクロールを開始したら、ページのTOPへ戻るボタンを表示させるプログラムです。

【スクロール前】

【スクロール後】

スクロールを開始すると、右下に上に戻るボタンが表示されます。具体的なプログラムは以下の通りです。

上に戻るボタンのHTML

<p id="page-top"><a href="#top"><img src="img/btn_gotop.png" alt="TOPへ移動"></a></p>

JavaScript

/***** ページTOP *****/

$(window).scroll(function () {

if ($(this).scrollTop() > 100) {

$('#page-top').fadeIn();

} else {

$('#page-top').fadeOut();

}

});

CSS

#page-top{

position: fixed;

right: 20px;

z-index: 1041;

width: 40px;

height: 40px;

background: #323232;

text-align: center;

border-radius: 5px 5px 0 0;

color: #e8e8e8;

}

jQueryを使うと、JavaScriptのコードがスッキリするのがわかるでしょう。今回の例では$(this).scrollTop()だけで、現在のスクロール位置を取得しています。ボタンを表示させるさせないも.fadeIn()・fadeOut()だけなのでわかりやすいですよね。

他のメソッドも知りたい方は、こちらの記事でまとめていますので参考にご覧ください。

初心者でもわかる！jQueryの導入から基本的な使い方まで徹底解説！
更新日 : 2020年8月7日

JavaScriptとjQueryの違い

JavaScriptとjQueryがセットで紹介されることも多く、実は違いがよくわからないという方もいらっしゃるのではないでしょうか？

JavaScriptはプログラミング言語です。一方で、jQueryはライブラリーと呼ばれるプログラムの集合体。jQueryの中身はJavaScriptで構成されたプログラムです。

JavaScriptで書くと数十行かかる処理が、jQueryならたった1行でできるようになります。つまり、同じ処理でもコードの行数に違いが出てくるということ。記述量が少なくシンプルになるため、エラー時の見直し作業など開発の負担が減り、効率的に開発できるようになります。

JavaScriptとjQueryの使い分け

今度はJavaScriptかjQueryをどのように使い分ければ良いのかを見ていきましょう！ポイントはいくつかありますが、以下の3つは抑えておくべきでしょう。

  • クロスブラウザ対応
  • パフォーマンス
  • 拡張性

「クロスブラウザ対応」というのは、IE(Edge) / Firefox / Chromeなどの各種ブラウザの差異をいかに吸収できるか？という意味になります。実は、ブラウザによってJavaScriptの挙動が微妙に違うケースが多々あります。（特にIEは多い）jQueryではこれらブラウザの違いをあらかじめ吸収できるように設計されているので、普通にプログラミングしていれば特に問題を感じなくても良いのは最大の魅力です。

しかし「パフォーマンス」は、純粋なJavaScriptの方が断然速いです。先ほど解説したようにjQueryではブラウザの違いを吸収するなど、さまざまな処理がバックグラウンドで動いているのでその分どうしても少し遅くなる傾向があります。「拡張性」というのは、jQueryの場合さまざまな用途に使えるプラグインが多数リリースされており、それらを組み合わせるだけで機能を追加できるという強みがあります。

これらを総合的に判断すると、パフォーマンスをそれほど重視しない小~中規模程度のプロジェクトであればjQueryが持つ恩恵を受けやすいと言えるでしょう。

まとめ

以上、jQueryについて紹介してきました。jQueryは、JavaScriptのライブラリーで機能をまとめたプログラムの集合体です。中身はJavaScriptになっていて、本来なら数十行かかる処理をたった数行で実現できて非常に便利です。

どのブラウザでも同じように使えるため、Web制作で普及しています。jQueryを使うとWeb制作の幅が広がるので、スキルとして習得しておきましょう！おすすめの学習方法をまとめている記事もありますので、jQueryを本格的に勉強したいと思った方は、ぜひ目を通してみてください。

まずはこれだけ！jQuery初心者が知るべきポイントを徹底解説！
更新日 : 2020年8月18日
このエントリーをはてなブックマークに追加
LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

侍ブログ編集部

侍ブログ編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
→サービスページはこちら
→ツイッターはこちら
→フェイスブックはこちら

すべての記事を見る

おすすめコンテンツ

いまならレッスン期間が2週間延長！この秋、プログラミングを学ぼう

転職成功で受講料0円！あなたもプログラミングを学んでエンジニアデビュー

この記事のあとによく読まれています！