Go to Qiita Advent Calendar 2024 Top
LoginSignup
12
10

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 3 years have passed since last update.

@oxxxkura(oy 1005)

【初心者向け】jQueryはじめの一歩

Posted at

#はじめに
理解せずに進めていってしまいそうなので、基本に立ち返るための忘備録
基本はjQuery 日本語リファレンスに書いてあることだけど、用語が全然わからない人（自分が筆頭）でも理解できるように書くつもり。

ただひとつ、jQueryは覚えてなくてもググればいいというのは確実なので、その前段階にいる人向けの文章です。

#jQueryとは
jQuery 日本語リファレンスによれば

JavaScriptのコーディングを強力に支援するライブラリ

らしい。分かるような分からないような日本語だなあ。
私自身はざっくり**「JavaScriptを少ない記述で簡単に使えるようにいろいろなコードがまとめられたもの」**だと解釈しています。

もう少しエンジニアっぽい表現をすると、「JavaScriptのさまざまな機能を簡単に実装できるコード集」あたりでしょうか。
つまりやっていることはJavaScriptのプログラム（クリックすると色が変わったり、マウスをあてると大きくなったりなど）だけど、いちいちコードをイチから考えて記述するのが面倒だから、最初からある程度の形を用意しておいてそこから読み込めるようにしたものがjQueryの正体です。

###jQueryを使う手順
まずはjQueryを使う場所の確認。

  • HTMLファイル、cssファイル、JavaScriptファイルを用意
  • HTMLファイルにjQueryを読み込む
  • JavaScriptファイルにjQueryコードを記述

おそらくファイルはHTMLとJavaScriptのみでも大丈夫だけど、メソッドの中にはcssプロパティを変化させる.css()というのもあるので一応あるほうがベター。

#jQueryの始め方
いよいよ本題！とは言え始めるといっても、説明した通りjQueryは読み込むものなので読み込めばほとんど終わり。

  • 公式サイトからjQueryファイルをダウンロードして読み込む
  • Web上のjQueryファイルを読み込む

方法としてはこの2パターンのどちらかだけど、2番目のWeb上のものを読み込む方法（CDNと言うらしい）のほうが手軽。私もこちらを習いました。
一応どちらもやり方は記述します。

###公式サイトからjQueryファイルをダウンロードして読み込む
ダウンロードページからダウンロードして、jQueryを使いたいファイル内の**</body>直前**に以下を記述。

このファイルでjQueryを使う.html
<script src="jQueryの保存先ファイル名/jquery-min.js"></script>

###Web上のjQueryファイルを読み込む
jQueryを使いたいファイル内の**</body>直前**に以下を記述。

このファイルでjQueryを使う.html
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

#####余談１
記述場所が</body>直前の理由。
2つとも記述場所（＝読み込む場所）は別にどこでも良いけど一旦ページの表示内容をすべて読み込んでからjQueryを読み込むほうが、ユーザーがjQueryの読み込み時間を気にすることなくページを閲覧できる、ということらしい。なるほどね。
たいていjQueryの発動場所は「このボタンをクリックしたら」とか「ここにカーソルが当たったら」とかなので、ユーザーがページを読んでいるうちに読み込めばよいと。

#####余談２
ファイルの保存先（保存されている場所）のことをファイルのパス、ファイルパス、パスなど呼称する。やっているうちに覚えたのであんまり気にしなくていいと思います。

#jQueryを使ってみる--基本の型

sample.js
$(function(){
  //ここにメインの処理を記述
});

jQuery(function(){
  //ここにメインの処理を記述
});

基礎の基礎はこれ。

$とjQueryは同じ意味。$が省略版という立ち位置らしいけどまあこっち使うよねという。
以下の記述も$で統一します。

sample.js
$(function(){
  $("セレクタ").メソッド("引数");
});

基礎はこれ。jQueryの中身は3つの要素で構成されている。

  • セレクタ：どこが変化するかの場所を示す。
  • メソッド：どんな動作をするのかを示す。
  • 引数　　：メソッドの詳細を指定。

例

sample.js
$(function(){
  $("h1").css(color, "#ffff00");
});

これはhtmlファイルでh1タグの部分のcssプロパティ「colorを#ffff00」に変化させるメソッド。

#jQueryを使ってみる--メソッド
まずはサンプルページのhtml。これをいろいろいじっていきます。

表示されるページ.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>サンプルサイト</title>
		<link href="/style.css" rel="stylesheet" />
	</head>
	<body>
		<header>
			<h1>Sample Page</h1>
		</header>

		<div id="samplePage">
			<h2>ようこそサンプルページへ</h2>
			<ul class="akasa">
				<li>あいうえお</li>
				<li>かきくけこ</li>
				<li>さしすせそ</li>
			</ul>

			<p class="tanaha">たちつてと</p>
			<p class="tanaha">なにぬねの</p>
			<p class="tanaha">はひふへほ</p>
		</div>

		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	</body>
</html>

なにも指定していないので、表示はこんな感じ。白い。
flat.PNG

###セレクタによる記述の違い
少しずつ実例を出します。

sample.js
$(function(){
  //色を指定するのはどちらでもできる
  $("h2").css("color", "#0000ff");
  $("li").css("color", "blue");

  //cssで指定するものであれば色以外のプロパティもOK
  $("#samplePage").css("margin-left", '50px');

  $(".tanaha").css("color", "red");
});

結果
1.PNG

解説
h1～h6やul li、img pなどhtmlで最初から用意されているものをタイプセレクタ（要素セレクタ）と言って、特に何もつけずダブルクォーテーション” ”で囲む。
ここではh2とli(リストの子要素)の色を#0000ffに指定した。

htmlでid="〇〇"として自分が付与したIDに変化をつけたいときは、ID名の前にシャープ#をつけてダブルクォーテーション" "で囲む。
ここではsamplePageIDに左側の余白(mairgin-left)を指定した。

htmlでclass="〇〇"として自分が付与したクラスに変化をつけたいときは、クラス名の前にドット.をつけてダブルクォーテーション" "で囲む。
ここではtanahaクラスの色をredに指定した。

###メソッド色々
正直あんまり覚えなくていい（どうせググればいくらでも出てくる）ので軽く表にしただけ。

メソッド 動き
.css() CSSプロパティを変化させる
.on() イベント発生時に実行する関数を割り当てる（後述）
.text() 要素の文字列を取得したり書き換えたりする
.fadeIn() 要素を徐々に表示する
.fadeOut() 要素を徐々に薄くしていき最後は非表示にする
.hide() 要素を非表示にする

#jQueryを使ってみる--イベント
###イベントについて
多分jQueryの本領。
メソッドと組み合わせて使うもので、「イベントが起きた時メソッドの処理をする」という動きを与える。…よくわからないと思うので↓で説明します。

sample.js
$(function(){
  $("セレクタ1").イベント(function(){
    $("セレクタ2").メソッド("引数");
  });
});

セレクタ1にイベントが起きた時、セレクタ2にメソッドの変化が起こる。

例

sample.js
$(function(){
  $("h2").click(function(){
    $(".akasa").fadeOut();
  });
});

htmlファイルでh2タグの部分をクリックすると、akasaクラスがフェードアウトするイベント。
結果
2.PNG
h2タグである「ようこそサンプルページへ」の部分をクリックすると・・・
3.PNG
akasaクラスを与えた要素（リスト部分）が消えた。
実際はちゃんとゆっくりフェードアウトするのですが、私がGIF動画を作る技術がないのでお見せできず申し訳ないです。

###イベント色々
例によって雑な表。当然ほかにもいろいろある。

イベント タイミング
.click() クリックしたら
.mouseover() マウスをのせたら(その後もずっとメソッド発生)
.mouseout() マウスを外したら(その後ずっとメソッド発生)
.hover() マウスをのせているその時間のみ(詳細は次)

###hoverイベント
hoverイベントはほかのイベントと違い、「マウスをのせている間」と「マウスを外した後」の2種類の処理について記述が必要になる。

sample.js
$(function(){
  $("セレクタ1").hover(
    function(){
    $("セレクタ2").メソッド2();
    },
    function();{
    $("セレクタ3").メソッド3();
    });
});

メソッド2がマウスをあてている時のメソッド、メソッド3がマウスを外した時のメソッド。
ほとんどの場合、セレクタ2とセレクタ3は同じになるしメソッド2とメソッド3は対になる動きになると思う。

例

sample.js
$(function(){
  $("h2").hover(
    function(){
    $(".akasa").css("color", "blue");
    },
    function();{
    $(".akasa").css("color", "red");
    });
});

htmlファイルでh2タグの部分にマウスをあてるとakasaクラスが青くなり、マウスを外すとakasaクラスが赤くなるイベント。

###thisについて
イベント発生時、その対象のみにメソッドが適用される。
例

sample.js
$(function(){
  $(".tanaha").click(function(){
    $(this).css("font-weight", "bold");
  });
});

結果
tanahaクラスの中でも「なにぬねの」をクリックすると・・・
4.png
クリックした対象のみが太字になり、ほかのtanahaクラスに変化はない。

#jQueryを使ってみる--onメソッド
最後の難関、onメソッドについて。基本の型は

sample.js
$(function(){
  $("セレクタ1").on(イベント名, セレクタ2, データ, 関数)
});

それぞれの要素の説明をすると

  • セレクタ1 ：対象とするセレクタを指定
  • イベント名：発生するイベントを指定
  • セレクタ2 ：さらにセレクタを指定したいときに設定
  • データ　　：任意のデータを渡したいときに設定
  • 関数　　　：イベント発生時に実行したい処理を記述

データとセレクタ2は任意で設定するものなので、一番シンプルな形にすると

sample.js
$(function(){
  $("セレクタ1").on(イベント名, 関数)
});

じゃあ関数ってどんなもんかという話ですね。
サンプルページにボタンを追加します。

sample.html
<button>ここをクリック</button>

javaScriptファイルに、clickを使用したonイベントを追記します。

sample.js
$(function() {
  $("button").on("click", function(){
    $("button").text("クリックされました");
 })
});

5.PNG
ボタンをクリックすると・・・
6.PNG

htmlで<button>要素を付与した文字列が書き換わりました。

###onイベントのいいところ①同じ要素に複数のイベントを追加できる
イベント名部分に複数設定できる。イベント名同士はスペースで区切る。

sample.html
<button>一度マウスを外してね</button>
sample.js
$(function() {
  $("button").on("dblclick mouseleave", function(){
    $("button").text("ダブルクリックでも同じだよ");
 })
});

7.PNG
ボタン部分に一度マウスをのせて外すと下の画像の表示になる。
ダブルクリックでも同じ挙動をする。
8.PNG

###onイベントのいいところ②イベントごとに処理を設定できる
上ではスペース区切りで一気に指定しましたが、連想配列の形でイベントそれぞれに違う処理を設定することができます。

sample.js
$(function() {
  $("button").on({
    "dblclick": function(){
      $("h1").css("color", "red")
    },
    "mouseleave": function(){
       $("button").text("ダブルクリックだとh1が赤くなるよ")
    }
  });
});

9.PNG
同じページ
10.PNG
ボタンをダブルクリックしてみる
11.PNG

###onイベントのいいところ③デリゲート
シンプルなコードだとわかりにくい利点。
親要素に対してイベントを設定し、引数に子要素を指定することで、あとから追加した子要素にもイベントが適用される。
（※めちゃくちゃざっくり説明してます）

sample.js
$(function() {
  $("ul").on("click", "li", function() {
    $(this).css("color", "magenta");
  });
});

12.PNG

クリックしたli要素が濃いピンクになった。
これだけだとわかりにくいが、今後サンプルページに情報が増えてliの中身がなんらかの処理によって増えた時でも同じ挙動をする。
メインの起動セレクタをulではなくliで指定してしまうと、要素が増えた時には対応できなくなってしまうらしい。

###onイベントのいいところ④オブジェクト形式のデータを関数に設定できる
onイベントが発生した時に行われる処理をオブジェクト形式のデータにすることで、より複雑な処理をすることが可能になる。

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

13.PNG
ボタンをクリックすると・・・
14.PNG
アラートが出る。

関数の名前は何でもいいし、基本はどんな処理も（関数であれば）できるので、onイベントが使われるのはほとんどこのためじゃないかなと思う・・・。
関数を別のファイルにまとめておいて、読み込む形にすればコードもスッキリする。

参考ページ
実践、.on()とoff()を使いこなす
便利なonを使おう（on click）

12
10
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
12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?