読者です 読者をやめる 読者になる 読者になる

jQueryでも高速化!メソッドチェーン/連想配列で値を設定

Web技術・Web情報

先日、jQueryで簡単に値を取得する方法を記載しました。その中で処理を高速化することについて少しだけ言及しました。
somegoro.hatenablog.com

今回はその高速化についての記事です。


jQueryの処理はjavascriptの処理と比較して遅いと一般的に言われています。確かにそのとおりなのですが、書き方を少し工夫するだけでjQueryの処理は飛躍的に速くなるのです。


今回の記事では、高速化するための書き方を2点ご紹介します。
それではご紹介していきます。

高速化1 メソッドチェーンでつなぐ

普通にjQueryの処理で書くとこのようになります。

$(this).css("width", "500px");
$(this).css("height", "300px");


それをこのように書くことが出来ます。

$(this).css("width", "500px")
       .css("height", "300px");

この書き方ですと $(this) へのアクセスが一度で済みます。
ですので、その分の処理が少なくなるので結果として処理時間が短くなる(=高速で処理できる)と言うことになります。


さらに.cssだけでなく、他のプロパティでもメソッドチェーンで繋ぐことが出来ます。

$(this).css("width", "500px")
       .css("height", "300px")
       .text("設定しました");

記述量も少なくなる上に処理も速くなって一石二鳥ですね。これを使わない手はないです。


高速化2 連想配列で設定

さて次は連想配列を使って値を設定する方法をご紹介します。
普通にjQueryの処理で書くとこのようになります。

$(this).css("width", "300px");
$(this).css("height", "300px");

それをこのように書くことが出来ます。

$(this).css({
  width: "300px",
  height: "300px"
});

この書き方は高速化1の方法よりも個人的に見た目が好きなので、私はよく使います。
処理速度としてはどうでしょう、こちらの方が体感的には少々速い気がしますがあまり気になる程の差はないように感じます。


今回ご紹介した書き方は、変数でもこのように設定することが出来ます。

var variable_width = 300;
$(this).css("width", variable_width)
       .css("height", "300px");

$(this).css({
  width: variable_width,
  height: "300px"
});

便利で簡単ですね。


以上、jQueryでも処理を高速化する方法2点でした。メソッドチェーンや連想配列はこの他にも様々な場所で活躍しますので、この機会にぜひ覚えていってください。


それではこの辺で。

jQueryクックブック

jQueryクックブック

jQueryでCSSのwidth, height を簡単に取得/設定する方法

Web技術・Web情報

今回は jQueryで width, height の値を簡単に取得する方法をご紹介します。

今までの取得方法

今まで私は、幅と高さを取得する際に次のように書いていました。

$(this).css("width");
$(this).css("height");

javascriptで取得する方法であるdocument.getElementByIdなどと比較すればこれでも簡単なのですが、もっと簡単に取得できる書き方を先日知りました。

簡単な方法

$(this).width();
$(this).height();

これで取得できます。jQueryの基本的な書き方のようです。ちなみに値を設定するにはそれぞれ次のように書きます。

$(this).width(500);
$(this).height("300px");

単位なしで書くとpx単位での設定になります。もちろんpxを明示的に書いても設定することが出来ます。%, vh, vw なんかも設定できます。簡単ですね。


私が今まで実施していた書き方だと値を設定するには次のように書きます。

$(this).css("width", "500px");
$(this).css("height", "300");

これも単位なしで書くとpx単位での設定になります。これも、もちろんpxを明示的に書いても設定することが出来ます。やはり多少記述が長くなりますね。「塵も積もれば」で、この多少の違いは見過ごせません。


私がよくやっていることは.cssで値を動的に設定することです。

変数で設定

次のように値を変数にすることで動的に値を設定できます。

$(this).css("width", variable_width);

さらに、上記で変数にした部分は関数にすることも出来ます。関数の戻り値で値を設定するのです。

関数の戻り値で設定

次のように値を関数の戻り値で設定することで動的に値を設定できます。

$(this).css("width", function(){
  return variable_width;
});


そして、意外と忘れがちなのが初期化です。

初期化

上記のようにjQueryを使って設定した値を初期化して元のCSSで設定していた値に戻したい。そんなときには次のように書きます。

$(this).css("width", "")

簡単ですね。この初期化の書き方でピンときた方もいるかと思いますが、.cssではCSS上で値を設定しているのではないのですね。HTML上にstyleで設定しているのです。.cssという書き方なのに、面白いですね。


以上、width, height の値を設定する色々な方法でした。なお、今回の処理については処理速度は意識していません。あくまで簡単に値を取得/設定する方法にフォーカスした内容です。


処理速度を意識するならjQueryでなく、javascriptで書いてしまった方が断然速いです。ですので、お手軽プログラミングでなく処理速度に厳密なプログラムを書く際にはjavascriptでゴリゴリ書いていくことをオススメします。


いつか処理速度を意識したjavascriptの記事も書きたいなぁ(´-`).。oO

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer's SELECTION)

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer's SELECTION)