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

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

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

#jQueryとは
[jQuery 日本語リファレンス](http://semooh.jp/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ファイルをダウンロードして読み込む
[ダウンロードページ](https://jquery.com/download/)からダウンロードして、jQueryを使いたいファイル内の**\</body>直前**に以下を記述。

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

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

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

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

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

#jQueryを使ってみる--基本の型
```JavaScript:sample.js
$(function(){
  //ここにメインの処理を記述
});

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

基礎の基礎はこれ。

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

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

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

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

**例**

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

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

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

```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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623011/cf984b30-9aae-d1db-16ab-7a0c23688e2c.png)

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

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

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

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

**結果**
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623011/6e8b4005-9fc4-d72b-9155-3b8cd2be0962.png)

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

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

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

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

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

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

```JavaScript:sample.js
$(function(){
  $("セレクタ1").イベント(function(){
    $("セレクタ2").メソッド("引数");
  });
});
```
`セレクタ1`に`イベント`が起きた時、`セレクタ2`に`メソッド`の変化が起こる。

**例**

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

htmlファイルで`h2`タグの部分をクリックすると、`akasa`クラスがフェードアウトするイベント。
**結果**
![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623011/65febd1c-180d-7fb8-3244-c2505fce9b0e.png)
`h2`タグである「ようこそサンプルページへ」の部分をクリックすると・・・
![3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623011/76333cb9-adcf-d417-27f9-07d6734b4329.png)
`akasa`クラスを与えた要素（リスト部分）が消えた。
実際はちゃんとゆっくりフェードアウトするのですが、私がGIF動画を作る技術がないのでお見せできず申し訳ないです。

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

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

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

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

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

**例**

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

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

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

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

**結果**
`tanaha`クラスの中でも「なにぬねの」をクリックすると・・・
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623011/cc3facfd-beb3-4ae0-c211-b7596e9cec64.png)
クリックした対象のみが太字になり、ほかの`tanaha`クラスに変化はない。

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

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

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

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

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

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

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

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

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

![5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623011/d8267ac7-f888-3ccd-f22f-e8144740c684.png)
ボタンをクリックすると・・・
![6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623011/523fcdfc-ecd4-5e1a-8509-b24b2b9bf4bc.png)

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

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

```html:sample.html
<button>一度マウスを外してね</button>
```


```JavaScript:sample.js
$(function() {
  $("button").on("dblclick mouseleave", function(){
    $("button").text("ダブルクリックでも同じだよ");
 })
});

```

![7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623011/ee1654ce-f67c-69f8-ecd3-998ea447be9f.png)
ボタン部分に一度マウスをのせて外すと下の画像の表示になる。
ダブルクリックでも同じ挙動をする。
![8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623011/c0e28fbc-d823-5bdf-4e56-c66603f94e50.png)

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

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

![9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623011/cac36c16-430d-9e29-7ef3-a7a144cbd79d.png)
同じページ
![10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623011/12db4c8f-2610-dee0-1765-6302335294fd.png)
ボタンをダブルクリックしてみる
![11.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623011/26f39643-6e83-e08a-ad57-dec53f612207.png)

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

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

![12.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623011/dcc3fc65-b2b9-619a-6f69-8ed775a26bd2.png)

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

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

```JavaScript:sample.js
$("button").on("click", btnClick);
	
function btnClick(){
  alert("ボタンがクリックされました！");
}
```
![13.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623011/02332486-1069-49bd-c8ac-6026e9f6367f.png)
ボタンをクリックすると・・・
![14.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623011/f2234c45-8963-a5ad-3d69-7aa183b3c510.png)
アラートが出る。

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

***
参考ページ
[実践、.on()とoff()を使いこなす](https://app.codegrid.net/entry/practical-jquery-1)
[便利なonを使おう（on click）](https://qiita.com/shizuma/items/d561f37f864c3ebb5096)