メニュー

【初心者向け】jQueryの使い方

WEB
当ページのリンクには広告が含まれています。
  • URLをコピーしました！
生徒

JQueryではどんなことができますか？

先生

JQueryの使い方やできることを説明します

この記事で分かること
  • JQueryの使い方と基本的な使い方
目次

JQueryを使用することについて

ReactやVue.jsといったJQueryよりも洗練されたライブラリが出てきていたり、Javascriptがバージョンアップによって機能が向上してきていることから、脱JQueryとも言われていますが、以下のようなメリットもあり、まだ幅広く使われています。

  • ReactやVue.jsに比べて学習コストが低い
  • 今でも数十パーセントのシェアがあり当面無くなりそうにない
  • 大規模で高機能なサイトでない限りJQueryの機能で十分な場合が多い

WEBアプリの制作の場合は、ReactやVue.jsなどを選択した方がよいと思います。

JQueryの特徴

JQueryを利用することで以下のメリットがあります。

  • 多彩なプラグインがあり、複雑な機能も簡単に実装することができる
  • 多くの関数が用意されていて、素のJavascriptよりも処理を簡単に書くことができる
  • かなり以前から多くの場所で使われている技術のため、ネットに情報が多い

JQueryのデメリットとしては以下の点があります。

  • JQuery以外のライブラリと同時に使用できないものが多い
  • 素のJavascriptよりも処理が多少遅くなる
  • 使用するプラグインが多いと読み込みサイズが大きくなる

最近のネット環境やスマホやパソコンの性能においては、いずれもそれ程ネックとならない場合がほとんどだと思いますので、JQueryのメリットを活かして理容するのは今でもありだと思います。

JQueryの使い方

JQueryを使用する方法には以下の2つがあります。

  • インターネット上に公開されているJQueryファイル（CDN）のリンクを記述して読み込む
  • JQueryをダウンロードしてきて自分のサーバーにアップして、そのファイルを読み込む

上のCDNのリンクを利用する方法の方が簡単ですが、下の自分のサーバーにアップする方法の方が速度や障害の影響が少なくて済むメリットがあります。

サイト制作を請け負って納品する場合は、他のサイトに依存しない下の方法で対応する方がよいと思います。

JQueryファイルのリンクを利用する場合

JQueryのリンクを取得する

JQueryの公式サイトにもCDNとして利用できるリンクが公開されています。

あわせて読みたい
jQuery CDN Worldwide distribution of jQuery releases.

利用したいJQueryのバージョンのリンクをクリックします。

利用したいJQueryのプラグインがあり、そのプラグインがJQuery2系の使用を条件としている場合はJQuery 2.xのリンクを使用しますが、そうでなければJQuery 3.xのリンクを使用します。

各リンクの意味は以下になります。

uncompressed通常の（人が読んで理解できる）ファイル
minifiedサイズを最小化することに特化したファイル（人が読むのは困難）
slim非推奨の内容は省いたファイル
slim minifiedslimの内容を最小化したファイル

通常は一番効率のよいminifiedを使用します。

minifiedのリンクをクリックすると、JQueryのリンクが表示されるのでそれをクリップボードにコピーします。

WEBページにリンクを貼り付ける

JQueryを利用するWEBページのHTMLファイル内にリンクを貼り付けます。

<head>
    <title>JQueryを利用するページ</title>
</head>
<body>
    //ページ内にJQueryのリンクを貼り付けます
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"
            integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
             crossorigin="anonymous"></script>
    //JQueryを使用するJavascriptを読み込みます
    <script src="/js/myscript.js"></script>
</body>

JQueryを自分のサーバーにアップして使用する場合

JQueryをダウンロードする

JQuery公式サイトのダウンロードページ（https://jquery.com/download/）にアクセスします。

一番上のDownload the compressed production jQuery のリンクを右クリックしてリンク先をファイルに保存します。

下の画像はブラウザがChromeの場合で、ブラウザによってメニューの内容は異なります。

自分のサーバーにアップしする

ダウンロードしたjQueryのファイルをサーバーにアップロードします。

アップロードの手順は利用サービスなどによって異なりますので、この記事では省略します。

アップロードしたjQueryファイルをWEBページで読み込む

JQueryを利用するWEBページのHTMLファイル内にリンクを貼り付けます。

<head>
    <title>JQueryを利用するページ</title>
</head>
<body>
    // サーバーにアップしたファイルを読み込む場合
    <script src="/js/jquery-3.6.3.min.js"></script>
    //JQueryを使用するJavascriptを読み込みます
    <script src="/js/myscript.js"></script>
</body>

JQueryを読み込む位置

JQueryを使用する時は、必ずJQueryファイルを自作のJavascriptファイルより前に読み込む必要があります。

そうしないと、自作のJavascriptファイル内に書かれているJQueryの処理が動作しないためです。

ページのheadタグ内で読み込む

headタグ内にjQueryファイルの読み込みを記述します。

<html>
  <head>
    <title>ページのタイトル</title>
    //headタグ内でjQueryを読み込む
    // リンクで読み込む場合
    <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
    // サーバーにアップしたファイルを読み込む場合
    <script src="/js/jquery-3.6.3.min.js"></script>
  </head>
</html>
  • ページ内容を読み込む前に確実にjQueryの読込みが完了している
  • ページ内容の読み込み完了までにjQueryを読み込むための待ち時間が発生する

bodyの閉じタグの直前で読み込む

bodyタグ内容の最後（ページ内容の最後）でjQueryを読み込みます。

<html>
  <head>
    <title>ページのタイトル</title>
  </head>
  <body>
    <h1>ページの内容</h1>
    //bodyの閉じタグの直前でjQueryを読み込む
    // リンクで読み込む場合
    <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
    // サーバーにアップしたファイルを読み込む場合
    <script src="/js/jquery-3.6.3.min.js"></script>
  </body>
</html>
  • ページのHTMLを先に読み込むため、ページ内容表示までの待ち時間が無い
  • HTML読み込み後にjQueryの読み込みが行われるため、処理によっては表示が不安定になる

プラグインによっては動作が不安定になる場合があります。

JQueryの書き方の基本

JQueryは$を用いて使用する

たとえば、HTMLの要素に設定されているCSSの値を取得する場合、Javascriptでは以下のように書きます。

// id="sample"の要素を取得する
let element = document.querySelector('#sample');
// 要素に適用されているCSSのスタイルを取得する
let style = window.getComputedStyle(element);
// colorプロパティの値を取得する
let val = style.getPropertyValue('color');

同じことをJQueryで行う場合$を用いて以下のように書きます。

//JQueryで上と全く同じことを行うと以下になります
let val = $('#sample').css('color');

JavaScriptでは大文字と小文字は区別されるので、関数名や変数名など小文字と大文字を区別して書く必要があります。

$ではなくJQueryと書くこともできる

$はJQueryの省略形でどちらの書き方でも同じですが、WordPressでJQueryを使用する場合のように、他のライブラリなどの影響で$が使用できない場合以外はたいてい$を使います。

//以下の2行は全く同じです
$("#target").show();
JQuery("#target").show();

JQueryの基本的な書き方

処理の基本的な書き方

jQueryの処理は以下のように書きます。

$(セレクタ).メソッド

HTMLの読み込み後に行う処理の書き方

jQueryの処理には、HTMLの内容（DOM）を読み込んだ後でないと動作しないものも多いです。

HTML読み込み後に行う処理は以下のように記述します。

//HTMLの読み込み後に行いたい処理は以下のように書きます
$(document).ready(function(){
 //ここに処理を書く
});

//以下の省略形でも動作は同じです
$(function(){
 //ここに処理を書く
});

JQueryでのセレクタ

JQueryで一番使用するのは、ページ内の要素にアクセスするセレクタです。

JQueryを使用することで普通のJavascriptよりも簡単に、ページ内の要素にアクセスすることができます。

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

JQueryでの値の取得と設定

JQueryで値を取得するにはval()関数を使用します。

val関数は、要素のvalue属性の値を取得、設定します。

引数なしのval()関数は値を取得します

$("p").val();

引数を指定したval(引数)関数は値を設定します

$("p").val("テキスト");

JQueryのメソッド

  • 要素の追加や削除、表示と非表示の切り替えなどの操作
  • CSSの操作（見た目の変更など）
  • クリックなどのイベント時の動作の定義
  • アニメーション効果の作成
WEB
よかったらシェアしてね！
  • URLをコピーしました！
目次