既存サイトやWordPressのテーマを触ると、$('.card').addClass('on');のようなコードが出てきます。この記事は書けるようになるためではなく、読めるようになるための早見表です。書き方のクセを3つ知れば、あとは対応表を引くだけで読めます。
クセ1：$() は「要素を集める関数」
いちばん多く出てくる$は、jQueryが用意した関数の名前です。カッコの中にCSSと同じセレクタを書くと、当たる要素を集めて返します。
$('.card') // クラスが card の要素を全部
$('#title') // idが title の要素
$('li') // liタグ全部素のJavaScriptだとdocument.querySelectorAll('.card')にあたります。セレクタの書き方はCSSと同じなので、CSSが読めればここは読めます。
クセ2：点でつなげて書く（メソッドチェーン）
jQueryのコードは、点でどんどんつながっていきます。
$('.card').addClass('is-open').css('color', 'red');これは上から順に読めば大丈夫です。「.cardを集めて → クラスis-openを足して → 文字色を赤にする」。jQueryのメソッドは処理を終えたあとに自分自身を返すので、そのまま次の処理を続けて書けます。
長い行に出会ったら、点のところで改行して読むと分解できます。
$('.card')
.addClass('is-open')
.css('color', 'red');クセ3：全体が $(function () { ... }); で囲まれている
ファイルの先頭がこうなっていることがよくあります。
$(function () {
// ここに処理が書かれている
});意味は「HTMLの読みこみが終わってから、中身を実行する」です。これがないと、まだ画面に存在しない要素をさわろうとして「何も起きない」ことがあります。次の3つはすべて同じ意味なので、どれを見ても同じものだと思ってください。
$(function () { ... });
$(document).ready(function () { ... });
jQuery(function ($) { ... }); // WordPressでよく見る形いちばん下の形は、WordPressが$という別名を無効にしているために必要な書き方です。
よく出る書き方の対応表
読んでいて意味が取れないものが出てきたら、ここを引いてください。
中身を変える
| jQuery | 素のJavaScript | やっていること |
|---|---|---|
.text('あ') | .textContent = 'あ' | 文字を差しかえる |
.html('<b>あ</b>') | .innerHTML = '<b>あ</b>' | タグごと差しかえる |
.val() | .value | 入力欄の中身を読む |
.val('あ') | .value = 'あ' | 入力欄に入れる |
.attr('href') | .getAttribute('href') | 属性を読む |
.attr('href', url) | .setAttribute('href', url) | 属性を書く |
見た目を変える
| jQuery | 素のJavaScript | やっていること |
|---|---|---|
.addClass('on') | .classList.add('on') | クラスを足す |
.removeClass('on') | .classList.remove('on') | クラスを外す |
.toggleClass('on') | .classList.toggle('on') | あれば外す・なければ足す |
.hasClass('on') | .classList.contains('on') | 持っているか調べる |
.css('color', 'red') | .style.color = 'red' | スタイルを直接あてる |
.hide() | .style.display = 'none' | 隠す |
.show() | .style.display = '' | 表示に戻す |
反応させる
| jQuery | 素のJavaScript | やっていること |
|---|---|---|
.on('click', fn) | .addEventListener('click', fn) | 押されたら動かす |
.click(fn) | 同上 | 古い書き方。意味は同じ |
.off('click', fn) | .removeEventListener('click', fn) | 反応をやめる |
.each(fn) | .forEach(fn) | 1つずつ順に処理する |
動かす・通信する
| jQuery | 今の書き方 | やっていること |
|---|---|---|
.fadeIn() / .fadeOut() | CSSのtransitionでopacity | ふわっと出す・消す |
.slideDown() / .slideUp() | CSSのtransitionでheightなど | にゅっと開く・閉じる |
$.ajax(...) | fetch(...) | サーバーとデータをやりとりする |
実際のコードを3つ読んでみる
対応表を引きながら、よく見る形を読み下してみます。
ボタンでクラスを付け外しする
$('.menu-button').on('click', function () {
$('.menu').toggleClass('is-open');
});「.menu-buttonが押されたら、.menuのクラスis-openをあれば外す・なければ足す」。ハンバーガーメニューの中身は、たいていこれだけです。
素のJavaScriptならこうなります。
document.querySelector('.menu-button').addEventListener('click', function () {
document.querySelector('.menu').classList.toggle('is-open');
});this は「今反応した要素」
$('.tab').on('click', function () {
$('.tab').removeClass('is-active');
$(this).addClass('is-active');
});$(this)は「今クリックされた、その要素」です。だから「いったん全部のタブからis-activeを外して、押されたタブだけに付け直す」と読めます。タブの切りかえは、この形がほとんどです。
1つずつ順に処理する
$('.item').each(function (i) {
$(this).css('animation-delay', i * 0.1 + 's');
});eachは「集めた要素を1つずつ順に処理する」。iは0から始まる番号なので、「順番に0.1秒ずつ遅らせる」＝順に現れるアニメーションだと読めます。
読むときのコツ
$を見たら「要素を集めている」と思う——中身はCSSセレクタです- 点でつながっていたら、上から順に読む——分からないメソッドだけ表を引きます
$(this)は「今の要素」——イベントの中でよく出ますfadeInのような動き系は、CSSでやっていることと同じと考えて構いません- 意味が取れないメソッドは名前から推測しない——
.prop()と.attr()のように似て非なるものがあります。表にないものは調べます
まとめ
$('.card')は要素を集める関数。中身はCSSセレクタと同じ- 点でつながる書き方は上から順に読めばいい
$(function () { ... })は「HTMLを読み終わってから実行」の合図$(this)は「今反応した要素」——イベントの中で頻出- 分からないメソッドは推測せず、対応表を引く
読めるだけで、既存サイトはこわくなくなります。書けるようになる必要はありません。