Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@rougherina(Aray Eleanor)

9.1 jQueryとは

Last updated at Posted at 2022-09-14

jQueryとは

jQueryはJavaScriptのためのライブラリ1です。jQueryを使用することでシンプルにJavaScriptを記述できるようになり、それまで数十行にわたるコードが必要だった処理もわずか数行で実行できるようになりました。

今回使用するindex.html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <title>9.1 jQueryとは</title>
  </head>
  <body>
    <p id="text1">あいうえお</p>
    <p id="text2">かきくけこ</p>
    <p id="text3">id指定で色を変えます。</p>
    <p class="class1">class指定で色を変えます。</p>
    <span>タグ指定で色を変えます。</span>
    <br />
    <span>タグ指定で色を変えます。</span>
    <br />
    <br />

    <div>
      <button>ボタン</button>
    </div>

    <h3>置換前の文字列です。</h3>
    <h4>置換前の文字列です。</h4>
    <ol id="replace">
      <li>置換リスト１</li>
      <li>置換リスト２</li>
      <li>置換リスト３</li>
    </ol>

    <p class="tel_num">012-3456-7890</p>

    <ul>
      <li>リスト１</li>
      <li>リスト２</li>
      <li>リスト３</li>
    </ul>

    <table border="1">
      <h2>家賃相場</h2>
      <thead>
        <th>地域</th>
        <th>相場</th>
      </thead>
      <tbody>
        <tr>
          <td>東京都江戸川区</td>
          <td class="price">55000円</td>
        </tr>
        <tr>
          <td>東京都中野区</td>
          <td class="price">80000円</td>
        </tr>
        <tr>
          <td>東京都台東区</td>
          <td class="price">150000円</td>
        </tr>
        <tr>
          <td>東京都渋谷区</td>
          <td class="price">250000円</td>
        </tr>
        <tr>
          <td>東京都港区</td>
          <td class="price">300000円</td>
        </tr>
      </tbody>
    </table>

    <script src="./script.js"></script>
  </body>
</html>

jQueryでできること

jQueryのライブラリにはHTMLやCSSの操作に関するコードが多く含まれており、これを使用することで、動的な表現を短いコードで簡単に実装できます。

例

  • クリックすると画像が入れ替わるスライドショー
  • マウスオーバーで色が変わるメニュー、ハンバーガーメニュー
  • サーバ非同期通信（Ajax）2
  • プラグイン的な記述で機能を追加できる
  • フォームの実現（入力チェックやサブミットなど）

これらはほぼJSで実現可能ですが、記述量が膨大になることからjQueryを使用することをお勧めします。

メリット・デメリット

メリット

  1. コード量を短縮できる
    jQueryを使用すると、すべてJavaScriptで記述するよりも短いコード量で済むため、作業量の軽減だけでなく、コードの可読性も高くなります。
    例えば、次のコードはidを指定したHTMLタグに文字列を表示するサンプルです。JavaScriptで書くのに比べ、jQueryでは半分以下の簡単なコードで同じ処理が行なえます。

    // jQueryなしの場合
document.getElementById("text1").innerHTML = "jQueryなしで書き換えました";

// jQueryありの場合
$("#text2").html("jQueryありで書き換えました");

  2. どのブラウザでも使える
    現在使用されている主要なブラウザには、Edge、Chrome、Safari、Firefoxなどがあります。
    JSで独自実装するとブラウザによっては実行できない場合や意図した動作ではないことも多々あります。jQueryはどのブラウザでも同じコードで同様の動作が行なえます。
    ※jQuery内でブラウザに合った実装をすることでブラウザ間の問題を解消していると思います。

デメリット

  1. 処理が遅くなるケースもある
    jQueryはライブラリの読み込みをする必要性があるため、コードが短い場合はjQueryなしのJavaScriptで記述するほうが、ブラウザ上での処理が速くなる場合があります。
    ※jQueryに限らず、ライブラリを使用する際は常に気にした方がいいです。

  2. JavaScriptの理解が疎かになる可能性がある
    jQueryは記述が簡単になる分、JavaScriptの本質が理解しにくくなってしまうため、万一問題が発生した場合の修正対応が難しくなってしまうことがあります。
    jQueryで実装したものがJavaScriptでどのように記述され、処理されるのかを知っておいた方が良いです。

jQueryの読み込み方

jQueryの読み込み方法には、「WEB上から読み込む（CDN）3」「ダウンロードして読み込む」の2種類があります。

  • WEB上から読み込む（CDN）
// jQuery バージョン 3.5.1の場合
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  • ダウンロードして読み込む
// jQuery バージョン 3.5.1の場合
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

以下のサイトに手順が載っています。

jQueryの基本的な記述方法

jQueryの基本構文

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

セレクタにはjQueryの操作対象となるHTMLやCSSの要素を、メソッドには処理内容を記載します。また、さらに具体的で細かな処理を指定する場合はパラメータを使用します。

例えば、Pタグで囲まれた段落全体の色を赤にする場合、次のようになります。

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

セレクタはPタグを指定し、メソッドとしてはcssを変更するcss()を、引数には、文字色である「color」を 「red」に変更するよう記述しています。

①セレクタを選ぶ

操作の対象となるデータを指定するものがセレクタです。CSS同様、特定のidやclassだけを操作の対象として指定することも可能です。

例

// id指定
$('#text3').css('color','red');
// class指定
$('.class1').css('color','green');
// タグ指定
$('span').css('color','orange');

②メソッド（イベント）を指定する

セレクタに対してどのようなイベントを実行するのかを指定します。多く使用されるのは、マウスクリックやフォーム内容の変更、マウスオーバーなど、UIやUXに関係する動作です。
例

// クリックイベント
$("button").click();
// マウスがhoverしたとき
$("button").hover();

③動作を指定する

指定したイベントが発生した場合に実行する動作を指定します。動作の指定には、JavaScriptで無名関数を作成して処理を記述します。
例

// ボタン要素を定義
const button = $("button");
// クリックイベント
button.click(() => {
  alert("ボタンがクリックされました");
});
// ホバーした時の処理
const onHover = () => {
  if(button.css('color') !== 'rgb(255, 0, 0)'){
    button.css('color', 'red');
    button.css('font-weight', 'bold')
  }else{
    button.css('color', 'black');
    button.css('font-weight', 'normal')
  }
};
// マウスがhoverしたとき
button.hover(() => onHover());

よく使うメソッド一覧

replaceWithメソッド

文字列を任意の文字に置換することができるメソッドです。

replaceWithの前に、まずはjs標準のreplaceについて見ていきましょう。
基本構文

対象文字列.replace(置換前の文字列, 置換後の文字列)

置換前の文字列は単純に文字でも正規表現4で複雑な条件を付与することも可能です。

例

const h3 = $("h3").text();
const result = h3.replace("置換前", "置換後");
$("h3").text(result);

次にreplaceWithを見ていきましょう。
基本構文

(置き換え対象).replaceWith(置き換え後の内容)

例

$("h4").replaceWith("<h4>置換後の文字列です。<h4>");
// 関数を使用することもできます。
$("#replace").replaceWith(function (idx, html) {
  console.log(idx);
  console.log(html);
  return $("<ul>", { id: "item" + (idx + 1), html: html }).add(
    "<p>選択肢の数は" + $(this).children("li").length + "個です</p>"
  );
});

正規表現を使用した置換

例

const telNum = $(".tel_num");
telNum.text(telNum.text().replace(/^([0-9]{3}-[0-9]{4})-[0-9]{4}$/, "$1-****"));

正規表現を表すのは上記例のスラッシュで囲われた部分です。以下よく使う正規表現で意味のある文字です。
他にもありますので困ったときは調べましょう。※覚えなくても大丈夫です。ググればOK。

  • ^　最初
  • $　最後
  • .　任意の1文字
  • *　直前の文字が0回以上繰り返す
  • +　直前の文字が1回以上繰り返す
  • []　[]内のいずれか1文字と一致
  • [^]　[^]内の文字以外と一致

eachメソッド

複数の要素の集まりに対して指定した処理を行うためのメソッドです。

HTML要素に対して繰り返し処理を行う方法

基本構文

HTML要素.each(function(添字,要素) {
  //繰り返し処理を記述する
})

例

// eachメソッド
$("li").each(function (index, element) {
  console.log(index);
  console.log($(element).text());
});

// eachメソッドを使わずfor文を使用
for (element of $("li")) {
  console.log($(element).text());
}

上記例は、リスト要素に対して1つずつの添字とテキストを出力しています。eachに設定した関数の引数「element」には、取得したHTML要素が格納されているので「$(element)」とすればリスト要素を取得できます。

配列・オブジェクトに対して繰り返し処理を行う方法

基本構文

$.each(配列・オブジェクト, function(添字, 要素) { 
  //繰り返し処理を記述する
})

例

// 配列の場合
const array = ["test1", "test2", "test3", "test4"];
$.each(array, function (index, value) {
  //繰り返し処理を記述する
  console.log(`${index}：${value}`);
});
// オブジェクトの場合
const obj = {
  name: "taro",
  age: "20",
  area: "Tokyo",
};
$.each(obj, (key, value) => {
  //繰り返し処理を記述する
  console.log(`${key}：${value}`);
});

繰り返し処理を途中で中断やスキップする方法

途中で中断する場合は、each処理内でreturn falseと記述する。
また、スキップしたい場合はreturn trueと記述する。

例

script

$(".price").each(function () {
  const price = $(this).text().replace("円", "");
  console.log(price);
  // // 途中で中断する場合
  // if (price > 100000) return false;
  // // 途中でスキップする場合
  // if (price > 100000) return true;
  var html = $(this)
    .html()
    .replace(/([0-9])/g, "<b>$1</b>");
  $(this).html(html);
});

参考

  1. ある特定の機能を持つプログラムを、他のプログラムから引用できる形にして、それを複数集めて一つのファイルにまとめたものです。 ライブラリ単体では実行することはできず、他のプログラムの一部（部品）として、動作します。 ↩

  2. 2人以上の通信者の間で、それぞれが都合の良いタイミングでメッセージを受信し処理する通信方式です。 受信者は、受信直後に処理をする必要はありません。
    https://wa3.i-3-i.info/word1624.html ↩

  3. Content Delivery Networkの略で、「コンテンツ配信ネットワーク」の意味。インターネット上にキャッシュサーバーを分散配置し、エンドユーザーに最も近い経路にあるキャッシュサーバーから画像や動画などのWebコンテンツを配信する仕組みのこと。 ↩

  4. ある特定のパターンを持つ文字列を指定する表記法の一つ。文字列の検索や置換、抽出などを行う際の対象の指定などのために用いられる。
    https://wa3.i-3-i.info/word11309.html
    https://job-support.ne.jp/blog/java/basic-regular-expression ↩

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?