jQueryを効率的に書こう

• Web Create
• 2017.11.02

jQuery初心者の方へ

そのコードもっと短くかけるかもしれません！
「一応動いているけど…」から脱却して効率の良い書き方を身につければ、
新たに書き始めるときにも、また修正するときにも時短になるはずです。

同クラス要素へのイベント

each は効率的に書く上では基本になります。

悪い例

$(function(){
  $('.elem').eq(0).text('テキスト1');
  $('.elem').eq(1).text('テキスト2');
  $('.elem').eq(2).text('テキスト3');
  $('.elem').eq(3).text('テキスト4');
  $('.elem').eq(4).text('テキスト5');
});

良い例

$(function(){
  $('.elem').each(function(i) {
    $(this).text('テキスト' + i)
  });
});

n番目をクリックしたら

btn01 をクリックしたら elem01 にイベントを発火したい場合。
下記サンプルでは表示／非表示を繰り返します。

See the Pen Xzmxpq by leo (@leo-trym) on CodePen.

悪い例

下記の悪い例のように、ボタンひとつひとつにイベントを作ると、
可読性も下がり修正も大変です。

$(function(){
  $('.btn').eq(0).click(function() {
    $('.elem').eq(0).toggle();
  });
  $('.btn').eq(1).click(function() {
    $('.elem').eq(1).toggle();
  });
  $('.btn').eq(2).click(function() {
    $('.elem').eq(2).toggle();
  });
  $('.btn').eq(3).click(function() {
    $('.elem').eq(3).toggle();
  });
  $('.btn').eq(4).click(function() {
    $('.elem').eq(4).toggle();
  });
  $('.btn').eq(5).click(function() {
    $('.elem').eq(5).toggle();
  });
});

良い例

押した btn の順番を取得して対応する elem にイベントを発生させます。

$(function(){
  $('.btn').click(function() {
    var i = $(this).index();
    $('.elem').eq(i).toggle();
  });
});

色々なタイミングで実行する

悪い例

タイミングごとに動作を書くと、修正箇所が増えていきます。

$(function(){

  // 読み込み時
  $('.elem').hide();

  // .btnクリック時
  $('.btn').click(function() {
    $('.elem').hide();
  });

});

// ウィンドウリサイズ時
$(window).resize(function(){
  $('.elem').hide();
});

良い例

onメソッドを上手く利用することで一括で指定することできます。
クリックイベント時には　trigger を利用し、カスタムイベントを実行します。

$(function(){

  $('.btn').click(function() {
    $(window).trigger('event_name');
  });

});

$(window).on('load resize event_name', function(){
  $('.elem').hide();
});

場合によっては使う例

場合によっては関数化することもあります。

$(function(){

  // 読み込み時
  elem_hide();

  // .btnクリック時
  $('.btn').click(function() {
    elem_hide();
  });

  function elem_hide(){
    $('.elem').hide();
  }
});

// ウィンドウリサイズ時
$(window).resize(function(){
  elem_hide();
});

オプションを使いまわす

jQueryのプラグインを利用する際など、
同じオプションを使いまわす場合、変数を使い下記のように書くと便利です。

悪い例

$(function(){

  $('.elem01').slider({
    width: 100,
    height: 100,
    responsive: true
  });

  $('.elem02').slider({
    width: 100,
    height: 100,
    responsive: true
  });

});

良い例

$(function(){

  var option = {
    width: 100,
    height: 100,
    responsive: true
  }

  $('.elem01').slider(option);
  $('.elem02').slider(option);

});

条件で変数の値を変える

悪い例

if文を使うと見通しが悪くなり、何がなんだか分かりません。

$(function(){

  var x = '1';
  if ( x === '1' ) {
    var y = 'A';
  } else if ( x === '2' ) {
    var y = 'B';
  } else if ( x === '3' ) {
    var y = 'C';
  } else if ( x === '4' ) {
    var y = 'D';
  } else if ( x === '5' ) {
    var y = 'E';
  } else {
    var y = 'F';
  }

});

良い例

三項演算子を使うことで、コードがスッキリして一目瞭然です。

$(function(){
 
  var x = '1';
  var y = ( x === '1' ) ? 'A'
        : ( x === '2' ) ? 'B'
        : ( x === '3' ) ? 'C'
        : ( x === '4' ) ? 'D'
        : ( x === '5' ) ? 'E' : 'F';
 
});