jQueryを使ってみよう！

jQueryを教えないスクールも増えてきましたね。JavaScript（特にECMAScript）の進化が大きく関係しているかと思います。

jQueryが使われなくなってきた理由

querySelectorやquerySelectorAllなど、DOM操作メソッドが標準でサポートされ、jQueryのようにDOMを簡単に操作できるようになりました。

addEventListenerが標準的に使われ、jQueryを使わなくてもイベント処理が簡単になりました。

他にも、fetch APIのように非同期通信が標準化され、AJAXリクエストを送るためにjQueryを$.ajax()を使う必要もなくなりました。

Promiseやasync/awaitのように、非同期通信を簡潔に書けるようになったため、jQueryが提供していた非同期処理のサポート（$.Deferredなど）を使う必要がなくなりました。

また、モダンなJavaScriptフレームワーク（React、Vue.js、Angularなど）の普及により、DOM操作やイベント処理をjQueryで行う必要性が減少しました。これらのフレームワークは、ビューの更新や状態管理、コンポーネントベースの開発を強力にサポートしており、jQueryよりも効率的にアプリケーションを構築できます。

jQueryを学ぶメリット

多くの既存のWebサイトが今でもjQueryを使っています。jQueryの知識があると、こういった既存のサイトをメンテナンスするのに役に立ちます。

jQueryは学習がしやすいという特徴もあります。数行のコードでアニメーションやDOM操作を行ったりできますし、スライドショーを設置するSlickなど、多くのプラグインがあります。

JQueryを使用する為の準備

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

方法があります。

ダウンロードして使う

https://jquery.com/

「Download jQuery」からダウンロードして使いましょう。

CDNを使う

https://releases.jquery.com/

公式サイトのCDNページから使いたいCDNのリンクをコピーして使いましょう。

基本的には、3系（jQuery 3.x）の圧縮されたminifiedで良いでしょう。

JQueryをHTMLで読み込む

<head>タグに記述しましょう。※deferを忘れずに！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQueryの読み込み例</title>
  
  <!-- CDN経由でjQueryを読み込む -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" 
          integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 
          crossorigin="anonymous" defer></script>

  <!-- 自分で作成したJavaScriptファイルを読み込む -->
  <script src="./js/myScript.js" defer></script>
</head>
<body>
  <header>
    <!-- ここにヘッダー内容 -->
  </header>
  
  <main>
    <!-- メインコンテンツ -->
  </main>

  <footer>
    <!-- ここにフッター内容 -->
  </footer>
</body>
</html>

古い手法で、deferを使わない場合は、<body>タグの閉じタグ </body> の直前で読み込みましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQueryの読み込み例</title>
  
  <!-- CDN経由でjQueryを読み込む -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" 
          integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 
          crossorigin="anonymous"></script>
</head>
<body>
  <header>
    <!-- ここにヘッダー内容 -->
  </header>
  
  <main>
    <!-- メインコンテンツ -->
  </main>

  <footer>
    <!-- ここにフッター内容 -->
  </footer>

  <!-- 自分で作成したJavaScriptファイルを読み込む -->
  <script src="./js/myScript.js"></script>
</body>
</html>

どちらも動作は同じなのですが、deferを使う方が<head>内でスクリプトがまとめることが出来るので好きです。

（ソースの上にいったり下にいったりする手間がなくなる）

ダウンロードして使う場合は、ファイルのパスを指定してあげましょう。

自分で作ったJSファイルは、jQueryのファイルより後に読んで欲しいので、jQueryを読み込むコードの下に書きましょう。

jQueryの使い方

例えば、JavaScriptで、「対象のDOM要素を取得し、テキストと背景色を変更する」場合、

  <div id="example">サンプルテキスト</div>
  
  <script>
    // JavaScript (querySelector) を使用してDOM要素を取得
    const element = document.querySelector("#example");

    // テキストを変更
    element.textContent = "変更されたテキスト";

    // 背景色を変更
    element.style.backgroundColor = "yellow";
  </script>

のようになります。

これをjQueryで書くと

  <div id="example">サンプルテキスト</div>
  
  <script>
    // jQuery ($) を使用してDOM要素を取得
    const $element = $("#example");

    // テキストを変更
    $element.text("変更されたテキスト");

    // 背景色を変更
    $element.css("background-color", "yellow");
  </script>

のようになります。

処理の流れは、

$("#example") のように、idがexampleの要素を$()でjQueryオブジェクトに変換します。
.text("変更されたテキスト") でテキストを変更します。
.css("background-color", "yellow") で背景色を変えます。

このように、$()でjQueryオブジェクトに変更することで、メソッドと言うのですが、便利な処理を行うことができますね。メソッドは、.(ドット)で繋いでいます。

チェーンメソッドと言い、下記のように1行で書くこともできます。

const $element = $("#example");
$element.text("新しいテキスト").css("color", "red").hide();

JavaScriptではチェーンメソッドが使えず、一つ一つ操作しないといけないですね。

const element = document.querySelector("#example");
element.textContent = "新しいテキスト";
element.style.color = "red";
element.style.display = "none";

jQueryの便利なメソッドは、以下のサイトが参考になります。

https://pengi-n.co.jp/column/design/jquery-introduction/

💡使う時に調べたら良いので、覚えなくてOKです👍

$()

$()はjQuery()の省略形であり、jQuery関数そのものを短縮した形として使われます。

$("div") で、すべてのdiv要素を取得し、jQueryオブジェクトに変換します。
変換してくれるので、チェーンメソッドで要素に対して多くの便利なメソッド（css()、html()、on()など）を使用して操作できる強力なツールです。
ブラウザの互換性なども考慮してくれています。

// jQueryオブジェクトを使って、要素に複数の操作をチェーンで行う
$("div")
  .css("color", "red")   // 文字色を赤に
  .hide()                // 要素を非表示
  .fadeIn(1000);         // 1秒かけてフェードイン

このコードでは、$("div")で選択したすべてのdiv要素に対して、文字色を赤にし、要素を一度非表示にして、1秒かけてフェードインで再表示しています。jQueryオブジェクトでは、複数の操作をチェーンメソッドで続けて記述できるため、非常に効率的にDOMを操作できます。

また、$()を使って取得した要素に対して、簡単にイベントハンドラを追加することも可能です。たとえば、ボタンがクリックされたときに処理を行う場合、$("button").click(function() {...})のように書くだけでイベントを設定できます。

例: クリックイベントの設定

$("button").click(function() {
    alert("ボタンがクリックされました！");
});

このコードでは、ページ内のbutton要素に対してクリックイベントを設定しています。$("button")でボタンを選択し、その要素に対して.click()メソッドでクリック時の処理を指定しています。

Web