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

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

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

できることがたくさんあり過ぎて、逆に何をしたら良いのか分からなくなってしまうわけです。 しかしながら、ほんの少しだけコツを掴めば初心者でも簡単に使いこなすことができます

そこでこの記事では、初心者でも今日からjQueryをホームページに導入して活用できる方法について分かりやすく解説していきます。 ぜひ最後まで読んで理解を深め、一人でも多くの方がjQueryの不安を解消できれば幸いです。

jQueryの使い方

jQueryは、JavaScriptでできることをより簡単に書けるよう設計したJavaScriptのライブラリです。 ※ちなみにjQueryについてより詳しく知りたい方は下記の記事もどうぞ。

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のさまざまな箇所を制御できるわけです。 セレクタについての基本から応用までをさらに深堀したい場合は、次の記事で体系的にまとめているので参考にしてみてください!

メソッド

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

メソッド内容
.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()によるイベント処理の使い方まとめ!
更新日:2022年11月14日

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を学ぶなら

ここまで、jQueryの使い方を導入方法も交えて紹介しました。ただ、なかには

独学で習得できるかな...
途中で挫折したらどうしよう…

と不安な方もいますよね。

jQureyといったプログラミングは手軽に学べるようになった反面いざ勉強を始めると、学習途中に挫折する独学者が多くいます。事実、弊社の調査では

  • 不明点を聞ける環境になかった
  • エラーが解決できなかった
  • モチベーションが続かなかった

などの理由から、87.5%が「プログラミング学習で挫折や行き詰まりを感じた」と回答しています。

プログラミング学習における挫折率の調査
プログラミング学習者の87.5%が挫折を経験したことがある
不明点やエラーが解決できずプログラミングを挫折した人が多数

調査概要:プログラミング学習の挫折に関するアンケート
調査対象:10代〜80代の男女298名
調査期間:2019年8月13日~8月20日
調査方法:インターネット調査
掲載元:PR TIMES

また、多くの無料学習サイトやWebサービスには不明点を質問・相談できる機能がありません。

こうした背景もあってか、プログラミング学習サイトの活用経験者100名に「再度学習サイトで学ぶと仮定した際、利用したいと考える学習サイト」を聞いたところ、50%が「不明点を質問・相談できる学習サイト」と回答しています。

調査概要:プログラミング学習サイトの活用経験がある人への意識調査 
調査期間:2022/9/9~2022/9/19
対象者:プログラミング学習サイトを活用した経験がある10~60代の男女100名
調査媒体:クラウドワークス
掲載元:PR TIMES

いざ独学でjQueryを学び始めても、勉強の最中に挫折しまっては学習にかけた時間を悔やむだけでなく「スキルを身につけるのって思っていたよりも難しいんだな...」とjQueryの習得自体を諦めかねません。

仮にわからないことを飛ばしながら勉強を進めたとしても、ITエンジニアへの転職や副業での収入獲得を実現できるほど実践的なスキルが身につかなければ、結局後悔することになります。

そのため、1人でjQueryを習得できるか不安な方は数千円の費用をかけてでも、問題が発生したタイミングで現役エンジニア等に質問できる有料の学習サイトを選ぶのが賢明といえます。

そこで、おすすめしたいのがSAMURAI TERAKOYA(侍テラコヤ)です。

700x700_01 (2) (1)
700x700_02 (1) (1)
700x700_03 (1) (1)
700x700_04 (1) (1)
700x700_05 (1) (1)
700x700_06 (1) (1)
700x700_01 (2) (1)
700x700_02 (1) (1)
700x700_03 (1) (1)
700x700_04 (1) (1)
700x700_05 (1) (1)
700x700_06 (1) (1)
previous arrow
next arrow
jQueryを学べる侍テラコヤの教材例

・jQueryの基礎を学ぼう
・jQueryで動きがあるWebサイトを効率的に作ろう

・jQueryでWebサイトの模写コーディングをしよう
jQueryの基礎を学びつつ、Webサイトの制作スキルを習得できます。

侍テラコヤをおすすめする最大の理由は「月定額2,980円で現役エンジニアに質問しながら学習を進められるコスパの良さ」にあります。

先ほど述べたとおり、独学者の多くは自力でエラーを解決できないためにプログラミング学習を挫折しています。そのため、初学者が現役エンジニアのようなプロに質問や相談ができない環境でプログラミングスキルを習得するのは難易度が高いといえます。

しかし、侍テラコヤでは

  • 現役エンジニアが応える回答率100%のQ%A掲示板
  • 必要に応じて受けられる現役エンジニアとのオンラインレッスン
  • 勉強の進み具合やこれまでの学習時間を確認できる「学習ログ」

といったサポート体制を整えているため、学習中に出てきた不明点を解決しながら挫折なくjQueryが習得可能です。下記の口コミからも、侍テラコヤなら挫折しづらい環境で学習を進められるといえます。

出典:侍テラコヤ

また、侍テラコヤは入会金不要・いつでも退会OKに加え、利用から1ヵ月の間は「全額返金保証制度」が適用されるので「他のサービスを選べばよかった」と後悔する心配もありません。

なぜ侍テラコヤがコスパよくjQueryを習得できるのか気になる方はぜひ公式サイトをご覧ください。

公式サイトで詳細を見る

プログラミング学習の挫折率は約90%と言われています。学習を成功させるには、モチベーションを維持して成長を実感できる環境が必要です。

侍エンジニアなら「現役エンジニア講師」、「学習コーチ」、「Q&A掲示板」のトリプルサポート体制であなたの学習をサポートするほか、オーダーメイドカリキュラムで必要なことだけを学べるため、さまざまなランキングでNo1という実績を挙げています。

挫折せず最短でプログラミングを習得したいなら侍エンジニアがおすすめです!

詳しくはこちら

Writer

マサト

フリーランス

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

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI TERAKOYA

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら
ページ上部へ戻る
Close