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

#はじめに

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リファレンスや、 古いサンプルがまだまだ検索上位に引っかかるのですが、しっかり公式ドキュメントなども読んでおきましょう。英語ですけど。