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

  • 72
    いいね
  • 3
    コメント

はじめに

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