LoginSignup
137

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-05-11

はじめに

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
137