jQueryの基本（2017年版）

[jQuery](https://jquery.com/)とは、いろいろな機能が詰まったJavaScriptライブラリです。

## jQueryの読み込み方

jQueryの読み込み方は、2つあります。

* script要素で読み込んで使う
* モジュールとして読み込んで使う

### script要素で読み込んで使う

次のようにjQueryのソースコードが記述されたjsファイルをscript要素で読み込むことで、`jQuery`もしくは`$`としてjQueryが使用可能になります。

```html
<ul id="list">
<li>Apple</li>
</ul>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
jQuery('#list').append('<li>Banana</li>');
$('#list').append('<li>Cherry</li>');
</script>
```

### モジュールとして読み込んで使う

jQueryをモジュールとして読み込んで使う方法もあります。次のコードは、ES modulesでjQueryを読み込んで使う例です。

```js
import $ from 'jquery';

$('#list').append('<li>Banana</li>');
$('#list').append('<li>Cherry</li>');
```

この場合、指定した名前（上の例では`$`）でjQueryを使わなければならないことに注意してください。

以降の例では、`$`でjQueryを使うことにします。

## jQueryを使う理由

jQueryを使うと、**DOMの扱いとイベントハンドリングが大変楽になります。**それが、今でもjQueryを使う最大の理由と言ってよいでしょう。

```js
// jQueryを使わないと
const buttons = document.querySelectorAll('.js-button');

const handleClickButton = (e) => {
  e.currentTarget.classList.add('is-clicked');
};

buttons.forEach((el) => {
  el.addEventListener('click', handleClickButton);
});
```

```js
// jQueryを使うと
const $buttons = $('.js-button');

$buttons.on('click', (e) => {
  $(e.currentTarget).addClass('is-clicked');
});
```

## jQueryオブジェクト

[jQueryオブジェクト](https://learn.jquery.com/using-jquery-core/jquery-object/)とは、DOM要素を集めてラップしたオブジェクトです。

### jQueryオブジェクトを得る方法

jQueryオブジェクトを得るには、2つの方法があります。

* [`$()`](http://api.jquery.com/jquery/)を使う
* 既存のjQueryオブジェクトのメソッドを使う

#### `$()`を使う

`$()`を使うと、jQueryオブジェクトが返ります。

```html
<ul id="list">
<li class="item">Apple</li>
<li class="item">Banana</li>
<li class="item">Cherry</li>
</ul>
```

```js
$(document.getElementById('list')); // DOM要素からjQueryオブジェクトを得る
$('.item'); // セレクターからjQueryオブジェクトを得る
$($('.item')); // jQueryオブジェクトからjQueryオブジェクトを得る
$('<p>Hello!</p>'); // マークアップからjQueryオブジェクトを得る
$(); // 空のjQueryオブジェクトを得る
```

#### 既存のjQueryオブジェクトのメソッドを使う

jQueryオブジェクトには、新たなjQueryオブジェクトを返すメソッドがあります。例えば[`.find()`](http://api.jquery.com/find/)です。

```html
<ul id="list">
<li class="item">Apple</li>
<li class="item">Banana</li>
<li class="item">Cherry</li>
</ul>
```

```js
const $list = $('#list');
const $items = $list.find('.item');
```

### 慣習

jQueryオブジェクトを代入する変数やプロパティの名前には、先頭に`$`をつける慣習があります。

```js
const $items = $('.item');

class Foo {
  constructor(el) {
    this.$el = $(el);
  }
}
```

代入する値がjQueryオブジェクトではない場合、名前の先頭に`$`を付けないようにしましょう。

```js
const $link = $('.link');
const href = $link.attr('href'); // 返ってくるのは文字列なので、変数名の先頭に`$`を付けない
```

## `$()`のもう1つの機能

基本的に`$()`はjQueryオブジェクトを得るためのものですが、もう1つの機能があります。それは、HTML読み込み（DOM解析）を完了したときに関数を実行させる機能です。

`$()`に関数を渡すと、HTML読み込みが完了したときにその関数が実行されます。（すでに完了していれば、即座に実行されます。）この機能を使うことで、ある要素を操作するJavaScriptを、その要素より前に記述することが可能です。

```html
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
  $(function() {
    $('#target').text('Hello!');
  });
</script>

<p id="target"></p>
```

JavaScriptをHTMLの最後に記述することが一般化している今、この機能に頼ることは少なくなりました。もし何らかの事情で操作対象の要素より前にJavaScriptを記述しなければならない場合は、この機能を使うとよいでしょう。

## 便利機能

jQueryには、静的メソッドとして多くの[便利機能](http://api.jquery.com/category/utilities/)が搭載されています。しかし、それらの多くは今や使う必要のないものです。

* [`$.parseJSON()`](http://api.jquery.com/jQuery.parseJSON/) … 代わりに[`JSON.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)を使いましょう。
* [`$.isArray()`](http://api.jquery.com/jQuery.isArray/) … 代わりに[`Array.isArray()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray)を使いましょう。
* [`$.each()`](http://api.jquery.com/jquery.each/) … 代わりに[`Array.prototype.forEach()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)を使いましょう。
* [`$.extend()`](http://api.jquery.com/jQuery.extend/) … ES2015+が使えるなら、代わりに[`Object.assign()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)を使いましょう。
    * ただし、`$.extend()`には、第1引数に`true`を渡すことでディープマージできる長所があります。
* [`$.Deferred()`](http://api.jquery.com/jQuery.Deferred/) … ES2015+が使えるなら、代わりに[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)を使いましょう。

そんな中、HTTPリクエストをする[`$.ajax()`](http://api.jquery.com/jquery.ajax/)は、その使い勝手のよさで今も使う価値があると思います。