tt.jsというSelector Basedなjavascriptライブラリを書いたお話。

やったー！新しい車輪できたよー！！

既に @uupaa や @kyo_ago にtwitter上でRTされてはいるんですが、tt.jsというライブラリを書いてみました。

https://github.com/dameleon/tt.js

about tt.js

(特にスマホ案件で)jQueryほど機能はいらないしパフォーマンスも気になる...でもZeptoもjqMobiも結局さほど変わらないし...。

そんなことを思ったこと、男のコなら1度はありますよね？(たぶんない)

tt.jsは、とくに高速化へ注力して書いたスマートフォン向け(モダンブラウザ向け)jQuery Likeなライブラリです。

論より証拠として、ベンチマークをいくつか。

コンセプトというほど大したものはなかったんですが

jQueryの2倍速かつ、どれだけスピードが伸ばせるか
使用環境は主にスマートフォン
カジュアルにDOMと遊べる
jQuerer(っていうのか分からないけど)にとって使用が億劫でない

みたいなものを目指しました。

一番の目標である速度に関しては、わりと達成はできたのかなと思っています。(一部メソッドはまだまだ改善の余地あり)

制作に当たっては、本家jQuery, Zepto, jqMobi

また @uupaa師匠作 mofmof.js, uupaa.js や愛と勇気と缶ビールの@zentooさん作である riddle.js も参考にさせていただきました。

@kyo_ago大先生からpullreqもいただいており、ありがたいかぎりでございます。

簡単な使い方

jQuery likeと前述したとおり、jQueryっぽく使うことができます。

<div id="id-name">ﾋﾟｬｰ</div>

// DOMContentLoadedのタイミング、もしくはすでにロード後の場合即時実行される関数を登録
tt(function() {
    var ttDiv = tt("#id-name");

    // 結果の要素を得る
    ttDiv.get(); // return HTMLDivElement
    
    // 結果の要素にたいしてclassを追加する
    ttDiv.addClass("class-name"); // <div id="id-name" class="class-name">ﾋﾟｬｰ</div>
    
    // 結果の要素全てに関数を適用する
    ttDiv.each(function(index) { // @arg index Number: 要素の出現順インデックス
        var element = this; // @param this HTMLElement: eachにて、取得した要素はthisで渡されます
    });
});

注意点として、jQueryや他ライブラリで見られるこのような書き方には対応していません

<div class="first">ﾋﾟｬｰ</div>
<div class="second">ﾋﾟｪｰ</div>

// jQuery
$("div")[0]; // div.first
$("div")[1]; // div.second

// tt.js
tt("div")[0]; // undefined
tt("div").get(0); // div.first get()でも同様の結果
tt("div").get(1); // div.second

これに関しては、実装等々を語る時にあわせて述べたいと思います。

あとがき

これに関して経緯は色々とあるんですが、「javascript覚えるなら最初にライブラリ書いた方がいいよ」(@uupaa談)なんていうありがたいお言葉を元に

jsをきちんと触り初めてちょうど1年くらいになるので、オレオレ関数詰め合わせみたいなものと一緒に書いてみたというところ。

また、社内でも「jQueryほど機能はいらないけどZeptoもjQMobiもさほどパフォーマンス変わらないし…」という要望に応えたみたいな話もあったりなかったり。

弊社技術部勉強会ではすでに一度発表させていただいており

2012.10.26 19:27:33 <typester> BKすぎてすごい

というお褒めの(?)言葉もいただけて、大変ありがたく思っております。

細かい実装等々はまた追々。

damelog

tt.jsについてのアレコレ - 1

やったー！新しい車輪できたよー！！

about tt.js

簡単な使い方

あとがき