Help us understand the problem. What is going on with this article?

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

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

amamamaou
ドット絵を嗜む人です
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした