jQueryの使い方【1分でjQueryを始める方法】

jQueryの使い方

jQueryとは

JavaScriptのライブラリです。JavaScriptで一から自分で記述するよりも簡素にできたり、便利な機能が含まれています。

たった1分で使い始めることができる

後で詳しく紹介しますが、CDN(Content Delivery Network)を使えば1分ほどでjQueryを使い始めることができます。

CDNを利用してjQueryを使う方法はこちら

jQueryを使用するメリット

jQueryを使用すると以下のようなメリットがあります。

  • 記述を簡略化できる
  • 便利な機能が実装されている
  • ブラウザによる挙動の違いを吸収してくれる
  • ネットで情報を得やすい

記述を簡略化できる

JavaScriptではDOMの操作をする場面が度々あります。要素を指定するメソッドが長くて記述するのが面倒ですが、jQueryを使えば短い表現で済ませることができます。

例えば、pタグを取得したいときにJavaScriptだと

document.getElementsByTagName('p')

となりますが、jQueryなら

$('p')

で済んでしまいます。上の例はごく単純なものですが、「フォーム内でチェックされているラジオボタンの値を取得する」といったように条件が複雑になるほどjQueryの記述方法が力を発揮します。

CSSのセレクタに似ているので、エンジニアだけでなくデザイナーの方でも使いやすいライブラリです。

ぶっちゃけJavaScriptに関しては基本的な部分だけ抑えて、jQueryを覚えていったほうが効率的です。

便利な機能が実装されている

jQueryにはエフェクトやアニメーション、Ajaxなど便利な機能が含まれています。

例えば、Q&Aのコンテンツを作る際に、質問だけ表示しておいて応えは隠しておき、タップ(クリック)すると応えが表示されるといったことが簡単に実装できます。

またAjaxを一から実装しようとすると、かなり面倒なことになると想像できますが、jQueryならすでにメソッドが用意されているのでそれを利用するだけで済みます。

ブラウザによる挙動の違いを吸収してくれる

JavaScriptはブラウザにより挙動が異なる場合があります。

そのため公開するサービスを作るときは、複数のブラウザでテストしなければならないので大変です。

しかしjQueryを使うとそれらの差異を吸収してくれるので、ブラウザ環境の違いを気にすることなく記述できます。

ネットで情報を得やすい

jQueryはその使いやすさから利用する方が多く、ネットで調べると情報を得やすいです。

簡単に情報が得られると学習も進めやすくなるので重要なポイントです。

特に初心者の方は何を調べれば良いのか分からないということも多いでしょう。

ネット上に情報が多ければ検索したときに様々なキーワードでヒットするので調べやすくなります。

jQueryの始め方・導入方法

jQueryを使うには2つの方法があります。

  • サーバーにアップロードしたjQueryのファイルを読み込む
  • CDNからjQueryのファイルを読み込む

おすすめはCDNから読み込む方法です。それぞれについて詳しく説明します。

サーバーにアップロードしたjQueryのファイルを読み込む

サーバーにアップロードする場合の手順は以下のようになります。

サーバーにアップロードして読み込む方法
  1. 公式サイトからjQueryの本体ファイルをダウンロードする
  2. jQueryの本体ファイルを自分のサーバーにアップロードする
  3. 自分のサイトからjQueryの本体ファイルを読み込む

順番に詳しく紹介します。

jQueryの公式サイト(https://jquery.com/)へ行きます。

jQuery公式サイト

「Download」というリンク、もしくは「Download jQuery」というボタンをクリックします。

jQueryをダウンロード

「Download the compressed, production jQuery ○○」というリンクがあるので、右クリックしてリンク先を保存します。(○○という部分は最新のバージョンになっています。)

上の画像の場合はバージョン3.5.1なので、「jquery-3.5.1.min.js」というファイルがダウンロードされます。

このファイルをサーバーにアップロードします。

アップロードし終わったらHTMLファイルのheaderタグかbodyタグの中に次の一行を追加するとjQueryを利用できるようになります。

jQueryを読み込む
<script src="/js/jquery-3.5.1.min.js"></script>

srcはファイルをアップロードした場所を指定してください。

bodyタグの中に記述するときは、bodyタグを閉じる直前に追加するのが良いでしょう。jQueryを利用したコードを書くときは、読み込んだ行よりも後に書いていきます。

CDNからjQueryのファイルを読み込む

もう1つはCDNから読み込む方法です。

自分のサイトに1行追加するだけでjQueryを使う準備が完了するので、早い方なら1分もかからないでしょう。

この方法なら公式サイトからjQueryの本体ファイルをダウンロードしたり、サーバーにアップロードする必要がありません。

具体的には、HTMLファイルのheaderタグかbodyタグの中に次の一行を追加するだけでjQueryを使うための準備が完了します。

CDNから読み込む
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

CDNから読み込むときもbodyタグの中に記述するときは、bodyタグを閉じる直前に追加するのが良いでしょう。

またjQueryを利用したコードは、読み込んだ行よりも後に記述していきます。

上の例はGoogleのCDNを使っていますが、他にもCDNがあるのでそちらを利用することもできます。

jQueryの公式サイトへ行き、「Download」というリンクをクリニックするか、「Download jQuery」というボタンをクリックします。

他のCDN

「Other CDNs」という部分にGoogleやMicrosoft、CDNJS、jsDelivrへのリンクがあるので、利用したいものをクリニックします。今回はMicrosoftをクリニックしてみます。

他のCDN

利用できるjQueryの一覧が表示されます。拡張子が.min.jsとなっているものは圧縮されてファイルサイズが小さいので、これを利用すると良いでしょう。

例えば、下のように記述すると利用できるようになります。

MicrosoftのCDNを利用する
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>

実際にjQueryが使えることを確認してみる

jQueryが利用できることを確かめるために、下のようなコードを用意してみました。

jQueryのテスト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryのtest</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
</head>
<body>

<p>jQueryのテスト(ここをクリックしてください。)</p>

<script type="text/javascript">
$(function(){
	$('p').click(function(){
		$(this).css('color','red');
	});
});
</script>
</body>
</html>

上記のコードをHTMLファイルとして保存し、ブラウザから開きます。

jQueryのテスト

「jQueryのテスト(ここをクリックしてください。)」という黒い文字列が表示されます。

この文字列をクリックすると赤くなりjQueryが動いていることを確かめられます。

もし赤くならない場合は、CDNからjQueryが読み込めているか、ブラウザでJavaScriptが無効になっていないか確認してください。