jQueryの使い方とは？覚えておきたい基本事項やサンプルを紹介
- プログラマー
- jQueryを使用すると、どういうことが便利になるのでしょうか？どんな機能が利用できますか？
- プロジェクト
リーダー - jQueryを使うことで便利になる機能はたくさんあります。どんな機能なのか一緒に確認しましょう。
jQueryのメリット4つ
jQueryの使い方と、そのメリットを4つ紹介します。ここでは、
・コード量を少なくできる
・多くの機能がある
・保守性の高いコードを作成できる
・利用者が多い
の4つのメリットについて紹介します。
1：コード量を少なくできる
JavaScriptはオブジェクト指向スクリプト言語です。WebアプリケーションはJavaScriptだけでも実装できますが、コードの量が多くなりがちです。
そこで、jQueryと呼ばれるライブラリを使用します。jQueryを使うことで、JavaScriptの大量のコードをシンプルに記述できます。つまり、同じ機能でもコード量を少なくできるということです。
2：多くの機能がある
jQueryには多くの機能があります。例えば、特定の要素を非表示にしたり、モーダルウィンドウを表示したり、アニメーション効果を付けたり、用途に応じてメソッドを使い分ける必要があります。
3：保守性の高いコードを作成できる
JavaScriptのライブラリであるjQueryで記述することでコード量が少なくなります。コード量が少なくなると、ロジックがシンプルになります。ロジックがシンプルになると、保守性が上がります。
4：利用者が多い
jQueryは利用者が多いため、技術記事も多く存在します。インターネット上で検索すれば、サンプルコードも多く入手できます。また、不具合に遭遇した場合などに、使い方の調査がしやすいです。
jQueryで覚えておきたい基本事項3つ
jQueryで覚えておきたい基本事項を3つ紹介します。ここでは、
・セレクタとは
・よく使うメソッドとは
・イベントを使うときのメソッド
について紹介します。基本事項をマスターして応用してください。
1：セレクタとは
セレクタとは、操作したいHTML要素を指定する処理です。以下のような使い方をします。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<pre class="prettyprint">
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>
<p>text1</p>
</div>
</body>
</html>
</pre>
|
jQueryは以下のような使い方をします。$の中に記述するのがセレクタです。
|
1
2
3
4
|
$(function(){
// p要素に対して何かのメソッドを実行
$('p').何かのメソッド();
});
|
2：よく使うメソッドとは
jQueryでよく使うメソッドの使い方を紹介します。ここでは、以下の3つのメソッドを紹介します。先ほどのHTMLに対してjQueryを記述してみてください。
-
- append
要素を追加するにはappendメソッドを使用します。使い方は以下の通りです。
|
1
2
3
|
$(function(){
$('p').append(' append string');
});
|
-
- css
CSSを書き換えるにはcssメソッドを使用します。使い方は以下の通りです。
|
1
2
3
|
$(function(){
$('p').css("color","red");
});
|
-
- text
文字列を書き換えるにはtextメソッドを使用します。使い方は以下の通りです。
|
1
2
3
|
$(function(){
$('p').text("mod text");
});
|
3：イベントを使うときのメソッド
jQueryでイベントを扱う方法を紹介します。
- click
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>
<p>click me!</p>
</div>
</body>
</html>
|
|
1
2
3
4
5
|
$(function(){
$('p').click(function(){
$('p').text('clickしました。');
});
});
|
See the Pen
jQuery_entry_event by kskumd (@kskumd)
on CodePen.
jQueryの使い方ガイド4STEP
jQueryの使い方を4STEPに分けて紹介します。
・STEP1：jQueryの導入手順
・STEP2：記述場所3つ
・STEP3：基本構文について
・STEP4：はじめに記述するコード
1：jQueryの導入手順
jQueryを導入する手順を紹介します。ここでは、
・CDNで配布元に公開されたファイルを使う場合
・ダウンロードしてサーバーに直接アップする場合
の2種類の方法について紹介します。
CDNで配布元に公開されたファイルを使う場合
CDNで配布元に公開されたファイルの使い方は、HTML内に以下のように記述します。jsファイルをダウンロードする必要がありません。
|
1
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
ダウンロードしてサーバーに直接アップする場合
ライブラリをダウンロードする使い方は、jQuery公式ダウンロードページからライブラリをダウンロードして使用します。
2：記述場所3つ
ライブラリのリンクを記述する場所を3つ紹介します。ここでは、
・HTMLのhead内に記載すること
・ダウンロードする場合は記載前にjQueryファイルをアップする
・WordPressで記述する場合
について紹介します。
1：HTMLのhead内に記載すること
CDNでjQueryを使う場合は、以下のようにheadタグ内に記述します。
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>
<p>text1</p>
</div>
</body>
</html>
|
2：ダウンロードする場合は記載前にjQueryファイルをアップする
ダウンロードする場合は記載前にjQueryファイルをアップして、headタグ内に記述します。
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>
<p>text1</p>
</div>
</body>
</html>
|
3：WordPressで記述する場合
WordPressでjQueryを記述するには、以下のように記述します。
|
1
2
3
|
jQuery(function(){
// ロジックを記述
});
|
jQueryはバージョンによって使える機能に違いがあります。対応しているjQueryに変更する必要があるため、注意してください。
3：基本構文について
jQueryの基本構文の使い方を紹介します。以下のように記述します。
|
1
2
3
|
$(function(){
// ここに処理を書いていきます。
});
|
基本構文の使い方をマスターして応用してください。
4：はじめに記述するコード
jQueryを使用することで動きのあるページにできます。ここでは、フェードイン／フェードアウトをトグルするメソッドを使ってみます。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>
<button>Click me!</button>
<p>fadeToggle</p>
</div>
</body>
</html>
|
jQueryは以下のような使い方をします。
|
1
2
3
4
5
|
$(function(){
$('button').click(function(){
$('p').fadeToggle();
});
});
|
実行結果は以下のようになります。
See the Pen
jQuery_entry_first by kskumd (@kskumd)
on CodePen.
jQueryを使用するとできること5選
jQueryには主に以下のような機能があります。
・アニメーションを付ける
・ブラウザ上の要素を動かす
・ブラウザ上の要素を動的に変更する
・入力項目の入力チェックを行う
これらの機能が簡単に実現できて、なおかつコード量も少なくできます。
1：特定の要素を非表示にする方法
特定の要素を非表示にするにはhideメソッドを使用します。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>
<button>Click me!</button>
<p>hide</p>
</div>
</body>
</html>
|
jQueryは以下のような使い方をします。
|
1
2
3
4
5
|
$(function(){
$('button').click(function(){
$('p').hide();
});
});
|
実行結果は以下のようになります。
See the Pen
jQuery_entry_hide by kskumd (@kskumd)
on CodePen.
2：モーダルウィンドウを表示する方法
モーダルウィンドウを表示するには、専用のライブラリを使用します。headタグ内にCDNを記述します。使い方を紹介します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
</head>
<body>
<div id="ex1" class="modal">
<p>Sample text</p>
</div>
<!-- モーダルウィンドウを開く -->
<p><a href="#ex1" rel="modal:open">Open Modal</a></p>
</body>
</html>
|
実行結果は以下のようになります。
See the Pen
jQuery_entry_modal by kskumd (@kskumd)
on CodePen.
3：画像の読み込み速度を向上する方法
画像の読み込み速度を向上するにはLazy Loadというライブラリを利用します。遅延読み込みを行ってくれるライブラリです。遅延読み込みとは、画像を一度にすべて読み込まずに、必要に応じて読み込む仕組みです。
これにより画像の読み込み速度を向上できます。使い方を紹介します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"></script>
</head>
<body>
<p><img width="300" height="300" class="lazyload" data-src="https://via.placeholder.com/300x300/?text=01"></p>
<p><img width="300" height="300" class="lazyload" data-src="https://via.placeholder.com/300x300/?text=02"></p>
<p><img width="300" height="300" class="lazyload" data-src="https://via.placeholder.com/300x300/?text=03"></p>
<p><img width="300" height="300" class="lazyload" data-src="https://via.placeholder.com/300x300/?text=04"></p>
<p><img width="300" height="300" class="lazyload" data-src="https://via.placeholder.com/300x300/?text=05"></p>
<p><img width="300" height="300" class="lazyload" data-src="https://via.placeholder.com/300x300/?text=06"></p>
<p><img width="300" height="300" class="lazyload" data-src="https://via.placeholder.com/300x300/?text=07"></p>
<p><img width="300" height="300" class="lazyload" data-src="https://via.placeholder.com/300x300/?text=08"></p>
<p><img width="300" height="300" class="lazyload" data-src="https://via.placeholder.com/300x300/?text=09"></p>
<p><img width="300" height="300" class="lazyload" data-src="https://via.placeholder.com/300x300/?text=10"></p>
</body>
</html>
|
jQueryは以下のような使い方をします。
|
1
2
3
|
$(function(){
$("img.lazyload").lazyload();
});
|
実行結果は以下のようになります。
See the Pen
jQuery_entry_lazyload by kskumd (@kskumd)
on CodePen.
4：h1要素のテキストを動的に変更したいとき
h1要素のテキストを動的に変更するにはtextメソッドを使用します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>
<button>Click me!</button>
<h1>title</h1>
<p>text</p>
</div>
</body>
</html>
|
jQueryは以下のような使い方をします。
|
1
2
3
4
5
|
$(function(){
$('button').click(function(){
$('h1').text("changed title");
});
});
|
実行結果は以下のようになります。
See the Pen
jQuery_entry_text by kskumd (@kskumd)
on CodePen.
5：テキストの色を変更したいとき
テキストの色を変更するには、CSSを書き換えます。cssメソッドを使用します。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>
<button>Click me!</button>
<p>text</p>
</div>
</body>
</html>
|
jQueryは以下のように記述します。
|
1
2
3
4
5
|
$(function(){
$('button').click(function(){
$('p').css("color","red");
});
});
|
jQueryは以下のような使い方をします。
See the Pen
jQuery_entry_css by kskumd (@kskumd)
on CodePen.
jQueryを使ったサンプル3つ
jQueryの使い方の理解を深めるためのサンプルを3つ紹介します。ここでは、
・ボタンでフォントサイズを変えたいとき
・CSSを書き換えたいとき
・フォームを制御したいとき
について紹介します。
1：ボタンでフォントサイズを変えたいとき
ボタンでフォントサイズを変えるには、CSSを書き換えます。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>
<button>Click me!</button>
<p>text</p>
</div>
</body>
</html>
|
jQueryは以下のような使い方をします。
|
1
2
3
4
5
|
$(function(){
$('button').click(function(){
$('p').css("fontSize","2.875em");
});
});
|
実行結果は以下のようになります。
See the Pen
jQuery_entry_font by kskumd (@kskumd)
on CodePen.
2：CSSを書き換えたいとき
JavaScriptでCSSを書き換えたい場合は、以下のように記述します。
|
1
|
documents.getElementById("id").style.fontSize = "10px";
|
jQueryでCSSを書き換えることで、文字の色やフォントサイズを変更できます。上記の章で紹介していますので、ここでは使い方は省略します。
3：フォームを制御したいとき
フォームの使い方を紹介します。ここでは、
・基本的なフォームの制御方法
・バリデーションを作りたいとき
について紹介します。
使い方をマスターすることで、フォームで入力した値を取得したり、入力チェックなどが手軽にできます。
基本的なフォームの制御方法
フォームに入力された文字列を取得する使い方を紹介します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>
<form>
<input id="mytxt" type="text">
<input type="button" value="GetValue">
</form>
</div>
</body>
</html>
|
jQueryは以下のような使い方をします。
|
1
2
3
4
5
6
|
$(function(){
$('input[type="button"]').click(function() {
var result = $('input[type="text"]').val();
console.log(result);
});
});
|
実行結果は以下のようになります。結果はコンソールログに表示されます。
See the Pen
jQuery_entry_form1 by kskumd (@kskumd)
on CodePen.
バリデーションを作りたいとき
フォームにバリデーションを追加するには、専用のライブラリ（jquery.validate.min.js）を使用します。バリデーションライブラリの使い方を紹介します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
</head>
<body>
<div>
<form id="myform">
<input name="mytxt" type="text">
<input type="submit">
</form>
</div>
</body>
</html>
|
jQueryは以下のような使い方をします。
|
1
2
3
4
5
6
7
8
9
10
|
$(function(){
$("#myform").validate({
rules: {
mytxt: {
required: true,
maxlength: 6
}
}
});
});
|
実行結果は以下のようになります。
See the Pen
jQuery_entry_form2 by kskumd (@kskumd)
on CodePen.
JavaScriptでバリデーション（文字数チェック）を実装するには、以下のように記述します。
|
1
2
3
4
|
const name = document.getElementById('ID名').value;
if(ID名.length > 6){
console.log('6文字未満入力してください');
}
|
- プログラマー
- jQueryを使うと、様々な機能を実装するのも便利になるのですね。これから使ってみたいと思います。
- プロジェクト
リーダー - ほかにも機能が簡単に実装できるので、jQueryを使ってWebサイトに豊富な機能を付けていきましょう。
jQueryの使い方を理解しよう
jQueryを利用すると、JavaScriptを利用するよりも簡単に様々な機能が実現できるなど、コード量も少なくできることが分かりました。
Webサイトに様々な機能が付けられるので、jQueryを利用してみてはいかがでしょうか。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
jQueryでCSSのスタイルを変更する方法
Webアプリケーションの見栄えを良くするために使われるCSS。CSSファイルを別に作成して読み込むという方法が一般的ですが、実はjQueryでもCSSを直書きが可能です。 この記事では、サンプルコードを例に挙げながらjQ […]
-
jQuery UIのダウンロードの手順と使い方
「jQuery UI」を利用すると、Webサイトの画面項目に動きを付けることや、画面の見た目がリッチなデザインを作成することができます。 主にカレンダー、アコーディオン、ダイアログ、エフェクトなど、多くの機能が用意されて […]
-
jQueryのタグ追加方法とタグの種類
Webアプリケーションを作成していると、クリック時に入力欄を増やしたり、ユーザーの入力内容によって項目の選択肢を増やしたりなど、HTMLのタグを追加したい場合があります。 jQueryを利用すれば、豊富な種類のタグ追加を […]
-
【2020年1月版】最新のjQueryのバージョンは3.4.1 使い方や注目の機能とは
Web開発でよく利用されるjQueryですが、今回のリリースが3系で最後のバージョンとなるようで話題となっています。 この記事ではjQueryについて、気になるアップデートでの追加機能や、前のバージョンからの変更点を紹介 […]
-
jQueryのアニメーション機能を使ってできること
Webサイトを作成していると、「途中でボックスの色を変えたいな」「ここをフェードインさせたいな」と思うことがあるのではないでしょうか。そこで、ぜひ活用してほしいのがjQueryのアニメーション機能です。「animate関 […]
