jQueryの使い方とは？覚えておきたい基本事項やサンプルを紹介

jQuery

Javascript
プログラミング言語

公開日時: 2019-10-09 　更新日時: 2022-06-08

この記事でわかること

プログラマー: 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要素を指定する処理です。以下のような使い方をします。

<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>

<html>

<head>

</head>

<body>

<div>

</div>

</body>

</html>

</pre>

jQueryは以下のような使い方をします。$の中に記述するのがセレクタです。

$(function(){
  // p要素に対して何かのメソッドを実行
  $('p').何かのメソッド();
});

$(function(){

// p要素に対して何かのメソッドを実行

$('p').何かのメソッド();

});

2：よく使うメソッドとは

jQueryでよく使うメソッドの使い方を紹介します。ここでは、以下の3つのメソッドを紹介します。先ほどのHTMLに対してjQueryを記述してみてください。

- append

要素を追加するにはappendメソッドを使用します。使い方は以下の通りです。

$(function(){
  $('p').append(' append string');
});

$(function(){

$('p').append(' append string');

});

- css

CSSを書き換えるにはcssメソッドを使用します。使い方は以下の通りです。

$(function(){
  $('p').css("color","red");
});

$(function(){

$('p').css("color","red");

});

- text

文字列を書き換えるにはtextメソッドを使用します。使い方は以下の通りです。

$(function(){
  $('p').text("mod text");
});

$(function(){

$('p').text("mod text");

});

3：イベントを使うときのメソッド

jQueryでイベントを扱う方法を紹介します。

click

<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>

<html>

<head>

</head>

<body>

<div>

<p>click me!</p>

</div>

</body>

</html>

jQueryは以下のような使い方をします。

$(function(){
  $('p').click(function(){
    $('p').text('clickしました。');
  });
});

$(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ファイルをダウンロードする必要がありません。

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

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タグ内に記述します。

<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>

<html>

<head>

</head>

<body>

<div>

</div>

</body>

</html>

2：ダウンロードする場合は記載前にjQueryファイルをアップする

ダウンロードする場合は記載前にjQueryファイルをアップして、headタグ内に記述します。

<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>

<html>

<head>

</head>

<body>

<div>

</div>

</body>

</html>

3：WordPressで記述する場合

WordPressでjQueryを記述するには、以下のように記述します。

jQuery(function(){
  // ロジックを記述
});

jQuery(function(){

// ロジックを記述

});

jQueryはバージョンによって使える機能に違いがあります。対応しているjQueryに変更する必要があるため、注意してください。

3：基本構文について

jQueryの基本構文の使い方を紹介します。以下のように記述します。

$(function(){
  // ここに処理を書いていきます。
});

$(function(){

// ここに処理を書いていきます。

});

基本構文の使い方をマスターして応用してください。

4：はじめに記述するコード

jQueryを使用することで動きのあるページにできます。ここでは、フェードイン／フェードアウトをトグルするメソッドを使ってみます。

<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>

<html>

<head>

</head>

<body>

<div>

<button>Click me!</button>

<p>fadeToggle</p>

</div>

</body>

</html>

jQueryは以下のような使い方をします。

$(function(){
  $('button').click(function(){
    $('p').fadeToggle();
  });
});

$(function(){

$('button').click(function(){

$('p').fadeToggle();

});

実行結果は以下のようになります。

See the Pen
jQuery_entry_first by kskumd (@kskumd)
on CodePen.

jQueryを使用するとできること5選

jQueryには主に以下のような機能があります。

・アニメーションを付ける
・ブラウザ上の要素を動かす
・ブラウザ上の要素を動的に変更する
・入力項目の入力チェックを行う
これらの機能が簡単に実現できて、なおかつコード量も少なくできます。

1：特定の要素を非表示にする方法

特定の要素を非表示にするにはhideメソッドを使用します。

<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>

<html>

<head>

</head>

<body>

<div>

<button>Click me!</button>

</div>

</body>

</html>

jQueryは以下のような使い方をします。

$(function(){
  $('button').click(function(){
    $('p').hide();
  });
});

$(function(){

$('button').click(function(){

$('p').hide();

});

実行結果は以下のようになります。

See the Pen
jQuery_entry_hide by kskumd (@kskumd)
on CodePen.

2：モーダルウィンドウを表示する方法

モーダルウィンドウを表示するには、専用のライブラリを使用します。headタグ内にCDNを記述します。使い方を紹介します。

<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>

<html>

<head>

</head>

<body>

<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というライブラリを利用します。遅延読み込みを行ってくれるライブラリです。遅延読み込みとは、画像を一度にすべて読み込まずに、必要に応じて読み込む仕組みです。

これにより画像の読み込み速度を向上できます。使い方を紹介します。

<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>

<html>

<head>

</head>

<body>

</body>

</html>

jQueryは以下のような使い方をします。

$(function(){
  $("img.lazyload").lazyload();
});

$(function(){

$("img.lazyload").lazyload();

});

実行結果は以下のようになります。

See the Pen
jQuery_entry_lazyload by kskumd (@kskumd)
on CodePen.

4：h1要素のテキストを動的に変更したいとき

h1要素のテキストを動的に変更するにはtextメソッドを使用します。

<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>

<html>

<head>

</head>

<body>

<div>

<button>Click me!</button>

<h1>title</h1>

</div>

</body>

</html>

jQueryは以下のような使い方をします。

$(function(){
  $('button').click(function(){
    $('h1').text("changed title");
  });
});

$(function(){

$('button').click(function(){

$('h1').text("changed title");

});

実行結果は以下のようになります。

See the Pen
jQuery_entry_text by kskumd (@kskumd)
on CodePen.

5：テキストの色を変更したいとき

テキストの色を変更するには、CSSを書き換えます。cssメソッドを使用します。

<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>

<html>

<head>

</head>

<body>

<div>

<button>Click me!</button>

</div>

</body>

</html>

jQueryは以下のように記述します。

$(function(){
  $('button').click(function(){
    $('p').css("color","red");
  });
});

$(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を書き換えます。

<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>

<html>

<head>

</head>

<body>

<div>

<button>Click me!</button>

</div>

</body>

</html>

jQueryは以下のような使い方をします。

$(function(){
  $('button').click(function(){
    $('p').css("fontSize","2.875em"); 
  });
});

$(function(){

$('button').click(function(){

$('p').css("fontSize","2.875em");

});

実行結果は以下のようになります。

See the Pen
jQuery_entry_font by kskumd (@kskumd)
on CodePen.

2：CSSを書き換えたいとき

JavaScriptでCSSを書き換えたい場合は、以下のように記述します。

documents.getElementById("id").style.fontSize = "10px";

1	documents.getElementById("id").style.fontSize = "10px";

jQueryでCSSを書き換えることで、文字の色やフォントサイズを変更できます。上記の章で紹介していますので、ここでは使い方は省略します。

3：フォームを制御したいとき

フォームの使い方を紹介します。ここでは、
・基本的なフォームの制御方法
・バリデーションを作りたいとき
について紹介します。
使い方をマスターすることで、フォームで入力した値を取得したり、入力チェックなどが手軽にできます。

基本的なフォームの制御方法

フォームに入力された文字列を取得する使い方を紹介します。

<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>

<html>

<head>

</head>

<body>

<div>

<form>

</form>

</div>

</body>

</html>

jQueryは以下のような使い方をします。

$(function(){
  $('input[type="button"]').click(function() {
    var result = $('input[type="text"]').val();
    console.log(result);
  });
});

$(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）を使用します。バリデーションライブラリの使い方を紹介します。

<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>

<html>

<head>

</head>

<body>

<div>

</form>

</div>

</body>

</html>

jQueryは以下のような使い方をします。

$(function(){
  $("#myform").validate({
    rules: {
      mytxt: {
        required: true,
        maxlength: 6
      }
    }
  });
});

$(function(){

$("#myform").validate({

rules: {

mytxt: {

required: true,

maxlength: 6

}

});

実行結果は以下のようになります。

See the Pen
jQuery_entry_form2 by kskumd (@kskumd)
on CodePen.

JavaScriptでバリデーション（文字数チェック）を実装するには、以下のように記述します。

  const name = document.getElementById('ID名').value;
  if(ID名.length > 6){
    console.log('6文字未満入力してください'); 
  }

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。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

jQueryの使い方とは？覚えておきたい基本事項やサンプルを紹介

jQueryのメリット4つ

1：コード量を少なくできる

2：多くの機能がある

3：保守性の高いコードを作成できる

4：利用者が多い

jQueryで覚えておきたい基本事項3つ

1：セレクタとは

2：よく使うメソッドとは

3：イベントを使うときのメソッド

jQueryの使い方ガイド4STEP

1：jQueryの導入手順

CDNで配布元に公開されたファイルを使う場合

ダウンロードしてサーバーに直接アップする場合

2：記述場所3つ

1：HTMLのhead内に記載すること

2：ダウンロードする場合は記載前にjQueryファイルをアップする

3：WordPressで記述する場合

3：基本構文について

4：はじめに記述するコード

jQueryを使用するとできること5選

1：特定の要素を非表示にする方法

2：モーダルウィンドウを表示する方法

3：画像の読み込み速度を向上する方法

4：h1要素のテキストを動的に変更したいとき

5：テキストの色を変更したいとき

jQueryを使ったサンプル3つ

1：ボタンでフォントサイズを変えたいとき

2：CSSを書き換えたいとき

3：フォームを制御したいとき

基本的なフォームの制御方法

バリデーションを作りたいとき

jQueryの使い方を理解しよう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

jQueryでCSSのスタイルを変更する方法

jQuery UIのダウンロードの手順と使い方

jQueryのタグ追加方法とタグの種類

【2020年1月版】最新のjQueryのバージョンは3.4.1 使い方や注目の機能とは

jQueryのアニメーション機能を使ってできること