jQueryとは？CDNや基本操作など【令和版jQuery入門】

jQuery

jQueryについて、下記のことについて書いています。

・jQueryとは？
・jQueryの基本的な使い方
・jQueryの基本操作

個人的にはquerySelectorが出てきてから、ネイティブだけで書くことも増えて
ReactやVueなどのライブラリを使うことが多いので、めっきり使う頻度が減った気がします。

ですが、現行で動いているサイトの改修だったり、シンプルなページ構成などのときには便利だったりで触れることもあるのではないでしょうか。
今回は令和版ということで、jQueryについて見直してみました。

jQueryとは？

jQueryは、JavaScriptのライブラリのひとつであり、HTMLの操作・イベントの処理・アニメーションの実装・AJAXの簡素化など、Web開発をより簡単に行うためのライブラリです。
2006年にJohn Resigさんによってリリースされました。

jQueryの基本的な使い方

jQueryを使うには、まずHTMLドキュメントにjQueryライブラリを読み込む必要があります。
これは、CDN（Content Delivery Network）を使用して簡単に行うことができます。

jQueryのCDNを使用する

CDNを使用すると、jQueryのライブラリを外部のサーバーから読み込むことができます。
以下は、GoogleのCDNを使用してjQueryを読み込む例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery入門</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<h1>jQueryの基本</h1>
<p id="message">Hello, jQuery!</p>

<script>
    $(function() {
        // jQueryを使って#messageのテキストを変更
        $("#message").text("jQueryが動作しています！");
    });
</script>

</body>
</html>

上記のコードでは、HTMLドキュメントの<head>セクションにjQueryライブラリを読み込むための<script>タグを追加しています。
これにより、jQueryのファイルが読み込まれて、機能を使用する準備が整います。

HTMLの解説

このHTMLコードは、jQueryが読み込まれたかテストするためのものです。

<head>セクションには、メタデータやページタイトル、jQueryライブラリを読み込むための<script>タグがあります。
<script>タグのsrc属性にjQueryライブラリまでのURLを書くことで、jQueryが読み込まれて使うことができるようになります。

<body>セクションには、見出し要素<h1>と、id属性を持つ段落要素<p id="message">があります。
今回は、この<p>タグ内の内容を書き換えて、jQueryが動作するか確認しています。

最後の<script>タグ内のコードは、jQueryを使用してページが読み込まれた後に実行される処理を定義しています。

jQueryの解説

「$(function() {...});」は、jQueryの基本的な書き方の一つで、DOMが完全に読み込まれた後に実行される関数を定義します。
「$("#message").text("jQueryが動作しています！");」は、id属性がmessageのHTML要素を選択し、そのテキスト内容を「jQueryが動作しています！」に変更するという処理です。

$("#message")で<p>タグの要素を選択して、textメソッドで渡した内容で書き換えています。

動作確認

実際に動作を確認すると、下記のようにCDNでjQueryライブラリが読み込めて、メッセージが変更されることが確認できました。
jQueryのCDN動作を確認する

jQueryのライブラリファイルをローカルで利用する

jQueryのライブラリファイルをローカルのパソコンにダウンロードして使用することもできます。
まず、jQueryの公式サイトからライブラリファイル（例：jquery-3.7.1.min.js）をダウンロードします。

その後、HTMLファイルと同じディレクトリに保存し、以下のように<script>タグを更新します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery入門</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>

<h1>jQueryの基本</h1>
<p id="message">Hello, jQuery!</p>

<script>
    $(function() {
        // jQueryを使って#messageのテキストを変更
        $("#message").text("jQueryが動作しています！");
    });
</script>

</body>
</html>

これにより、jQueryのライブラリをローカルから読み込むことができます。
この例だと、jQueryファイル(jquery-3.7.1.min.js)のファイルの場所を、HTMLと同じ場所に置かないと動かないので注意してください。

動かすと、先ほどと同じようにjQueryライブラリが読み込まれて、「Hello, jQuery!」が「jQueryが動作しています！」に書き変わっていることが確認できます。

jQueryの基本操作

以下に、いくつかの基本的なjQueryの操作例を示します。

HTML要素の選択

$(document).ready(function() {
    // id属性がmessageの要素を選択
    $("#message").text("新しいメッセージです！");
});

解説

このコードは、先ほどと同様になりますが、id属性がmessageのHTML要素を選択し、そのテキストを「新しいメッセージです！」に変更します。

「$(document).ready(function() {...});」は、ドキュメントが完全に読み込まれた後に実行される関数を定義します。
先ほどは「$(function() {...});」と書いていましたが、このように書くことも可能です。

「#」がid属性を指していて、#messageで「id="message"」の要素が取得できます。

イベントの処理

$(document).ready(function() {
    // ボタンがクリックされたときのイベントを処理
    $("button").click(function() {
        alert("ボタンがクリックされました！");
    });
});

解説

このコードは、ページ内のすべての<button>要素にクリックイベントハンドラを追加します。
ボタンがクリックされると、アラートが表示されます。

$("button").click(function() {...});は、<button>要素に対してクリックイベントをバインドします。
処理されるのはclickメソッドに渡している関数の内容です。

アニメーションの追加

$(document).ready(function() {
    // 要素をフェードインさせる
    $("#message").fadeIn("slow");
});

解説

このコードは、id属性がmessageのHTML要素をゆっくりとフェードインさせます。
「$("#message").fadeIn("slow");」は、指定した要素に対してフェードインアニメーションを適用します。

これで、最初にdisplay:noneで非表示にしていた要素はフェードインして表示されます。

ajaxの使用

$(document).ready(function() {
    // 非同期でデータを取得して表示
    $.ajax({
        url: "https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060",
        success: function(result) {
            $("#message").text(result);
        }
    });
});

解説

このコードは、指定したURLからデータを非同期で取得し、その結果をid属性がmessageのHTML要素に表示します。
「$.ajax({...});」は、ajaxリクエストを送信するためのjQueryメソッドで、urlプロパティで指定したエンドポイントからデータを取得します。

そして、successプロパティに指定した関数でその結果を処理します。

まとめ

今回はjQuery入門ということで、久しぶりにjQueryに触れていきました。
jQueryの概要や、CDN・ローカルで使う方法を確認しました。

コメント

タイトルとURLをコピーしました