Edited at

jQueryにおけるレガシー・冗長な書き方を一掃したい

More than 1 year has passed since last update.


はじめに

jQuery 3.0になってから結構経ちましたが、そろそろ旧バージョン時代の書き方をなくしていかなければならないはず。

ついでに、冗長な書き方も一掃したい。


レガシー?な書き方たち

一応互換性を考えて残っているものも多いですが、そろそろこの書き方もなくしていきましょう。


$(document).ready(function () {})

DOM構築が完了した後に実行する、jQueryを使うにあたって結構重要なやつですね。

こんなに無駄な書き方しないで素直に $(function () {}) と書きましょう。


Before

$(document).ready(function () {

// ~
});


After

$(function () {

// ~
});

// グローバル空間で $ が使えないとき
jQuery(function ($) {
// ~
});



$.parseJSON()

ECMAScript 5 に標準であるんです。


Before

var obj = $.parseJSON('{"text":"hello!"}');



After

var obj = JSON.parse('{"text":"hello!"}');



.bind(), .unbind()

なんでもこなしてくれる .on().off() がやってくれます。


Before

$('selector').bind('click', function () {

// ~
});

$('selector').unbind('click');



After

$('selector').on('click', function () {

// ~
});

$('selector').off('click');



.delegate(), .undelegate()

これも、なんでもこなしてくれる .on().off() がやってくれます。


Before

$('ul').delegate('li', 'click', function () {

// ~
});

$('ul').undelegate('li', 'click');



After

$('ul').on('click', 'li', function () {

// ~
});

$('ul').off('click', 'li');


引数の順番が違うので注意。


冗長?な書き方たち

jQueryは様々な記述方法ができるわけなので、それを活かしていかないと。


何度も同じ要素を取得する

数回要素を再利用したいのであれば、変数として持っていた方が再取得という手間も省けます。


Before

function piyopiyo() {

$('selector').addClass('piyopiyo');
}

function nyannyan() {
$('selector').addClass('nyannyan');
}



After

var $selector = $('selector');

function piyopiyo() {
$selector.addClass('piyopiyo');
}

function nyannyan() {
$selector.addClass('nyannyan');
}



同じメソッドを複数回書く

メソッドチェーンとはいっても、同じメソッドなら一つにまとめた方がいいのでは?


Before

$('input[type="text"]')

.attr('id', 'elementID')
.attr('name', 'elementName')
.css('color', '#000')
.css('font-size', '16px')
.on('focus', function () {
// ~
}).on('blur', function () {
// ~
});


After

$('input[type="text"]')

.attr({
id: 'elementID',
name: 'elementName',
})
.css({
color: '#000',
fontSize: 16,
})
.on({
focus: function () {
// ~
},
blur: function () {
// ~
},
});


.text() や .html() で文章の追加

文章を追加したいのならもっといい方法があるじゃない。


Before

var $mainText = $('#mainText');

$mainText.html($mainText.html() + '<b>おなかすいた</b>');

$mainText.html('ねむい<br>' + $mainText.html());



After

var $mainText = $('#mainText');

$mainText.append('<b>おなかすいた</b>');

$mainText.prepend('ねむい<br>');



.attr('checked', 'checked'), .removeAttr('checked')

属性で操作するのはちょっと……


Before

var $checkbox = $('input[type="checkbox"]');

function checkAll() {
$checkbox.attr('checked', 'checked');
}

function uncheckAll() {
$checkbox.removeAttr('checked');
}



After

var $checkbox = $('input[type="checkbox"]');

function checkAll() {
$checkbox.prop('checked', true);
}

function uncheckAll() {
$checkbox.prop('checked', false);
}


disabled なども同じです。


$('selector').get(0)

変にメソッド挟むくらいならそのまま取った方がいいのでは?


Before

var canvas = $('#canvas').get(0);



After

var canvas = $('#canvas')[0];



$('<element></element>')

もっと短く書けますよ。


Before

var $newDiv = $('<div></div>');



After

var $newDiv = $('<div>');



$(this)

処理する内容によっては $(this) なんて書くよりも直接いじった方がいいのでは?


Before

var bool = true;

$('.changeText').click(function () {
$(this).text(bool ? 'わーい!' : 'たーのしー!');
bool = !bool;
});

$('input').change(function () {
var value = $(this).val();
// ~
});



After

var bool = true;

$('.changeText').click(function () {
this.textContent = bool ? 'わーい!' : 'たーのしー!';
bool = !bool;
});

$('input').change(function () {
var value = this.value;
// ~
});


$(this).prop('property') というような記述は、すべて this.property という形で取得できるものもあります。


jQueryプラグインを作る時の $(this)

jQueryプラグインを作る時、this はjQueryオブジェクトなので $(this) は無駄です。


Before

jQuery.fn.plugin = function () {

$(this).css({
// ~
});
};


After

jQuery.fn.plugin = function () {

this.css({
// ~
});
};


$(function () {}) 内で window や document にイベントを追加する

DOM操作関係ないのならDOM構築後に追加するような書き方する必要ないのでは?


Before

$(function () {

$(window).on('scroll', function () {
/* DOM操作のない処理 */
});
});


After

$(window).on('scroll', function () {

/* DOM操作のない処理 */
});


$(window).on('event', function () {/* jQueryを使わない処理 */})

えー! ならjQuery使わなくていいじゃん!!


Before

$(window).on('scroll', function () {

/* jQueryを使わない処理 */
});


After

window.addEventListener('scroll', function () {

/* jQueryを使わない処理 */
});


おわりに

古いバージョンのjQueryリファレンスや、 古いサンプルがまだまだ検索上位に引っかかるのですが、しっかり公式ドキュメントなども読んでおきましょう。英語ですけど。