jQueryを使う際の25個Tips

mprove your jQuery – 25 excellent tips

ｊQueryを利用する際の25のTipsを見つけたので紹介します。

ちょっと長いですが、かなりいいです。

google jsapiを利用しましょう

google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
// Your code goes here.
});

これを利用すると読み込み時間が高速になります。

チートシートを利用しましょう

わからなくなったら、チートシートを利用し、さくっと。
チートシートはこちらがいいかもしれません。

http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/
http://colorcharge.com/jquery/

ライブラリとか、自作ものはパッケージにしましょう

パッケージ化するとソース容量が軽くなり、読み込みが早くなります。

パッケージ化するならPacker by Dean Edwardsがいいですよ！

FireBugのコンソールは使うべき

コンソールを使って実行時間を計測してみるといいかもしれません。

コンソールでの計測は以下の様な感じ。

console.time("create list");
for(var i = 0; i < 1000; i++){
var mylist = $(".mylist") ;
    mylist.append('This is list item ' + i);
}
console.timeEnd('create list');

キャッシュを有効に利用しましょう

ブラウザキャッシュじゃないですが、varで定義するのは1回で押さえる要にする。ってことですね。

書くとこんな感じ。

for(var i = 0; i < 1000; i++){
    var mylist = $(".mylist") ;
    mylist.append('This is list item ' + i);
}

これでは同じことを何度も繰り返さない（DRY）プログラムには当てはまらないよね！

同じことをするなら1回だけにすませようよ！となると以下の世なものがいいです。

var mylist = $(".mylist") ;
for(var i = 0; i < 1000; i++){
    mylist.append('This is list item ' + i);
}

だいたい4倍程度実行速度は上がります。

DOMの操作は必要最低限にしましょう

after()とかappend()とかを毎回繰り返すと偉いことになるので、一回で処理してしまいましょう。

var mylist = $(".mylist") ;
for(var i = 0; i < 1000; i++){
    insHtml += 'This is list item ' + i;
}
mylist.html(insHtml);

こうすると、毎回appendするより、50倍近く早くなります。

1つの要素で囲い込んでしまうテクニック

1つの要素である要素を囲んでしまう為に非常に素早い方法を。

var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
    myListItems += '<li>This is list item ' + i + '</li>';
}
myListItems += '</ul>';
myList.html(myListItems);

すっごくはやいよ！

可能な限りclassでは無く、IDを使いましょう

// Create our list
var myList = $('.myList');
var myListItems = '';
for (i = 0; i < 1000; i++) {
    myListItems += 'This is a list item';
}

myListItems += '';
myList.html(myListItems);

// Select each item once
for (i = 0; i < 1000; i++) {
    var selectedItem = $('.listItem' + i);
}

これだと5秒以上かかってしまいます。

// Create our list
var myList = $('.myList');
var myListItems = '';
for (i = 0; i < 1000; i++) {
    myListItems += 'This is a list item';
}

myListItems += '';
myList.html(myListItems);

// Select each item once
for (i = 0; i < 1000; i++) {
    var selectedItem = $('#listItem' + i);
}

しかし、これだと0.61秒ほどで終わります。500倍近く違いますね！

セレクタを利用する時はコンテキストも指定しましょう

var selectedItem = $('#listItem' + i);

こっちよりは

var selectedItem = $('#listItem' + i, $('.myList'));

こっちがいいですよ！

理由は検索対象を狭くするんです。「class=’myList’」の中から検索した方がはやいですよね！

チェーンメソッドを利用しましょう

セレクタからなるべく切らないように連結しましょう。

$('myDiv').removeClass('off').addClass('on');

$('#mypanel')
    .find('TABLE .firstCol')
    .removeClass('.firstCol')
    .css('background' : 'red')
    .append('This cell is now red');

取得したい要素を変えるにはfind()とend()を利用しましょう

$('#myTable')
    .find('.firstColumn')
    .css('background','red')
    .end()
    .find('.lastColumn')
    .css('background','blue');

自分で作った関数もチェーンメソッドとして登録して使うこともできます。

$.fn.makeRed = function() {
    return $(this).css('background', 'red');
}
$('#myTable').find('.firstColumn').makeRed().append('hello');

animateメソッドを習得しよう

fadeInだってslideDownだって簡単にできます。

slideDown: function(speed,callback){
    return this.animate({height: "show"}, speed, callback);
},
fadeIn: function(speed, callback){
    return this.animate({opacity: "show"}, speed, callback);
}

たったこれだけで見た目をゴージャスに！

そして、高さや幅を変えるときはこんな感じ。

以下の場合はマウスオーバーしたら、高さを100pxにします。

$('#myList li').mouseover(function() {
    $(this).animate({"height": 100}, "slow");
});

// 複数ある場合は以下の様に書きます。
$('#myBox').mouseover(function() {
    $(this).animate({ "width": 200 }, "slow");
    $(this).animate({"height": 200}, "slow");
});

でもこれって同じことしてるようにみえません？

そんなときは以下の様にまとめることができます！

$('#myBox').mouseover(function() {
$(this).animate({ "width": 200, "height": 200 }, "slow");
});

eventデリゲートについて学びましょう

$('#myTable TD').click(function(){
$(this).css('background', 'red');
});

こんなスクリプトがあったとして、10行50列のテーブルがあったら、500個のイベントが用意されてしまいます。

$('#myTable').click(function(e) {
var clicked = $(e.target);
clicked.css('background', 'red');
});

こうすることで、eに対してスタイルを適用することができます。

classに情報を設定しよう

メニューが開閉するものを作る場合。

click me
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>

こんなのがあったら、addClass()を使ってclassを追加して、開閉を確認しましょう。

$('.button').click(function() {

var menuItem = $(this).parent();
var panel = menuItem.find('.panel');

if (menuItem.hasClass("expanded")) {
menuItem.removeClass('expanded').addClass('collapsed');
panel.slideUp();
}
else if (menuItem.hasClass("collapsed")) {
menuItem.removeClass('collapsed').addClass('expanded');
panel.slideDown();
}
});

dataメソッドを使って情報を保存し利用しよう

dataを使うと情報を保存することができます。

htmlにclassを使うだけじゃなく、dataメソッドを使うのもいいです。

$('.button').click(function() {

var menuItem = $(this).parent();
var panel = menuItem.find('.panel');

if (menuItem.data('collapsed')) {
menuItem.data('collapsed', false);
panel.slideDown();
}
else {
menuItem.data('collapsed', true);
panel.slideUp();
}
});

自作セレクタを作って使ってみよう

jQueryではセレクタを自作することができます。

$.extend($.expr[':'], {
over100pixels: function(a) {
return $(a).height() > 100;
}
});

$('.box:over100pixels').click(function() {
alert('The element you clicked is over 100 pixels high');
});

自作セレクタを使って処理するのもまた醍醐味でもありますね！

HTMLが読み込まれてから処理を行いましょう

<div class="fieldOuter">
<div class="inner">
<div class="field">This is field number 1</div>
</div>
<div class="errorBar">
<div class="icon"><img src="icon.png" alt="icon" /></div>
<div class="message"><span>This is an error message</span></div>
</div>
</div>
<div class="fieldOuter">
<div class="inner">
<div class="field">This is field number 2</div>
</div>
<div class="errorBar">
<div class="icon"><img src="icon.png" alt="icon" /></div>
<div class="message"><span>This is an error message</span></div>
</div>
</div>

なんてHTMLがあって、タグを入れ込みます。

以下の様に簡単にしておくといいでしょう。

<div class="field">This is field 1</div>
<div class="field">This is field 2</div>
<div class="field">This is field 3</div>
<div class="field">This is field 4</div>
<div class="field">This is field 5</div>

後は、jQueryを使ってHTMLを流し込みます。

$(document).ready(function() {
$('.field').before('
<div class="fieldOuter">
<div class="inner">');<br /> $('.field').after('</div>
<div class="errorBar">
<div class="icon"><img src="icon.png" alt="icon" /></div>
<div class="message"><span>This is an error message</span></div>
</div>
</div>');
});

読み込みがコンテンツはSEO効果が薄い

google mapとかおもいものは、load()メソッドを使ってよみこみましょう。

$('#forms').load('content/headerForms.html', function() {
// Code here runs once the content has loaded
// Put all your event handlers etc. here.
});

jQueryの組み込み関数を利用しましょう

普通のjavascriptのみで処理してしまうともったいないなぁと思うこともあります。

selectの値を取得するのは以下の1行で終わるのに・・・

$('#selectList').val();

ほかのライブラリを使うならnoconflictを使って回避しましょう

ほかのライブラリとかぶってしまって、処理が行えない！って場合は以下の様に書いてみると幸せになれますよ。

var $j = jQuery.noConflict();
$j('#myDiv').hide();

noConflict()関数は、バッティングを回避する魔法の呪文なのです。

画像の読み込み完了を伝えてみよう

$('#myImage').attr('src', 'image.jpg').load(function() {
alert('Image Loaded');
});

これだけ。

常に最新バージョンを使いましょう

最新バージョンを使っていると幸せになれることがいっぱい！

新しい便利な関数の追加とか、bugfixとか！

要素の存在有無を確かめる

if ($('#myDiv).length) {
// your code
}

これで０ならば、要素が無いってことですよね！

HTML要素にJSクラスをつけましょう

以下の様にクラスをつけます。

$('HTML').addClass('JS');

そんで、cssには以下のように指定しておきます。

.JS #myDiv{display:none;}

こうすることで、javascriptがONの時は、myDivが見えません。

myDivにはjavascriptがoffの状態でも内容を閲覧できるようにしておきましょう。

初期の挙動を止めるにはreturn falseを使って止めましょう

Click me!

こんなのがあって、

$('popup').click(function(){
// Launch popup code
});

こんなのがあったときに、クリックすると、ページ上部に移動してしまいます。。。

これを回避するには、

$('popup').click(function(){
// Launch popup code
return false;
}); 

こうすると、ページ上部へ移動することをキャンセルすることができます！

ショートハンドを使いましょう

$(document).ready(function (){
// your code
});

長い（´・ω・）

ショートハンドラを使って短くすませましょう！

$(function (){
// your code
});

以上で25個です。

訳間違いがあったらご指摘いただけると助かります。。。