jQueryの基本（2017年版）

jQueryとは、いろいろな機能が詰まったJavaScriptライブラリです。

jQueryの読み込み方

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

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

script要素で読み込んで使う

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

<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を読み込んで使う例です。

import $ from 'jquery';

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

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

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

jQueryを使う理由

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

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

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

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

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

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

jQueryオブジェクト

jQueryオブジェクトとは、DOM要素を集めてラップしたオブジェクトです。

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

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

• $()を使う
• 既存のjQueryオブジェクトのメソッドを使う

$()を使う

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

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

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

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

jQueryオブジェクトには、新たなjQueryオブジェクトを返すメソッドがあります。例えば.find()です。

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

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

慣習

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

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

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

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

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

$()のもう1つの機能

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

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

<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には、静的メソッドとして多くの便利機能が搭載されています。しかし、それらの多くは今や使う必要のないものです。

• $.parseJSON() … 代わりにJSON.parse()を使いましょう。
• $.isArray() … 代わりにArray.isArray()を使いましょう。
• $.each() … 代わりにArray.prototype.forEach()を使いましょう。
• $.extend() … ES2015+が使えるなら、代わりにObject.assign()を使いましょう。
  • ただし、$.extend()には、第1引数にtrueを渡すことでディープマージできる長所があります。
• $.Deferred() … ES2015+が使えるなら、代わりにPromiseを使いましょう。

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