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

直感的に使える便利なjavascriptライブラリ「Sugar」


「Sugar」公式サイト
http://sugarjs.com/

すごくいいです。
ネイティブオブジェクトを拡張し、便利なメソッドをたくさん使えるようにしたライブラリ。
Ajaxやアニメーション、Dom操作をするためのライブラリではありません。
Javascriptで面倒な日付操作や、配列、数値、文字列、オブジェクト等の操作を楽にするためのライブラリです。
もちろんクロスブラウザ対応されており、jQueryとも併用できます。
また、下でも書いてますが、日本語を考慮した処理がなされていて、日本人には嬉しいライブラリだと思います。

「Sugarの機能について」
http://sugarjs.com/features

「SugarのAPI一覧」
http://sugarjs.com/api

もう、上のページを見れば、その便利さがすぐ分かると思います。

その中でも、便利そうなメソッドを見ていきましょう。

String -文字列

has ・・・文字を含んでいるかどうか

'sheep'.has('h'); //true
'sheep'.has(/[a-e]/); //true <-正規表現も渡せる

each ・・・文字を分割して、配列にしたりループで回したり

'sheep'.each(); // ["s","h","e","e","p"]
'sheep'.each(/[a-h]/,function(w){
	alert(w); // hが1回、eが2回 引数に渡される
});

encodeBase64 ・・・Base64エンコード

'sheep'.encodeBase64(); // c2hlZXA=

hankaku ・・・半角文字に変換する

('SHEEP ヒツジ'.hankaku()); // SHEEP ヒツジ <-カタカナにも対応!

zenkaku ・・・全角文字に変換する

('SHEEP ヒツジ'.zenkaku()); // SHEEP ヒツジ <-カタカナにも対応!

trim ・・・トリムする

('|' + ' sheep '.trim() + '|'); // '|sheep|' <-全角スペースにも対応!

※このtrimメソッドはIEでも全角スペースを取り除いてくれます。
jQueryのtrimメソッドだとIEの場合、全角スペースが取り除かれず、涙を流して独自実装をした方もいると思いますが、
「Sugar」なら大丈夫!
ソースを見ると、わざわざ全角スペースを取り除く処理を入れてくれています。

Number -数値

Number.random ・・・引数1と2の間のランダムな数値を返す

Number.random(0, 10); //0〜10までの間のランダムな数値

pad ・・・パディングする

(12).pad(8); // '00000012'

round ・・・四捨五入する

(3.49).round();  // 3
(3.49).round(1); // 3.5
(3.49).round(2); // 3.49

times ・・・その数分、処理を繰り返す

(5).times(function(i) {
	alert(i + '回目'); // 0回目、1回目、2回目、3回目、4回目とアラートが表示される
});

Arrays -配列

findAll ・・・条件に合う要素を探す

['dog','sheep','pig'].findAll(/g/); // ['dog', 'pig']
['dog','sheep','pig'].findAll(function(w){
			return w.length == 5;
		}); // ['sheep']

average ・・・平均を返す

[1,9,8].average(); // 6

unique ・・・重複を取り除く

['dog','sheep','pig','sheep'].unique(); // ['dog','pig','sheep']

Dates -日付 (これが一番便利かも)

create ・・・Dateオブジェクトを生成

Date.create('2011-08-01'); // Mon Aug 01 2011 00:00:00 GMT+0900
Date.create('2011/08/01'); // Mon Aug 01 2011 00:00:00 GMT+0900
Date.create('3 days ago'); // Thu Jul 28 2011 22:40:49 GMT+0900
Date.create('today'); // Sun Jul 31 2011 00:00:00 GMT+0900

format ・・・フォーマットする

Date.create().format('{YYYY}/{MM}/{dd}'); // "2011/07/31"
Date.create().format('{24hr}:{mm} ({Weekday})'); // "22:40 (Sunday)"

is ・・・引数で与えた条件と一致しているか

Date.create('2011-07-31').is('Sunday'); // true
Date.create('2011-07-31').is('July'); // true

addXXX ・・・日付を加減算する

Date.create('2011-08-01').addMinutes(100));  // Mon Aug 01 2011 01:40:00 GMT+0900 
Date.create('2011-08-01').addDays(5)); // Sat Aug 06 2011 00:00:00 GMT+0900 
Date.create('2011-08-01').addWeeks(5)); // Mon Sep 05 2011 00:00:00 GMT+0900 
Date.create('2011-08-01').addMonths(-1)); // Fri Jul 01 2011 00:00:00 GMT+0900 
Date.create('2011-08-01').addYears(2)); // Thu Aug 01 2013 00:00:00 GMT+0900 

isXXX ・・・条件と一致しているか

Date.create('2011-07-01').isPast(); // true
Date.create('2011-07-31').isLastMonth(); // true
Date.create('2011-08-01').isBefore(Date.create('2011-08-31')); // true

※日付系は以下に詳しく載っている
http://sugarjs.com/dates

Object -オブジェクト

clone ・・・オブジェクトをディープコピーする

Object.clone([function(){alert('hoge')},{'a1':'dog', 'a2':'sheep'},[1,3,5]]); // [function(){alert('hoge')},{'a1':'dog', 'a2':'sheep'},[1,3,5]]

each・・・プロパティごとに繰り返し処理をする

Object.each({ name1:'sheep', func1:function(){alert('hoge')} }, function(key, value) {
	if(Object.isString(value)) {
		alert(value);
	} else if(Object.isFunction(value)) {
		value();
	}
});

※ あの忌まわしき hasOwnProperty を入れないで繰り返し処理が出来て、すっきり。

isXXX・・・オブジェクトの型を判別

Object.isString('sheep'); // true
Object.isDate(new Date()); // true
Object.isBoolean(false); // true
Object.isArray([1,2,3]); // true
Object.isObject({name1:'sheep'}); // true
Object.isNumber(123); // true
Object.isFunction(function(){alert('hoge')}); // true

なにげにjavascriptで型判別する機会はあって、しかもちゃんとした知識がないと正確に型判別出来なかったですが、
Sugarだと簡単ですね。
isArrayも Object.prototype.toString.call(obj) でちゃんと判断していて、さすがです。

まとめ

「Sugar」は非常にいいライブラリだと思います。
これがあったら便利だよね!っていうのがたくさん詰まっていて、かつ
Javascriptのハマりどころも隠蔽してくれてて、普通にプロジェクトで採用したい感じです。
(ネイティブオブジェクトを拡張するのに賛否両論あると思いますが)
とくに、日付系!これは本当に素晴らしい。

あと、全角スペース対応や半角文字を全角にしたり、全角文字を半角にしたりと、
日本語を考慮されているのが凄くいいです。
気になって、作者さんのことを調べましたが、
どうやら、渋谷の会社で働いているようです。
また、http://www.quickkanji.com という、外国の方が漢字を調べるためのサイトも運営していらっしゃるようです。

ソースも見ましたが、非常に参考になりました。
とくに、こういうutil系のライブラリって勉強になりますよねー。

ということで、直感的に使える便利なjavascriptライブラリ「Sugar」のご紹介でした