初心者でもわかる!jQueryの導入から基本的な使い方まで徹底解説!


jQueryってどうやってホームページに組み込んだらいいの?
jQueryを使いこなすコツを知りたい
HTMLをjQueryで制御できるようになりたい

jQueryを使うとホームページのさまざまなHTMLを自在に制御できるようになりますが、一体どこから勉強を始めたら良いのか迷う人も少なくありません。できることがたくさんあり過ぎて、逆に何をしたら良いのか分からなくなってしまうわけです。

しかしながら、ほんの少しだけコツを掴めば初心者でも簡単に使いこなすことができます。そこでこの記事では、初心者でも今日からjQueryをホームページに導入して活用できる方法について分かりやすく解説していきます。

ぜひ最後まで読んで理解を深め、一人でも多くの方がjQueryの不安を解消できれば幸いです。

jQueryの使い方

jQueryは、JavaScriptでできることをより簡単に書けるよう設計したJavaScriptのライブラリです。

※ちなみにjQueryについてより詳しく知りたい方は下記の記事もどうぞ。

jQueryとは?JavaScriptとの違いから使い方まで徹底解説【初心者向け】
更新日 : 2020年8月27日

jQueryの使い方は以下のとおりです。

  • jQueryを導入する
  • jQueryファイルのパスを記述する
  • jQueryを使った処理を記述する

各手順を詳しく解説していきます。

jQueryの使い方の手順①:導入方法

まずは、jQueryを導入しましょう。jQueryの導入方法は2つ。ファイルをダウンロードしてサーバーに直接アップする方法とjQueryの配布元に公開されたファイルを使うCDNです。

jQueryをダウンロードして使う

ダウンロードする方法は、オフラインでも使えるといったメリットがあります。公式サイトのDownloadページから、「Download the compressed, production jQuery 3.x.x」を右クリックし「名前を付けてリンク先を保存」でダウンロードします。

引用元:jQuery https://jquery.com/download/

CDNを使う

CDNとは、コンテンツデリバリーネットワークの略でダウンロードせずにjQueryを使う方法です。jQueryが使えるCDNは、以下の3つ。

それぞれの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>

いずれかのコードをHTMLのヘッダーに記載すれば大丈夫です。記載場所は次の項目で解説します。

jQueryの使い方の手順②:記述場所

ダウンロードする方法、CDNどちらでもHTMLのhead内に記載します。ダウンロードする場合のみ、head内に記載するまえにjQueryファイルのアップが必要なので、注意しましょう。

JavaScriptファイルをサーバーにアップする

これは、ダウンロードする場合のみ必要な手順です。CDNを使う方はここを飛ばして「HTMLのheadにscriptタグを書く」へ進んでください。

ダウンロードしたファイルをサーバーにアップします。わかりやすいのは「js」という名称のフォルダを作り、そのフォルダへアップすることです。

画像:サーバーへのアップ方法

次に、アップしたjQueryファイルのパスを使ってscriptタグを作ります。

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

<script src="/assets/js/jquery-3.5.1.min.js"></script>

HTMLのheadにscriptタグを書く

scriptタグが準備できたら、HTMLのhead内に記載します。

<head>

<!-- ここに記述 -->

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

</head>

head内はjQueryの他にも様々なファイルの読み込みを記載するので、どこに書いたらいいか迷いますよね。結論としては、head内であればどこでも問題ありません。参考までに現場でよく使うやり方を紹介します。

//サンプルコード

<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="UTF-8">

<title>サイトタイトル</title>

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

<meta name="description" content="ディスクリプション">

<link rel="stylesheet" href="./assets/css/reset.css">

<link rel="stylesheet" href="./assets/css/style.css">

・

・

・

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

<script>

・

・

</script>

</head>

このように、様々なファイルを呼び出す中の最後に記載しています。

WordPressで使う場合

WordPressには標準でjQueryが導入されているので、基本的には個人で何かする必要はありません。しかし、jQueryはバージョンによって使える機能に違いがあるため、実現したいことができない場合は対応しているjQueryに変更する必要があります。

header.phpに記載されていることが多いので、該当のコードを見つけてそこを書き換えてください。なお、使っているテーマによっても記載場所が変わってきます。変更する場合は、外観ーテーマエディタにあるファイルから探してしてください。

jQueryの使い方の手順③:基本構文

jQueryには、基本的な書き方があります。ページの読み込みが終わってからjQueryが実行されるように、以下の記述ではじめるのが一般的です。

$(function(){

/* ここにjQueryのコードを書く */

});

jQueryの基本構文は次のとおりで、セレクタとメソッドで構成されています。

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

セレクタ

セレクタには、操作対象となるHTML要素が入ります。例えば、h1要素のテキストを動的に変更したい場合は次のように記述します。

$('h1').text('こんにちは');

この例では、セレクタとしてh1要素を指定していますね。もちろん、CSSのセレクタ指定のようにIDやClass属性値なども利用することもできます。このセレクタを活用することで、jQueryではHTMLのさまざまな箇所を制御できるわけです。

セレクタについての基本から応用までをさらに深堀したい場合は、次の記事で体系的にまとめているので参考にしてみてください!

これで完璧!jQueryのセレクタ操作を完全理解するコツまとめ!
更新日 : 2019年5月9日

メソッド

メソッドは、指定した要素に対して何を行うかを記載します。パラメータを付けることで、より具体的な処理を細かく指定できます。

よくつかうメソッドは以下のとおりです。

メソッド 内容
.css() 指定のCSSスタイルに変更
.append() HTMLの末尾に指定した要素を追加
.remove() 指定した要素を削除
.vall() 指定した要素のvalueの値を取得または設定
.addClass() 指定した要素にクラスを追加
.toggleClass() 指定した要素のクラスを切り替える

イベント処理

ソッドと似たものにイベントがあります。イベントを使う時のメソッドはon()です。

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

});

イベントを使用すると、ホームページを訪問してきたユーザーが、何らかのアクションを行った時に任意の処理を実行することができます。例えば、ボタンをクリックした時や画面をスクロールした時など、さまざまなアクションが考えられますが、これらを監視して実行できるのがイベント処理になります。

jQueryで扱えるイベントは多数ありますが、よく使われるものは以下の通りです!

イベント名内容
changeフォーム部品の状態に何らかの変化があった時に発動
click要素がクリックされた時に発動
blur / focus要素にフォーカスが当たったとき(focus)、外れたとき(blur)に発動
loadドキュメントが読み込まれたあとに発動
resizeウィンドウサイズが変化した時に発動
scroll画面がスクロールした時に発動
keyup / keypressキーボードのキーが押された時(keypress)、離された時(keyup)に発動
mouseup / mousedownマウスのボタンが押された時(mousedown)、離された時(mouseup)に発動
mousemove指定の要素内でマウスが動いている時に発動
submitフォームが送信された時に発動
error何らかのJavaScriptエラーが発生した時に発動

そして、これらのイベント処理を行うのに必須とも言えるメソッドがon()になります。イベント処理を活用することで、jQueryではリッチなコンテンツを開発してホームページを魅力あるものに変えているわけです。

イベント処理についてさらに詳しい知識を学びたい方は、次の記事で豊富なサンプル事例と共に解説しているのでぜひ参考にしてみてください!

【jQuery入門】on()によるイベント処理の使い方まとめ!
更新日 : 2019年7月11日

jQueryのサンプル

ここまで、jQueryの導入方法から基本的な構文を解説してきました。続いてはjQueryを使ったサンプルをいくつか紹介します。実際のコードを見ながら使い方を覚えてみましょう。

CSSを書き換える

一番わかりやすいjQueryの処理は、CSSを書き換えるものです。これでjQueryの書き方の感覚を掴んでください。

//spanタグの文字色を赤に変える

$(function(){

$(“span”).css(“color”,”red”);

});

セレクタでspanタグを指定し、CSSメソッドを使って「色を赤にする」という命令を書いています。変更したい内容を複数組み合わせることもできます。

//spanタグを赤い太字にする

$(function(){

$(“span”).css({“color” : ”red” , ”font-weight”:”bold”});

});

ボタンクリック時の処理

よく使うjQueryの処理はボタンクリックです。例えば、「もっと見る」ボタンを押すと隠れていた所を表示したり、「小・中・大」のボタンでフォントサイズを変えるといった場面で使います。

<!-- HTML -->

<button id=”small-btn”>小</button>

<button id=”middle-btn”>中</button>

<button id=”big-btn”>大</button>

<p class=”textbox”>本文</p>

 

<script>

$(function() {

$("#small-btn").click(function() {

$(".textbox").css("font-size", "12px");

});

$("#middle-btn").click(function() {

$(".textbox").css("font-size", "24px");

});

$("#big-btn").click(function() {

$(".textbox").css("font-size", "50px");

});

});

</script>

フォームの制御

3つめのサンプルでは、ホームページには欠かせないフォーム処理について見ていきましょう。主に、jQueryによるフォームの制御とバリデーションについて学んでいきます。

基本的なフォームのコントロール

フォーム自体はHTMLのformタグを利用して作成しますが、jQueryではユーザーが入力した値などを取得するのが一般的な使い方でしょう。

jQueryで取得した値は、サーバーへ送信したり入力に誤りがないかをチェックするなどさまざまな用途に利用することが可能で、自在にフォームを制御するための重要なポイントになります。例えば、ユーザーが入力ボックスにどんな文字列を入れたのかを取得したい場合は次のようになります。

const result = $('input[type="text"]').val();

この例では、入力ボックスのinput要素に対してval()メソッドを利用することで、入力された文字列を変数resultに格納しています。対象となるinput要素は、もちろんID属性やname属性などで指定しても問題ありません。

また、チェックボックスのような複数選択可能なフォーム部品の値を取得するには、each()メソッドを次のように利用することができます。

$('input:checked').each(function() {

    console.log($(this).val());

});

この例では、セレクタに【input:checked】を指定していますが、これによりチェックされた要素を自動的にすべて対象要素にすることができます。そして、each()メソッドで繰り返し処理することで、選択された値を取得できるというわけです。

簡単なバリデーションの作り方

バリデーションは、フォームの入力が意図した通りに行われたかどうかをチェック(検証)することを意味しています。これはjQueryでゼロからプログラムを組んでも良いのですが、便利なプラグインが提供されているのでこちらを利用するのが簡単です。

基本的な使い方として、例えば次のようなフォーム要素があるとします。


 

文字列の入力ボックスを必須項目とし、さらにメールアドレスしか入力できないというルールにしてみましょう。

基本的な記述方法は次のようになります。

$('form').validate({

    //バリデーションのルールを記述する

})

validate()の引数に、オブジェクト形式でルールの設定を記述するだけで利用できます。今回の場合であれば、入力ボックスを必須項目としてメールアドレスのみの入力にします。

$('form').validate({
    rules: {
        mytext: {
            required: true,
            email: true
        }
    }
});

rulesプロパティの中にname属性(mytext)を指定して、そこに【required】【email】プロパティをtrueにするだけです。これで、このフォームのルールが設定されたので、メールアドレス以外の文字列を入力するとエラーが表示されるようになります。

バリデーションのプラグイン導入から応用的な使い方については、次の記事で体系的にまとめているのでぜひ参考にしてみてください!

【jQuery入門】validate()の使い方と独自ルールの設定方法!
更新日 : 2019年6月6日

 jQueryの使い方まとめ

今回は、jQueryをホームページに組み込んで活用するためのポイントについて学習しました!最後に、もう一度ポイントをおさらいしておきましょう!

  • Webページの処理速度が速くなるCDNを使って読み込む
  • HTMLのhead内にscriptタグを記述すると使える
  • 基本構文は$(“セレクタ”).メソッド()
  • イベント処理を使うとより高度な処理ができるようになる

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

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

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

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

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

cta_under_bnr

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

書いた人

マサト

マサト

フリーランスのIT系ライターを10年従事する兵庫県出身の40歳。侍ブログ編集部としては、これまで270記事以上を執筆。
30歳を過ぎてから独学でJavaScript, Node.js, Linuxを習得した経験を活かし、初心者が迷わない記事作成を意識しながらプログラミングの楽しさを知ってもらうために活動しています。趣味はキャンプと登山です。

おすすめコンテンツ

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

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