【社内勉強会】jQueryの基礎(2016/03/02)

# 0. はじめに

--------------------------
## 対象者

* jQueryとJavaScriptの違いがよく分からない人
* jQueryのメリット、使いどころがよくわからない人

---------------------------
## 伝えたいこと

* jQueryは、JavaScriptを簡単に書けるようにした「JavaScriptライブラリ」
* jQueryのメリット
    - ブラウザ間の差異を吸収してくれる
    - 複数のHTML要素を一度に操作できる
    - アニメーションを簡単に実装できる


---------------------------
## 目次

1. jQueryの概要
2. jQueryの構文・使い方
3. jQueryの使いどころ
4. 付録

--------------------------
# 1. jQueryの概要

--------------------------
## jQueryとは？

>jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。

[Wikipedia](https://ja.wikipedia.org/wiki/JQuery)より引用

--------------------------
### 簡易な理由1. ブラウザ間の差異を吸収

```js
//**** IE8以前にも対応したLoad Eventの設定方法 ***
//jQueryを使わない方法
if (window.addEventListener != null) {
  window.addEventListener("load", func, false); //標準ブラウザの書き方
} else if(window.attachEvent != null) {  
  window.attachEvent("load", func); //IE8以前の書き方
}

//jQueryを使った方法
$(window).on("load", func);
```



--------------------------
### 簡易な理由2. CSSセレクタで要素を指定

```js
//選択されているラジオボタンの値を取得する
$("input[type='radio']:checked").val();
```

`document.querySelectorAll`を使えば同様に簡潔に書けるが、この機能はIE7以前では使えない。


--------------------------
## jQueryのバージョン

|jQueryバージョン|サポートしているIEのバージョン|
|:----:|:-----:|
|1.x|6,7,8|
|2.x|9以上|
|3.x|9以上|


--------------------------
## jQueryプラグイン

jQueryを使ったライブラリ。

* jQuery UI
* tablesorter
* jqPlot

※プラグインの対応しているjQueryのバージョンに注意すること。


--------------------------
# 2. jQueryの構文・使い方

--------------------------
## 基本的な構文

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

* セレクタ: 操作対象のHTML要素を指定するもの。
* メソッド: HTML要素に対しての操作

セレクタはCSSセレクタと基本的に同じだが、jQuery独自のセレクタもある。(例)`:has`

--------------------------
## getter/setter

getterとsetterは同じ名前。
引数があればsetter、引数がなければgetter。

```js
$("#sample").val("test"); //setter
var tmp = $("#sample").val(); //getter
```

Javaだとgetter/setterでメソッド名を変えるのが一般的。

```java
obj.setValue("test"); //setter
String tmp = obj.getValue(); //getter
```

--------------------------
### [Try] 複数要素に対してのgetter/setter

* getter: 最初の要素に対して値が取得される(例外あり)
* setter: 全ての要素に対して値が設定される

```html
<span>a</span><span>b</span><span>c</span><span>d</span>
```

```js
$("span").html(); // "a"が取得される
$("span").text(); //"abcd"が取得される（例外)
$("span").html("x"); //全てのspan要素の中身が"x"
```

--------------------------
### メソッドチェーン
setterがjQueryオブジェクトを返すので、メソッドチェーンで書ける。

```js
$("#sample").val("test")
            .css({backgroundColor:"black"})
            .click();
```

メソッドチェーンのメリットは、複数の処理をまとめて記述できるのと、不要な一時変数を減らせること。


--------------------------
## [Try] jQueryオブジェクトの生成方法(CSSセレクタ以外)

* Element,Window,Documentオブジェクトを渡す

```js
$(window);
var buttonElm = document.createElement("button");
$(buttonElm);
```

* HTMLタグを渡す

```js
$("<img>", {src:"sample.jpg", css:{borderWidth:5}});
```




--------------------------
## ドキュメントロード完了後の処理

```js

$(function(){
  //なにかしらの処理
});

//上記と同じ処理。3.x系では非推奨。
$(document).ready(function() {
  //なにかしらの処理
});
```

HTML読み込み後、処理が走る。スタイルシートや画像の読み込みを待たない。
画像などの読み込みを待つ場合は、`$(window).load`を使う。

--------------------------
### [補足] `DOMContentLoaded`イベント

`$(function(){});`内の処理は、`DOMContentLoaded`イベントが発生したときに走る。

`DOMContentLoaded`をサポートしていないブラウザ(IE8以前)は、loadイベントが発生したときに走る。

--------------------------
## [Try] イベント処理

```js
$("#sample").click(function(event) {
  console.log(event);
});

//イベント処理にデータを渡す場合
$("#sample").click("test", function(event) {
  console.log(event.data); //⇒"test"
});
```

複数のイベントを設定する場合は`$(...).on`を使用。

```js
$("#sample").on("click blur", function(event) {
  console.log(event);
});
```


--------------------------
## `$`とjQuery

`$("#sample")`と`jQuery("#sample")`は同じ意味。
`jQuery`という名前のショートカットとして、`$`に割り当てられた。

※`jQuery.noConflict()`で`$`を未定義にできる

--------------------------
# 3. jQueryの使いどころ


--------------------------
# jQueryを使った方が簡潔に書ける場合(当然)

* jQuery独自のセレクタを使いたいとき(`:has`など)
* jQuery独自のカスタムイベントを使いたいとき
* アニメーション
* 複数要素に対して値を設定

--------------------------
## 複数のHTML要素を一度に操作できる

```js
//jQueryを利用
$("span").value("test");

//jQueryを利用しない場合は、forループが必要
var elms = document.querySelectorAll("span");
for (var i=0; i<elms.length; i++) {
  elms[i].value = "test";
}

//forEachを使うと少し簡潔になるが、jQueryの方が簡潔
elms.forEach(function(elm) { elm.value="test"});
```

--------------------------
## [Try] アニメーションを簡単に実装できる

```js
//スライドアップ・スライドダウンを切り替える
$("#sample").slideToggle();
```

jQueryを使わないと、`requestAnimationFrame`,`setTimeout`,`setInterval`などを使った複雑な記述になる。

[参考サイト](https://developers.google.com/web/fundamentals/design-and-ui/animations/css-vs-javascript?hl=ja)

--------------------------
# 4. 付録


--------------------------
## jQueryの公式サイトの見方

[公式サイト](http://jquery.com/)

* Home
* API Documentation
* Browser Support

--------------------------
## jQuery以外のJavaScriptライブラリ

* React
* AngularJS
* Riot
* Vue.js

--------------------------
## jQuery不要論

* ブラウザ間の差異がなくなってきている
* jQueryの便利な関数と同等のものが、ブラウザでも提供されている

[なぜjQueryを使ってはいけないか](http://qiita.com/raccy/private/7ed13d803123981b0d34)
[You Don't Need jQuery](http://qiita.com/tatesuke/items/b9548dd484b01b139b74#%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3)


--------------------------
## 課題(やってみよう！)

* jQuery独自のセレクタを調査
* `$().click`と`$().on("click"`の違いを調査
* `$(function(){});`と`$(window).load`の両方を設定して、実行順序を確認
* React, AngularJSの概要を調査
* jQuery不要論の考察


--------------------------
# おわり