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()
は、その使い勝手のよさで今も使う価値があると思います。