充実したJavaScriptライブラリ

「ライブラリ」にも沢山の種類と方向性があります。 前回紹介した「three.js」もこの「ライブラ」リの一つです。 今回は一般的な需要に対する開発のベースに便利なライブラリについてお話ししていきましょう。

• 

  jQuery http://jquery.com/

• 

  prototype http://prototypejs.org/

• 

  dojo http://dojotoolkit.org/

左から、「jQuery」、「prototype」、「dojo」というライブラリで それぞれ記述法や得意分野に若干の違いがありますが、結構好みの部分かな、と。
「jQuery」に関してはあちこちで語られているのでみなさんも耳にしたこともあるのではないでしょうか？
今回はいちばんメジャーどこであろうこの「jQuery」を例に説明させていただきます。

※導入方法についてはリンク先の公式ページ並びに、ありとあらゆるところで書かれているのでここでは割愛させていただきます。

実際どれくらい違うのか、というところで下のようなサンプルを作りました。
「クリックすると要素が右へ移動する」といったごく簡単なアニメーションですが・・

var el = document.getElementById('sample1');
var animation = false;
el.onclick = function(){
    if(animation) return;
    animation = true;
    var move = 0;
    var timer = setInterval(function(){
        el.style.left = (++move) + 'px';

        if(move > 350){
            clearInterval(timer);
            animation = false;
        }
    }, 1);
};

生の（？）codeで書くとこんな感じ（・・かな？）
たったこれだけの単純な動きでも結構書き込まなければなりませんね・・。

一方、jQueryを利用すると

$(function(){
    $('#sample2').click(function(){
        $(this).stop().animate({left:'350px'},2000);
    });
});

たったこれだけの記述で（若干方式が違いますが）同じものが出来上がります。
ね？とっても簡単になるでしょう？
※「jQuery」のanimateメソッドにはデフォルトでeasing（緩急）が設定されているので最初と最後の動きが若干、生JavaScriptのものと違っています。（easingのパラメータをlinerに指定すれば同じになる）

記述内容のボリュームがこれだけ少なくなることからも分かるように、制作に要する時間も大幅にカットできます。 また、通常の記述法と比べ、「どの要素に対し何を行うか」を直観的に記述できるようになるという利点もあります。

jQueryの記述法

セレクタ（メソッドを適用させたい要素）にメソッド（どんな効果を）＋パラメータ（メソッドの詳細）を
「繋げていく」ように記述していく。

もちろん、メソッドもパラメータも複数加えることができ、どんどん繋げていく『メソッドチェーン』という記述ができるので 非常に直観的にプログラムを組むことができます。

サンプルでも「.stop()」と「.animate()」という二つのメソッドを繋げていますね。
こんな感じで、どんどんメソッドを繋げていけばそのメソッドが繋げた順に適用されていきます。
※パラメータが空の場合、そのメソッド毎に設定されている「初期値」が適用される。
※メソッドチェーンは便利ですが、調子に乗って繋げすぎると地獄が見れます・・笑