jQueryは一体何ができるの？
JavaScriptとjQueryは何が違うの？
Webサイトの制作で必ずといっていいほど耳にする言葉の1つに、jQueryがあります。jQueryは、Web制作の幅が広がるので習得しておきたいスキルの1つ。
本記事では、jQueryについて基本から応用まで詳しく解説していきます。
この記事の目次
jQueryとは？
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つ目は、ファイルをダウンロードしてから読み込む方法です。
公式サイトの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()だけなのでわかりやすいですよね。
他のメソッドも知りたい方は、こちらの記事でまとめていますので参考にご覧ください。
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について解説してきましたが、上記のような悩みを持っている方も多いですよね。
そんな方には、弊社が運営するサブスク型のプログラミングスクール「SAMURAI ENGINEER Plus+」がおすすめです。
月額2980円(税別)で、主に4つのサービスを提供させていただきます。
- 現役エンジニアによる月1度の「マンツーマン指導」
- 平均回答時間30分の「Q&Aサービス」
- 作りながら学べる28種類の「教材」
- 学習を記録&仲間と共有できる「学習ログ」
目的にあった教材を選べば、どなたでも効率よく学習できるほか、Q&Aサービスやマンツーマン指導を活用することで、挫折せずにjQueryの習得が可能です。
jQueryを本格的に学びたい人はもちろん、何から始めたらよいのかわからない方は、ぜひ「SAMURAI ENGINEER Plus+」をご利用ください。
まとめ
以上、jQueryについて紹介してきました。jQueryは、JavaScriptのライブラリーで機能をまとめたプログラムの集合体です。中身はJavaScriptになっていて、本来なら数十行かかる処理をたった数行で実現できて非常に便利です。
どのブラウザでも同じように使えるため、Web制作で普及しています。jQueryを使うとWeb制作の幅が広がるので、スキルとして習得しておきましょう！おすすめの学習方法をまとめている記事もありますので、jQueryを本格的に勉強したいと思った方は、ぜひ目を通してみてください。
