初心者向けjQuery入門：基本から応用までの使い方ガイド

こんな疑問を解決する記事です。

いきなりですが、結論から言って、jQuery（ジェイクエリー）とは、JavaScriptライブラリのひとつになります。

jQueryを使うことでWebサイト上のHTML要素を簡単に選択したり、スタイルを変更したり、アニメーションを実装したりすることができます。

• ①JavaScriptよりもシンプルに書くことが可能
• ②ブラウザ互換性にも優れている
• ③プラグインも多く存在するため、様々な機能を簡単に追加可能

これらの点に優れており、さらに、初心者でも簡単に習得できることから、Webデザインの入門言語としてもおすすめです。

本記事では、そんなjQueryに関して初心者にもわかりやすく丁寧に解説するので、この機会にjQueryを習得してWebデザインの幅を広げてみてください。

jQueryはオワコンですか？

最近だと、「jQueryはオワコン」「もっと良いJavaScriptライブラリがある」とか言われたりします。

ぶっちゃけ、確かにjQueryは古いライブラリですが、僕はオワコンだと思いません。というのも、jQueryは非常にシンプルで応用性があり、初心者でも使いやすいライブラリだからです。

昨今流行りのJavaScriptライブラリを使うにしても、jQuerynの基礎知識があるとないのでは習得スピードが大きく違うと思いますし、そういった視点からも、今からjQuery学習をするのも全然遅くないと言えます。

本記事を読むとわかること

上記の内容について解説していくので、気になるところから読んでいただければ幸いです。

プログラミング初心者におすすめの記事

2022年8月23日 無料でプログラミングを学ぶ方法【初心者向け】※授業料0円スクールあり

プログラミングは独学でも習得可能ですが、できるならプログラミング教室に通いつつ、現役エンジニアに教わるのが一番です。

プログラミング学習でネックとなる学習コストの不安を取り除いてくれる、無料プログラミング教室を紹介しているので、よければこちらの記事も合わせてご覧ください。ちなみにですが、教育訓練給付制度で最大70％OFFになるプログラミング教室もあります。

スポンサードサーチ

jQueryとは：初心者向け基礎知識

それでは本題に入りましょう。

まずは、jQueryの基礎知識を初心者向けに解説します。

jQueryとは：機能や特徴、メリットを解説

jQueryには、Webデザインに役立つ多くの機能や特徴、メリットがあります。代表的なものをざっくりと紹介しますね。

1. jQueryの代表的な機能4つ

サクッと解説していきます。

1-1. HTML要素の選択・操作機能

jQueryを使うことで、HTML要素を簡単に選択できます。

例えば、$('p') と書くことで、すべての<p>要素を選択することができます。選択した要素に対して、スタイルの変更や属性の設定、要素の追加・削除などを簡単に行うことができるので、コードをシンプルに管理でき、作業時間を短縮できます。

1-2. イベントの追加機能

また、jQueryを使って、クリックやマウスオーバーなどのイベントを簡単に追加することができます。

イベントが発生した際に実行する関数を定義することで、かなり複雑な動作まで実現可能です。

1-3. アニメーション機能

イベントだけでなく、フェードインやスライドなどのアニメーションも簡単に実装できるのもjQueryの特徴です。

1-4. Ajax機能

jQueryを使うとAjax（エージャックス）も簡単に実装することができます。

Ajaxとはページを再読込みすることなくサーバーとの通信を行う技術でして、Amazonなどでも使われています。Amazonでは画面をスクロールすればするだけ、下にどんどん商品が表示されていきますよね。簡単に言うとこれがAjaxです。

Ajaxを使うことで、ページ動作がスムーズになり、ユーザーの利便性を向上させることができます。

2. jQueryの主な特徴4つ

jQueryの大きな特徴としては、上記の点が挙げられます。ひとつずつ解説しますね。

2-1. シンプルな構文

jQueryは、JavaScriptよりもシンプルな構文を持っているため、学習ハードルはかなり低いです。

初心者でも簡単に学ぶことができるので、JavaScriptの入門としては最適なライブラリと言えます。

2-2. ブラウザの互換性に対応

jQueryは多くのブラウザに対応しています。

これまでJavaScriptの大きな課題としてブラウザとの互換性があったのですが、jQueryがこの大きな問題を解決してくれました。

ブラウザごとのJavaScriptを書く必要がなく、jQueryだけを書けばどんなブラウザでも機能するのはめちゃくちゃありがたいですね。

2-3. 多数のプラグイン

世界的にユーザーの多いjQueryだけあって、機能を拡張してくれるプラグインが数多く存在しています。

これらのプラグインを利用すれば様々な機能を簡単に追加することができるので、これだけでもWebデザインの幅が大きく広がります。

2-4. 充実のコミュニティサポート

jQueryは大規模なコミュニティによって支えられています。

ユーザー間で情報を共有し問題を解決することができ、過去の情報も大量にストックされているため、課題にぶつかっても解決策が見つかりやすいです。

3. jQueryの大きなメリット4つ

メリットとしては、上記4つが挙げられます。こちらもひとつずつ解説していきます。

3-1. 開発効率の向上

jQueryを使うことで、HTML要素の操作やイベントの追加、アニメーションの実装などを簡単に行うことができるため、開発効率が向上します。

3-2. レスポンシブ対応

jQueryはレスポンシブデザインに対応可能。ウィンドウサイズに応じて表示を変更する処理などをめちゃくちゃ簡単に実装できます。

3-3. ユーザービリティ向上

jQueryを使うことで、Webページの操作性やデザイン性を大きく向上させることができます。（例：スムーズなアニメーション、Ajaxによる非同期処理など）

ユーザービリティはWebデザインにおいてもとても重要な要素なので、これが簡単に実装できるのはjQueryの大きな魅力です。

3-4. モバイルフレンドリー

jQueryを使うことで、タッチイベントの追加や画面サイズに合わせた要素の表示など、モバイルフレンドリーな実装も簡単に済ませることができます。

jQueryとJavaScriptの違い

初心者がよく抱く質問として「jQueryとJavaScriptの違い」があります。

結論から言うと、jQueryはJavaScriptをベースにしたライブラリです。

jQueryとJavaScriptの違い

JavaScriptはWebブラウザ上で動作するスクリプト言語である一方、jQueryはJavaScriptをベースにしたライブラリです。

つまり、jQueryは、JavaScriptの機能を拡張・簡単にしたものであり、JavaScriptそのものよりも短くシンプルに書くことができます。

jQueryとJavaScriptの使い分け

では、どのような場合にjQueryを使い、どのような場合にJavaScriptを使うべきか？

答えは簡単です。

JavaScriptはブラウザ以外の環境でも使用することができ、Node.jsと呼ばれるサーバーサイドの開発にも使用されるいっぽう、jQueryはWebブラウザ上でのみ使用されるライブラリなので、このような使い分けが適切といえます。

ちょっとだけ、深掘りしますね。

jQueryを使用するべき場合

JavaScriptを使用するべき場合

まぁ、このあたりは上級者向けの内容なので、とりあえずWebデザインにはjQueryで十分対応可能という認識でOKだと思います。

注意：jQueryに頼りすぎると危険

ここまでjQueryの良いところばかりを紹介しすぎたので、このあたりでデメリットについても言及しておきます。

jQueryのデメリットは「依存性」です。

すでに解説した通り、jQueryはとてもシンプルかつWebデザインスキルを爆上げしてくれるライブラリです。

しかし、それは逆にJavaScriptを理解しなくても動作させることができるとも言えるので、JavaScriptについて理解不足になることがあります。jQueryをさらに使いこなすためにも、JavaScriptの最低限の基礎知識は身につけておきましょう。

スポンサードサーチ

jQueryの使い方：基本から応用まで

ここからは、jQueryの実践的な使い方について解説していきます。具体的には下記の順で解説していくので、必要な部分からご一読あれ。

ここから先を読むとわかること

補足ですが、jQueryでWebデザインするなら一冊くらいは参考書を手元に置いておくといいと思います。

実装したいデザインのコードをサクッと引いて、それをもとに自分なりにカスタマイズすれば作業効率が爆上がりすること間違いなしです。

それでは順に解説していきますね。

jQueryの導入方法

jQueryを使うためには、jQueryをサイトにインストールする必要があります。

CDNを利用すれば簡単に導入可能なので、そちらのやり方を紹介しますね。

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

上記のコードを <head> 内に貼り付けるだけです。

jQueryの基本的な使い方

jQueryを導入したら、基本的な使い方をマスターしていきましょう。

ここでは、下記5つの基本操作を解説していきます。

1. HTML要素の選択方法

jQueryでは、HTML要素を簡単に選択することができます。

例えば、下記のように <h1> タグのテキストカラーを一括で赤色に変更する処理をするときなどに便利です。

<!DOCTYPE html>
　<html>
　　<head>
　　　<meta charset="utf-8">
　　　<title>jQueryの基本的な使い方</title>
　　　<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
　　　<script>
　　　　$(function() {
　　　　　$('h1').css('color', 'red');
　　　　});
　　　</script>
　　</head>
　　<body>
　　　<h1>Hello, jQuery!</h1>
　　</body>
</html>

上記のコードでは、$('h1') で <h1> を選択し、.css('color', 'red') でテキストカラーを赤色にしています。

この方法なら、いちいちhtmlのタグにclass名を振らなくても一括で指定箇所を変更できるので便利ですよね。

2. イベントの追加

jQueryを使うと、HTML要素にイベントを追加することができます。

以下の例では、<button> タグがクリックされたときに、<p> タグのテキストを表示する処理を行います。

<!DOCTYPE html>
<html>
　<head>
　　<meta charset="utf-8">
　　<title>jQueryの基本的な使い方</title>
　　<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
　　<script>
　　　$(function() {
　　　　$('button').click(function() {
　　　　　$('p').show();
　　　　});
　　　});
　　</script>
　</head>
　<body>
　　<button>クリック！</button>
　　<p style="display:none;">jQueryサイコー！</p>
　</body>
</html>

このコードでは、$('button').click() で <button> タグにクリックイベントを追加し、.show() で <p> タグを表示している感じです。

よく、フォーム送信を完了すると「お問い合わせありがとうございます」的なメッセージが表示されるWebサイトがありますが、それらは、このようにしてjQueryで実装されています。

3. アニメーションの実装

jQueryなら、アニメーションも簡単に実装することが可能です。

<div> をクリックしたときに、<p> をアニメーションで表示する処理のサンプルを解説します。

<!DOCTYPE html>
　<html>
　<head>
　　<title>jQuery Sample</title>
　　<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
　　<style>
　　　#myDiv {
　　　　width: 200px;
　　　　height: 200px;
　　　　background-color: blue;
　　　　color: white;
　　　　text-align: center;
　　　　line-height: 200px;
　　　　cursor: pointer;
　　　}
　　　#myPara {
　　　　display: none;
　　　　margin: 0;
　　　　padding: 0;
　　　　text-align: center;
　　　}
　　</style>
　</head>
　<body>
　　<div id="myDiv">クリック！</div>
　　<p id="myPara">こんにちわ！！</p>
　　<script>
　　　$(document).ready(function() {
　　　$("#myDiv").click(function() {
　　　　$("#myPara").slideDown("slow");
　　　　});
　　　});
　　</script>
　</body>
</html>

上記サンプルでは、クリック可能な <div> タグと、初めは非表示になっている <p> タグがあり、jQueryの slideDown() メソッドを使用して、<div> をクリックすると <p> をアニメーションで表示する動きを指定しています。

slideDown() メソッドは、引数にアニメーション時間を指定でるので、ここでは"slow"を指定し、アニメーションの時間を遅くしています。

ちなみに、アニメーションを実装するときは、$(document).ready() メソッドで、ページのロード完了してからクリックイベントを設定しましょう。そうすることで、動作が安定します。

4. フォーム操作

続いて、フォーム操作を実施する方法。

下記にて、<input> タグに入力された値をアラートで表示する処理を解説します。

<!DOCTYPE html>
<html>
　<head>
　　<meta charset="utf-8">
　　<title>jQueryの基本的な使い方</title>
　　<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
　　<script>
　　　$(function() {
　　　　$('#submit').click(function() {
　　　　　var value = $('input[type="text"]').val();
　　　　　alert(value);
　　　　});
　　　});
　　</script>
　</head>
　<body>
　　<form>
　　　<input type="text" name="text">
　　　<input type="button" id="submit" value="Submit">
　　</form>
　</body>
</html>

こちらでは、$('#submit').click() でボタンにクリックイベントを追加し、$('input[type="text"]').val() で入力された値を取得しています。

5. Ajaxの実装

jQueryを使うと、Ajax（非同期通信）も簡単に実装することができます。

僕個人的にも、Webデザインのときに非同期遷移をよく使うのでとてもお世話になっている機能です。

下記、<button> タグがクリックされたときに、外部のAPIからデータを取得して表示する処理を実施するサンプルコードです。

<!DOCTYPE html>
<html>
　<head>
　　<meta charset="utf-8">
　　<title>jQueryの基本的な使い方</title>
　　<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
　　<script>
　　　$(function() {
　　　　$('#btn').click(function() {
　　　　　$.ajax({
　　　　　　url: 'https://jsonplaceholder.typicode.com/posts/1',
　　　　　　type: 'GET',
　　　　　　dataType: 'json'
　　　　　})
　　　　　.done(function(data) {
　　　　　　$('p').text(data.title);
　　　　　})
　　　　　.fail(function() {
　　　　　　alert('Error');
　　　　　});
　　　　});
　　　});
　　</script>
　</head>
　<body>
　　<button id="btn">Get Data</button>
　　<p></p>
　</body>
</html>

$.ajax() の記述によりAjax通信を実行、.done() で通信成功時の処理、.fail() で通信失敗時の処理を実装しています。

Ajaxに関しては、jQueryの基本操作の中では少し難易度高めかもですね…。なので、ちょっと難しそうだなと感じる場合は、とりあえずAjaxの存在を知っておいてもらうだけで十分です。

jQueryの実践的な使い方

jQueryの基礎に触れたら、実践的な使い方も学んでおくといいです。

ここでは、jQueryを使ってスライドショーを作る方法、Ajaxによる非同期通信の実装方法、jQueryプラグインの導入方法を解説します。

jQueryでスライドショーを作る方法

jQueryを使ったスライドショー作成方法の手順は下記の通りです。

HTMLコード

<div class="slideshow-container">
　<div class="slide"><img src="slide1.jpg"></div>
　<div class="slide"><img src="slide2.jpg"></div>
　<div class="slide"><img src="slide3.jpg"></div>
</div>

まずはこんな感じでスライドショーに表示したい画像を <div> で囲んで並べましょう。

CSSコード

.slideshow-container {
　position: relative;
　width: 100%;
　height: 300px;
　overflow: hidden;
}
.slide {
　position: absolute;
　top: 0;
　left: 0;
　width: 100%;
　height: 100%;
　opacity: 0;
　transition: opacity 1s ease-in-out;
}
.slide.active {
　opacity: 1;
}

一応説明しておくと、上記CSSでは、画像がアクティブになったときに opacity: 1 にして表示するようにしています。

jQueryコード

$(function() {
　var slides = $('.slide');
　var currentSlide = 0;
　
　function nextSlide() {
　　slides.removeClass('active');
　　slides.eq(currentSlide).addClass('active');
　　currentSlide = (currentSlide + 1) % slides.length;
　}
 
　setInterval(nextSlide, 3000);
});

上記サンプルで実行している処理は次の通りです。

① setInterval 関数で、3秒ごとに nextSlide 関数を呼び出す
② nextSlide 関数で、現在表示されているスライドの active class を削除し、次のスライドに active class を付与

これにより、画像が順番にアクティブ・非アクティブを繰り返し、スライドショーを作ることができます。

Ajaxによる非同期通信の実装方法

先ほど基礎知識の部分でも触れましたが、ここではさらに実践的なAjaxによる非同期通信の設定方法を解説しますね。

Ajaxを使用すると、ページの再読み込みなしにサーバーとデータをやり取りすることができるので、サイトパフォーマンスやユーザービリティの向上に役立ちますよ。

Ajax（非同期通信）の実装手順

上記コードは次のようになります。

phpコード

$.ajax({
　url: "example.php",
　data: {
　　name: "John",
　　age: 30
　},
　success: function(response) {
　　console.log(response);
　}
});

JavaScriptコード

$.get("example.php", function(response) {
　console.log(response);
});
 
$.post("example.php", { name: "John", age: 30 }, function(response) {
　console.log(response);
});;

JavaScriptコード

$("#content").load("example.html");});;

上記コードの解説です。

まずは、example.phpというURLにnameとageというデータを送信します。

続いて、jQueryにて $.get() でGETリクエストを、$.post() でPOSTリクエストを送信し、レスポンスをコンソールに表示します。

そして最後に $.load() にてexample.htmlを読み込む感じです。

以上が、jQueryを使ってAjaxを実装する方法です。

jQueryはAjaxを簡単に扱えるように設計されているため、これらたった4つの関数を使用することで簡単にAjaxを実装することが可能です。

jQueryプラグインの導入方法

jQueryには、様々なプラグインや機能が用意されており、Web開発の際、とても役立ちます。

jQueryプラグインとは、簡単に言えばjQueryの拡張機能でして、インストールするだけで様々な機能を提供してくれるもの。プラグインは自分で作ることもできますが、既に存在するものを利用することが多いです。

積極的にjQueryプラグインを活用して作業時間を大幅に削減しましょう。

jQueryプラグインの導入手順

手順は上記の通り、たった3ステップなのでめちゃくちゃ簡単。ひとつずつ解説しますね。

jQueryプラグインのダウンロード

まずは、プラグインをダウンロードしましょう。

プラグインは nmp などで有志によって無料配布されているので、使いたいものを選ぶだけ。簡単ですね。

jQueryプラグインの読み込み

jQueryプラグインを利用するためには、HTMLファイルにプラグインのスクリプトを読み込む必要があります。読み込みコードは下記の通り。

<script src="jquery.js"></script>
<script src="jquery.plugin.js"></script>

jQueryプラグインの呼び出し

プラグインを読み込んだら、あとは呼び出すだけ。

$(document).ready(function() {
　$('#element').pluginName();
});

基本は上記コードのコピペ、かつ使用したいプラグインコードをコピペするだけなので簡単ですね。

WordPressでjQueryを使う方法と注意点

先述の通り、jQueryはWordPressでも使用可能ですが、いくつか注意点があるので解説しておきます。

WordPress × jQuery：注意点

上記の通り。深堀りします。

jQueryはWordPressに組み込まれている

jQueryはWordPressに既に組み込まれているため、自分でjQueryを読み込む必要はありません。

wp_enqueue_script()を使ってjQueryを登録し、wp_headやwp_footerなどの適切なフックで読み込ませることが推奨されています。

jQueryはWordPressでそのまま使えるということだけを覚えておけばOKですが、WordPressの開発者向けリソースに詳細な説明があるので、より詳しく知りたい人は目を通してみてもいいと思います。

$記号の代わりにjQueryで定義する

WordPressでは、セキュリティの理由から、$記号はWordPressが使っているJavaScriptライブラリと衝突する可能性があるため使用できません。

代わりに jQuery を使用しましょう。

✕  → $(document).ready(function($) {
〇 → jQuery(document).ready(function($) {

こんな感じです。

jQueryオブジェクトの定義を確認

WordPressでは、jQueryを使う前にjQueryオブジェクトが定義されていることを確認する必要があります。

以下、wp_enqueue_script()関数でjQueryを読み込み、jQuery(document).ready()でjQueryコードを実行するためのサンプルコードです。

function my_scripts() {
　wp_enqueue_script( 'jquery' );
　wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0.0', true );
}
 
add_action( 'wp_enqueue_scripts', 'my_scripts' );

jQuery(document).ready(function($) {
　// ここにjQueryのコードを記述
});

WordPressでjQueryを使う場合、以上3つに留意しておけば、あとはスクラッチ記述と同じです。

スポンサードサーチ

まとめ：jQueryは初心者にもわかりやすい

本記事は以上です。

かなり長くなりましたが、結論、jQueryは初心者でも扱いやすいJavaScriptライブラリと言えます。

JavaScriptを簡素化し、クロスブラウザー対応やDOM操作を容易にすることでWebの開発効率を飛躍的に向上させることができるので、この機会に身に付けておきましょう。

jQueryおすすめの学習方法

参考までに、jQueryのおすすめ学習方法をまとめておきますね。

1. 公式サイトのドキュメンテーションを読む

jQuery公式のドキュメントには実例が豊富に用意されているので、基本から応用まで網羅的に学べます。

よって、まず、なによりも先に公式ドキュメントを読むことをおすすめします。

2.  書籍とチュートリアルで独学

公式ドキュメントをひと通り読み終えたら、一冊の本を手にしてみましょう。

「本なんて買わなくても、ネットで情報収集できる」という人もいますが、困ったときにいつでも逆引きできるjQueryの専門書が一冊手元にあるだけで安心して学習できるはずです。

jQueryの専門書において、僕は上記に勝る一冊はないと思っています。

迷ったら、まずはこの一冊をお手元にどうぞ。

「基礎知識もそうだけど、もっと実践で使える構文をサクッと調べたいよ」という人には、こちらがおすすめです↓↓

WEBデザインの現場で役立つ構文がシンプルに解説されているので、初心者でも本書のサンプルをコピペすればある程度のjQueryを実装することが可能です。

3. オンラインコースを受講する

プログラミング教室には、プロ講師と二人三脚でJQueryが学べるコースが用意されています。

独学だと挫折しちゃうかも…という不安がある人は、プロ講師と一緒にJQueryを学んでいきましょう。

下記プログラミング教室にはお試し期間もあったりするので、どうしても不安が拭えない人は、とりあえず無料相談で気になるところを聞いてみるのもアリだと思います。

また、上記プログラミング教室では、教育訓練給付金制度によって学習コストが最大70％OFFになります（※相談無料）

詳しくは下記の記事にて深堀りしているので参考にしていただければと思います。

» 教育訓練給付制度が使えるプログラミングスクール5選【最大70％給付】
» 無料でプログラミングを学ぶ方法【初心者向け】※授業料0円スクールあり

おわり。