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

#はじめに

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

#レガシー？な書き方たち

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

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

DOM構築が完了した後に実行する、jQueryを使うにあたって結構重要なやつですね。
こんなに無駄な書き方しないで素直に `$(function () {})` と書きましょう。

```js:Before
$(document).ready(function () {
  // ～
});
```

```js:After
$(function () {
  // ～
});

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

##$.parseJSON()

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

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

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

##.bind(), .unbind()

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

```js:Before
$('selector').bind('click', function () {
  // ～
});

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

```js:After
$('selector').on('click', function () {
  // ～
});

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

##.delegate(), .undelegate()

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

```js:Before
$('ul').delegate('li', 'click', function () {
  // ～
});

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

```js:After
$('ul').on('click', 'li', function () {
  // ～
});

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

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

#冗長？な書き方たち

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

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

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

```js:Before
function piyopiyo() {
  $('selector').addClass('piyopiyo');
}

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

```js:After
var $selector = $('selector');

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

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

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

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

```js:Before
$('input[type="text"]')
  .attr('id', 'elementID')
  .attr('name', 'elementName')
  .css('color', '#000')
  .css('font-size', '16px')
  .on('focus', function () {
    // ～
  }).on('blur', function () {
    // ～
  });
```

```js:After
$('input[type="text"]')
  .attr({
    id: 'elementID',
    name: 'elementName',
  })
  .css({
    color: '#000',
    fontSize: 16,
  })
  .on({
    focus: function () {
      // ～
    },
    blur: function () {
      // ～
    },
  });
```

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

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

```js:Before
var $mainText = $('#mainText');

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

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

```js:After
var $mainText = $('#mainText');

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

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

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

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

```js:Before
var $checkbox = $('input[type="checkbox"]');

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

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

```js:After
var $checkbox = $('input[type="checkbox"]');

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

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

`disabled` なども同じです。

##$('selector').get(0)

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

```js:Before
var canvas = $('#canvas').get(0);
```

```js:After
var canvas = $('#canvas')[0];
```

##$('&lt;element&gt;&lt;/element&gt;')

もっと短く書けますよ。

```js:Before
var $newDiv = $('<div></div>');
```

```js:After
var $newDiv = $('<div>');
```

##$(this)

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

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

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

```js: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)` は無駄です。

```js:Before
jQuery.fn.plugin = function () {
  $(this).css({
    // ～
  });
};
```

```js:After
jQuery.fn.plugin = function () {
  this.css({
    // ～
  });
};
```

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

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

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

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

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

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

```js:Before
$(window).on('scroll', function () {
  /* jQueryを使わない処理 */
});
```

```js:After
window.addEventListener('scroll', function () {
  /* jQueryを使わない処理 */
});
```

#おわりに

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