jQueryを良くする25のTIPS

ネタ元：Improve your jQuery - 25 excellent tips

ちょっと多いですが、かなり良いTIPSがまとまっています。

Google AJAX Libraries APIを利用しよう

Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
 
	 // Load jQuery
	google.load("jquery", "1.2.6");
 
	google.setOnLoadCallback(function() {
		 // Your code goes here.
	});
       
</script>

直接読み込むことも出来ます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

チートシートを活用しよう

TIPSではないけども、チートシートを印刷して持ち歩き、いつでも参照できるようにしておけば、その言語とよい関係が作れますよ。

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

ライブラリをまとめて圧縮しよう

たくさんのライブラリを利用しているようだったら、それらを１つのファイルにまとめて圧縮して利用してみよう。

圧縮にはPackerなんかが使えるよ。

Firebugのコンソール機能を使いこなそう

FirebugのConsole APIを使いこなすことにより開発がすごく楽になります。

例えば、コードの実行時間を計るタイマーはこんな感じです。

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

これで、プログラムの速度改善を図ることができます。

小さなキャッシュも活用しよう

jQuery のセレクタは非常にすばらしいけど、同じようなセレクタを何度も実行するようなら(とくにループなどで)、変数に格納しておこう。

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

このスクリプトはFirefox 3 で1.066秒かかる

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

しかし、このスクリプトは0,224秒しかかからない。4倍近く早いわけです。

DOMの操作を最小限にしよう

append() やprepend() 、after() そして.wrap()などDOMを操作する関数の多様は速度低下を招きます。

文字列としてhtmlを作成していき、最後にhtml()で追加するほうがよいです。

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

このスクリプトは0.216秒かかります。

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

しかし、このスクリプトは0.185秒しかかかりません。たった0.031秒ですがこちらのほうが早いです。

１つの要素でwrapする為のテクニック

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);

0.019秒しかかかりません。

可能なかぎりclassではなくIDを利用しよう

classよりIDのほうがgetElementByIDがあるので速いのですよ。

// Create our list
var myList = $('.myList');
var myListItems = '<ul>';
 
for (i = 0; i < 1000; i++) {
	myListItems += '<li class="listItem' + i + '">This is a list item</li>';
}
 
myListItems += '</ul>';
myList.html(myListItems);
 
// Select each item once
for (i = 0; i < 1000; i++) {
	var selectedItem = $('.listItem' + i);
}

これは5,066秒ぐらいかかります。

// Create our list
var myList = $('.myList');
var myListItems = '<ul>';
　
for (i = 0; i < 1000; i++) {
	myListItems += '<li id="listItem' + i + '">This is a list item</li>';
}
　
myListItems += '</ul>';
myList.html(myListItems);
　
// Select each item once
for (i = 0; i < 1000; i++) {
	var selectedItem = $('#listItem' + i);
}

これは0.061秒。なんと100倍近い違いなんだよね。

セレクタにコンテキストを与えよう

jQuery( expression, context )

第2引数にコンテキストとして、範囲を指定することが出来ます。

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

これは

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

のように検索する範囲をしていしやれば25%近いスピードアップが望めます。

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

jQueryではメソッドをつなげて書いていくことが出来ます。

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

セレクタからなるべく連結を切らない様に書いていきましょう。

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

異なる要素に指定を行いたい場合はfind()とend()を利用しましょう。

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

jQueryではチェーンメソッドに追加できる関数を簡単に作ることが出来ます。

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

animateメソッドを習得しよう

jQueryにはslideDown()やfadeIn()など非常に協力ですばらしく簡単に利用できるエフェクトが用意されています。
そして、animate()メソッドは非常に簡単で強力なアニメーション用の関数です。

animate()メソッドを習得するにはjQueryのソースを読むのが良いだろう。

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

animate()メソッドは簡単にCSSのスタイルをスムーズに別のものに変化させることが出来ます。
widthやheight,opacity,background-color,top,left,margin,color,font-sizeなどを変更することが出来ます。

利用ほほは簡単です。マウスオーバーした際にheightを100pxにするには以下のように書きます。

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

他のjQueryのメソッドと同じようにアニメーションは自動的に追加されていきます。もし最初のアニメーションが終わる前に他のアニメーションを実行したい場合は、2つのアニメーションを実行します。

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

アニメーションを同時にしたい場合はparamに複数のスタイルを設定して実行します。

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

アニメーションを数値以外で設定したい場合はColor Animations を利用するとよいよ。

eventデリゲートについて学ぼう

jQueryはイベントの追加が簡単です。しかし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はクリックされた要素の情報を含むコンテンツです。

eに対してスタイルを設定することにより効率よくイベントを実装することが出来ます。

classに情報を設定しておこう

classに情報を入れておいてflagとして利用すると便利です。

例えばパネルが開閉するスクリプトの場合

<div class="menuItem expanded">
	<div class="button">
			click me
	</div>
	<div class="panel">
			<ul>
					<li>Menu item 1</li>
					<li>Menu item 2</li>
					<li>Menu item 3</li>
			</ul>
	</div>
</div>

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メソッドは情報を保存しておくことが出来ます。

$('#myDiv').data('currentState', 'off');

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();
	}
});

dataメソッドについて詳しくはリファレンスを参照してください。

自作のセレクタを作ろう

jQueryではidやclass,tagなどビルドインセレクタが多数あります。しかし、jQueryに存在しないあたなの自作のセレクタを作ることが出来ます。

$.extend($.expr[':'], {
	over100pixels: function(a) {
		return $(a).height() > 100;
	}
});
	
$('.box:over100pixels').click(function() {
	alert('The element you clicked is over 100 pixels high');
});

最初のブロックは100px以上の高さを持つ要素を探すカスタムセレクタを作っています。次のブロックでそれを利用しています。

ページが読み込まれてからHTMLを修正する

これが利用できる機会はそれほどないとは思うけど、ダウンロード時間の短縮とSEO効果が見込めるよ。

<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を作成したい場合、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">');  
	$('.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効果が薄い

読み込みが遅いページはSEO効果が遅いので、google mapやフォーム、注意事項などはloadメソッドを利用してAjaxで読み込んでいます。

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

jQueryの関数を利用しよう

jQueryには非常に便利な関数がたくさんあるのにJavaScriptで処理してしまっているサイトをたまに見かける。

API/1.2/Utilities

例えばselect要素の取得も簡単に出来る

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

他のライブラリと共存できるようにnoconflict設定を行おう

多くのJavaScriptライブラリで$というオブジェクトを利用しています。jQueryではnoconflict設定を行うことによって$を違うオブジェクト名に変更できます。

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

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

ギャラリーなどで画像の読み込みが開始された際に、いつ終わったのかが解らない時がある。(ずっと読み込みを見ているわけじゃないからね)

そういった場合、load()メソッドを利用して読み込み完了を伝えてあげよう。

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

なるべく最新のバージョンを利用しよう

jQueryは絶えず価値が高まっている。つねにパフォーマンスが向上しているんだ。

だから、jQueryはなるべく最新のバージョン(今なら1.2.6)を利用しよう

要素が存在するかチェックする方法

ページを色々と操作した後に、要素が存在するかチェックしたい場合はないかい？

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

シンプル！けど確実ではないよ。

HTML要素にJSクラスを追加しよう

僕はこのTIPSをすばらしい本で学びました。

まずは、HTML要素にJSというclassを追加します。

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

CSSには以下のように設定しておきます。

.JS #myDiv{display:none;} 

そうするとJavaScriptがonの環境では#myDivを閲覧できません。

#myDivにはJavaScripがoffの場合でもすべてコンテンツが閲覧できるように設定しましょう。

(2008/12/18 14:00 訳が間違っていたので修正しました。 )

初期の挙動を止める為return falseをしましょう

<ia href="#" class="popup">iClick me!<i/a>

このようなリンクにイベントを追加する場合、

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

のようにしてしまうと、ページが上部に移動してしまいます。

href="#"はページ上部にジャンプするトリガーだからです。

でもイベントハンドラに"return false;" を追加しておけば問題ありません。

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

readyイベントはショートハンドを利用しよう

凄く単純なTIPSです。$(document).ready functionのショートハンドを利用することにより、あなたは少しの文字を短縮することが出来ます。

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

これが

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

こんだけですみます。

関連エントリー

jQueryのコードを良くする5つのTIPS
jQueryを使ったサンプルコード
jQuery版のLightBox「ThickBox」
JSONとJSONP
jQueryによるJavaScript入門

スポンサードリンク

• 2008年12月17日 22:56
• カテゴリー JavaScript

«IE6で閲覧すると。のanalog.js | メイン | Thunderbirdのバックアップ»

to-Rについて

JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。

書いてる人

西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア

株式会社トゥーアールについて

渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

検索

著書

Web制作の現場で使う
jQueryデザイン入門
[改訂新版]

JavaScript
コーディング
ベストプラクティス

スポンサードリンク

カテゴリー

• AWS [4]
• React [5]
• Angular [5]
• TypeScript [1]
• JavaScript [130]
• jQuery [59]
• CSS [95]
• HTML [19]
• iPhone [20]
• Android [31]
• Movable Type [72]
• WordPress [11]
• Facebook [6]
• Google [20]
• PHP [43]
• SEO [62]
• SEM [11]
• writer [108]
• seminar [107]
• Mac [7]
• server [15]
• Firefox [22]
• direction [7]
• tools [72]
• design [26]
• works [9]
• books [88]
• dialy [84]

アーカイブ

• 2021年11月 [3]
• 2021年10月 [2]
• 2021年5月 [1]
• 2020年5月 [1]
• 2020年1月 [3]
• 2019年5月 [4]
• 2019年4月 [1]
• 2019年1月 [1]
• 2018年12月 [1]
• 2018年7月 [1]
• 2018年3月 [2]
• 2021年 [6]
• 2020年 [4]
• 2019年 [6]
• 2018年 [5]
• 2017年 [11]
• 2016年 [15]
• 2015年 [44]
• 2014年 [41]
• 2013年 [62]
• 2012年 [66]
• 2011年 [100]
• 2010年 [85]
• 2009年 [96]
• 2008年 [149]
• 2007年 [213]
• 2006年 [143]
• 2005年 [66]

最近のエントリー

• AWS CloudFrontで特定ディレクトリを別のS3ストレージを割り当てる
• Nuxt.js / Next.jsで作成したサイトをGitHub ActionsでAWS S3にデプロイする
• AWS CloudFront FunctionsでBasic認証を設定する
• AWS SAM のtemplate.yamlをdeploy環境ごとに切り替える
• AWS Lambda(Node.js)でJimpを使って画像のバリデーションを行う
• IE11が終わる日
• 自宅ネットワーク高速化の道のり
• もう、SP用のWebデザインを倍の解像度で作るのをやめよう
• ReactのuseRefを再描画がかからないState管理として利用する
• TypeScriptのインデックス シグネチャでオブジェクトのキーの型を指定する

© 2005 to-R some Rights Reserved.