とろける甘さのJSライブラリ『Sugar.js』

こんにちは、ムキムキフロントエンドエンジニアを目指す杉田です。

今回紹介させて頂きますのはこちら。

『Sugar.js』です。

題名のとおり、こちらの「Sugar.js」はJSライブラリで、
日付、時間、オブジェクト等のデータを操作することができます。
特に日付の操作が人気のようで、また日本語に対応した
処理もあり、日本人にとって有り難いですね。

同じような機能のライブラリとしては他にもUnderscore.js
というものがありますので、そちらと比較しながら見てみます。
今回は、下記の流れでご紹介させて頂きます。
——————————————–
■導入方法
■使用例
■まとめ
——————————————–

導入方法

導入方法、といっても難しいことは何一つありません。
どちらもjQueryと同じようにライブラリのJSファイルを読み込むだけ、と至ってシンプル！

<!-- Sugar.js -->
<script type="text/javascript" src="sugar.js"></script>
<!-- Underscore.js -->
<script type="text/javascript" src="underscore.js"></script>

使用例

導入法も至ってシンプルでしたので、さっそく使用例を使って
概要を紹介したいと思います。
まずは、「Sugar.js」と「Underscore.js」のどちらも共通で
使用できる機能から見てみましょう。

１.配列から指定した条件でグループ化したオブジェクトを作る【groupBy()】

・Sugar.js

['りんご','かき','ぶどう','なし','とちおとめ'].groupBy('length')
//{"2":["かき","なし"],"3":["りんご","ぶどう"],"5":["とちおとめ"]}

・Underscore.js

_.groupBy(['りんご','かき','ぶどう','なし','とちおとめ'], 'length');
//{2: ["かき","なし"], 3: ["りんご","ぶどう"], 5: ["とちおとめ"]}

今回は文字数でグループ分けをしてみました。
「Sugar.js」は第一引数にグループ分けの条件を指定し、UnderScore.jsでは第一引数に対象の配列を、第二引数で条件を指定します。
どちらも同じように、文字数をキーとしてオブジェクトの作成していますね。

２.配列から指定のものを探し出す【find()】

・Sugar.js

[{a:1,b:2},{a:1,b:3},{a:1,b:4}].find(function(n) {
  return n['a'] == 1;
});
//{"a":1,"b":2}

対象の配列内の各オブジェクトが裏でループが周り”n”入ります。
上記はキー”a”のvalueが”1″のオブジェクトを探して返すようになっています。

・Underscore.js

_.find([{a:1,b:2},{a:1,b:3},{a:1,b:4}], function(num){
return num.a == 1;
});
//{a: 1, b: 2}

Sugar.jsと同じように”num”には各オブジェクトが入ります。
二つとも同じ機能だけあってほぼ同じような内容ですね。

「Sugar.js」が[配列].処理名(処理方法)という形なので、Underscore.jsの.処理名(配列,処理方法)配列という形に比べて、どの配列に対して、どんな処理をするのかという点で分かりやすいなと思いました。

３.オブジェクトからキーを取り出す【keys()】

配列操作が続いたので、今度はオブジェクトを操作してみます。
簡単ですが、たとえばこんなオブジェクトがあるとします。

var obj = {aaa:”bbb”, ccc:”ddd”};

このオブジェクトのキーを、Underscore.js、Sugar.jsで取り出してみましょう。
・Sugar.js

Object.keys(obj)
//[“aaa”,”ccc”]

先ほど定義したオブジェクトから全てのキーを取り出して配列にしてくれました。

ではUnderscore.jsはどうでしょうか。

・Underscore.js

_.keys(obj)
//[“aaa”,”ccc”]

こちらも同じように配列が返ってきます。

Undescore.jsの書き方は、_.処理名()となっています。この’_’にはUnderscore.jsのメソッドがたくさん入っています。
_.処理名()はUnderscore.jsを使う定型文のようになっていて、この書き方で統一されています。
Sugar.jsはオブジェクトを操作する場合と、配列を操作する場合で書き方が少し違うようですが、書き方も返ってくる値もとてもよく似ていますね。

では、二つの大きな異なる点というのは一体どこなのでしょうか。

それは、日付、時間系のデータの操作です。
これはどうやらSugar.jsにはあって、Underscore.jsにはない機能のようですね。

４.日付、時間等を整形する【format()】

早速、例を使ってどういったものか見てみましょう。

・format
時間や日付を指定した形に変更してくれる便利な機能です

new Date().format('{Weekday} {d} {Month}, {yyyy}');
//"Saturday 4 July, 2015"
new Date().format('{hh}:{mm}')
//"05:44"

{hh}、{mm}、{d}、{yyyy}等にgetMonth()などしなくても自動で入っているのでとても楽になりますね。
このように自由にフォーマットを作る事もできますし、規定されたフォーマットに整形することもできます。

new Date().format('RFC1123')
//Fri, 25 Aug 1978 12:23:44 GMT+0900

下記のようなフォーマットもあります。

RFC1036(Friday, 08-Aug-78 12:23:44 GMT+0900)
ISO8601(1978-08-25)
ISO8601_DATETIME(1978-08-25T12:23:44.432Z)

また様々な言語に対応しており、その中には日本語も含まれているため、言語の変換もできてしまいます。

Date.create('Friday November 14 2008 00:00', 'en').format('', 'ja');
//"2008年11月14日 0時00分"

Date.createというのはjavascriptのnew Date()のように日付データを作成してくれます。
上記の場合、英語で書かれた日付を.format()の第二引数で指定して’ja’日本語に変換します。

こういった機能の他に、Sugar.jsにはたくさんの時間に関する機能が実装されています。
興味がある方はぜひ公式サイトでチェックしてみてください。
http://sugarjs.com/

日時フォーマットが優秀(しかも日本語やその他言語の形式にも対応！)なところがSugar.jsの最大の特徴として上げられるのではないでしょうか！

こういったライブラリは例のような小さい単位での操作だと少し分かりづらいかと思いますが、もっとたくさんのデータを複雑に整形したい、といった時にとても役に立つかと思います。

と、いうことで次回はこねくりまわしてみようと思います。

まとめ

プロジェクトで使っていたのはSugar.jsだったので、Sugar.jsを調べていたら同じようなUnderscore.jsが出て来て面白かったです。
ある時サーバーから返って来た値を複雑な形に整形しなければならない、となった時にSugar.jsがあってとても助かりました。
こういった技術がフロント側で出来る事をどんどん増やしてくれるので本当に有難いです。

以上、Sugar.jsのご紹介でした。

導入方法

使用例

１.配列から指定した条件でグループ化したオブジェクトを作る【groupBy()】

２.配列から指定のものを探し出す【find()】

３.オブジェクトからキーを取り出す【keys()】

４.日付、時間等を整形する【format()】

まとめ

人気の記事

カテゴリー