超高速・超カンタンなDOM操作。DOMmy.jsをいま始めよう

DOMmy.jsは、非常に軽量な独立型のJavascriptライブラリです。

• DOMを簡単に操作できる
• JavaScriptを通してCSS3のアニメーションを作成できる

という特徴があります。

DOMmy.jsがいかにWebページを綺麗に、かつ軽量化してくれるか、こちらのチュートリアルでご紹介します。

※原文著者のRiccardo Degniは、DOMmy.jsの開発者です。

はじめに：DOMmy.jsとは

DOMmy.jsは、とても簡単に扱えるJavaScriptライブラリです。jQueryやPrototypeといったライブラリを使ったことがある人ならば、それらよりも簡単だと感じるでしょう。

DOMmy.jsはVue.jsやReact.js、Angular.jsのような次世代のフレームワークではありません。これらは仮想DOMや動的テンプレーティング、データバインディングといった新しい技術を使うためのツールです。非同期で動作するアプリケーションを作成する場合は、これら次世代のフレームワークを使ってください。
一方でDOMmy.jsは、いわゆる「古典的な」JavaScriptのコードを書くライブラリです。そして深いレベルでDOMを操作します。jQueryと似てはいますが、jQueryとDOMmy.jsの間には3つの大きな違いがあります。

• jQueryはセレクタを操作してアニメーションを生み出すために、プロプライエタリ（公開されず独占的であること）で内部的なエンジンを使っています。このエンジンは完全にJavaScriptに基づいている一方で、DOMmy.jsは強力なアニメーション生成のためにDOM中のどのエレメントでも選択できます。これはより新しくより強力なJavaScriptとCSS3の特徴を用いているためです。DOMmy.jsを使えば、DOMやアニメーションを操作するためにJavascriptのエンジンを書く必要がありません。私が開発する時に考えていたのは、JavaScriptの開発者が、JavaScriptの言語を用いて、DOMのコントロールやCSS3のアニメーションを書けるJavaScriptの構成を実現しました。
• DOMmy.jsは、メジャーなブラウザの最新バージョンで動くように設計されています。一方で、IE6/7といった古いブラウザには対応していません。
• jQuery、Prototype共に内部エンジンに基づいた完全なAPIを備えていますが、DOMmy.jsはDOMの操作とアニメーションにのみコントロールを提供しています。それ以外のタスクは、JavaScriptそのものを使用するか、もしくはDOMmy.jsを拡張すれば実現可能です。

つまり、DOMmy.jsは多くの新しいブラウザに対応しており、また非常に軽く（最小で4kb）簡単に習得・実行できるJavaScriptのライブラリなのです。

DOMmy.jsでは、例えば以下のことができます。

• HTMLの要素を操作することでDOM全体をナビゲートしてくれる
• パワフルなCSS3アニメーションを作れる
• （複数の）イベントやCSSのプロパティ、属性を要素に追加できる
• 特定のコンテントを保存したり取り出したりするために、要素ストレージを操作できる
• 一貫した”this”のストラクチャーを操作できる
• クロスブラウザのDOMReady fashionを使うことで、画像やビデオといったリソースのロードを最後まで待つことなくDOMを操作できる

1. DOMmy.jsをインストールする

DOMmy.jsを実装するのは簡単です。scriptタグ内にスクリプトを含めるだけです。ダウンロードしてローカルで使ってもいいですし、ウェブからダウンロードしても構いません。

 
   // use dommy.js
    $$$(function() {
        // ...
    });

2. まずは使ってみる

DOMmy.jsでは、DOMを操作するのにページリソースのロードを待つ必要がありません。これを実現するためには、$$$関数を使います。この関数内に書かれた内容は、ページではなくDOMが準備できた段階で実行されます。

$$$(function() {
        // when DOM is ready do this
});

上の例は、独立した書き方です。もちろん複数のDOMReadyブロックを書くこともできます。その場合のコード例は以下のとおりです。

// block 1 
$$$(function() {
        // when DOM is ready do this
});

// block 2
$$$(function() {
        // when DOM is ready do this
});

// block 3
$$$(function() {
        // when DOM is ready do this
});

3. DOM要素を選択する

HTMLのIDを指定することで、要素を選択できます。$関数を使いましょう。

// select an element by ID. 
// In this case you select the element with ID "myElement"
$('myElement');

CSSセレクタで要素のコレクションやリストを選択する場合は、$$関数を使います。

// select a collection of elements by CSS selector
$$('#myid div.myclass p')

複数のセレクタを使って、複数の要素を選択することも可能です。

// a selection of HTML elements
$$('#myfirstelement, #mysecondelement')

// another selection of HTML elements
$$('#myfirstelement div.myclass a, #mysecondelement span')

DOM選択には制限がありません。複数の関数にひとつの要素が含まれていた場合は最後の関数が実行されます。

4. イベントを追加する

イベント追加も簡単。onメソッドを使うだけです。特定の要素に特定のイベントを紐付けます。

// add an event to an element that fires when you click the element
$('myElement').on('click', function() {
    log('Hey! You clicked on me!');
});

log関数は、グローバルクロスブラウザ上でconsole.logとして働くショートカットとして機能します。もしブラウザがコンソールオブジェクトをサポートしていなければ、出力はグローバルアラートボックスに表示されます。

複数イベントも同時に追加できます。

// add a events to an element
$$('#myElement p').on({
    // CLICK event
    'click': function() {
        log('Hey, you clicked here!');
    },
    
    // MOUSEOUT event
    'mouseout': function() {
        log('Hey you mouseovered here!');
    }
});

DOMmy.jsのメソッドを要素ごとに適用する必要はありません。直接選択したDOMに適用すれば、あとは内部エンジンがうまくやってくれます。

”this”を使えば、現在選択されている要素にアクセスできます。

 $('demo').on({
     'click': function() {
          this.css({'width': '300px'})
              .html('Done!');
     } 
 });

5. 属性を操作する

attrメソッドを用いて、HTMLの属性を追加・編集・除去できます。

// get an attribute
var title = $('myElement').attr('title');

// set an attribute
$('myElement').attr('title', 'my title');

// set multiple attributes
$('myElement').attr({'title': 'my title', 'alt': 'alternate text'});

attrメソッドは3通りの使い方があります。

• 変数に文字列を入れると、特定の属性の値を返す
• 2つ変数を渡すと、属性をセットする
• オブジェクト型やキー/バリュー型のペアの変数を渡すと、まとめてセットする

6. CSSのスタイルをセットする

cssメソッドを使うことで、CSSのスタイルを設定できます。

// set single CSS
$('myElement').css('display', 'block');

// set multiple CSS
$('myElement').css({'display': 'block', 'color': 'white'});

// get single CSS
$('myElement').css('display');

// get multiple CSS
$('myElement').css(['display', 'color']);

cssメソッドには、次の4つの機能があります。

• 文字列を2つ渡すと、1つのプロパティに新しい値をセットする
• 変数を1つだけ渡すと、対象の値を取得する
• オブジェクトやキーバリュー値を与えると、複数のプロパティをセットする
• cssプロパティを表す文字列の配列を渡すと、値が配列で返ってくる

7. HTMLの要素を取得または設定する

htmlメソッドで、HTMLの値を設定・取得できます。

// set html
$('myElement').html('new content');

// get html
var content = $('myElement').html();

// logs 'new content'
log ( content );

8. イテレーション（反復処理）を行う

複数の要素を選択する場合は、1回呼び出すだけでDOMmy.jsのメソッドをそれぞれの要素に適用できます。しかし、各要素に対して値を取得するなどの処理を行う場合は、forEach構文が便利です。

// get all divs
var myels = $$('div');

// set a stored content
myels.set('val', 10); 

// ITERATE through each single div and print its attributes
myels.forEach(function(el, i) {
    log(el.attr('id') + el.get('val') + ' \n');
});

forEach関数はDOMmy.jsで推奨される構文です。次の2つのパラメータがあります。

• 要素：選択しているHTMLの要素
• インデックス：現在指している要素の位置を示す値

9. ストレージを操作する

ストレージに保存した値は自由に取り出せます。ストレージは、setメソッドとgetメソッドを使って操作可能です。

// set storage
var myVal = "hello";
$('myElement').set('myVal', myVal);

// multiple storage
var mySecondVal = "everybody";
$('myElement').set({'myVal': myVal, 'mySecondVal': mySecondVal});

// get   
$('myElement').get('myVal') + $('myel').get('mySecondVal');  
// "hello everybody"

上のコード例のように、値の数を問わず一度に保存できます。その値は選択したHTMLの要素に所属します。

複数の要素を選択した場合、アイテムはその各要素に保存されます。CSSの書き方が多少異なっていても問題ありません。

// set an item to div#a and div#b
$$('div#a, div#b').set('myStoredValue', 10);

// get from #a, that of course is the same as div#a
$('a').get('myStoredValue'); // 10

DOMmy.jsは、”div#a”も”#a”も同じ要素に対する同じポインターと認識します。

const myEl = $("div#a div");

// store data
myEl.set('myStoredValue', 10);

// get data
myEl.get('myStoredValue');      // 10

10. アニメーションを表示する

DOMmy.jsの最大の魅力は「アニメーションエンジン」です。CSS3アニメーションエンジンに基づいているので、ほとんどの主要なブラウザで利用できます。アニメーションはfxメソッドで生成し、以下の4変数を受け付けます。

• アニメーションを表すCSSプロパティ
• アニメーションの実行時間（デフォルトは5秒)
• アニメーション終了後のコールバック関数
• 同時に連なって起こるアニメーションがあるか示す値（デフォルトはfalse）

2つの例で、実際の使い方を見ていきましょう。

// simple animation
$('myel').fx({'width': '300px', 'height': '300px'}, 2);

これは、#myelという要素の高さと幅を2秒間で変化させるシンプルなアニメーションです。

次の例では、「同じアニメーションを1秒間で行なったあと、HTMLの内容を”Completed!”という文字に編集する」というコールバック関数を定義しています。現在選択している要素にはthisでアクセスできます。

// simple animation with callback
$('myel').fx({'width': '300px', 'height': '300px'}, 1, function() {
        this.html('Completed!');
});

11. アニメーションをチェーンさせる

fx関数の4つ目の変数をtrueにすることで、アニメーションを連続で定義できます。アニメーションはいくつ繋げても構いません。表示方法は、ひとつの選択した要素に対して複数のfx関数を使用するだけです。

次の例では、要素の幅を4回連続で変更しています。

var callBack = function() {
    // do something cool
};

// queue animations
$$('.myel').fx({'width': '400px'}, 2, callBack, true);
           .fx({'width': '100px'}, 4, callBack, true);
           .fx({'width': '50px'}, 6, callBack, true);
           .fx({'width': '600px'}, 8, callBack, true);

もちろん、どんなものでもチェーンできます。つまり、要素に対して同時に複数コールを定義可能なのです。

// multiple calls
$$('div#e, #d')
    .fx({'font-size': '40px', 'color': 'yellow'}, 1)
    .fx({'font-size': '10px', 'color': 'red'}, 1)
    .attr('title', 'thediv')
    .attr('class', 'thediv')
    .attr({'lang': 'en', 'dir': 'ltr'});

ただし、これらはすべて同時に実行されることに注意しましょう。。もし特定のアニメーションが終わってから別のアニメーションを続けたい場合は、コールバック関数で定義してください。

12. アニメーションを開始させるイベントハンドラを作成する

次に、特定の要素に対するアニメーションを作成するスニペットを設定します。下の例では、要素の上をマウスオーバーした際とマウスアウトした際にアニメーションが開始されます。各ステップの最後に、適切なHTMLの中身がセットされます。

$('myElement').on({
    'mouseover': function() {
        this.fx({'width': '300px'}, 1, function() {
            this.html('Completed!');
        });
    },
    'mouseout': function() {
        this.fx({'width': '100px'}, 1, function() {
            this.html('Back again!');
        });
    } 
});

このように、DOMmy.jsを使えばとても簡単にCSS3アニメーションを操作できます。thisというキーワードは「常に現在の要素を指定する」と覚えておいてください。

最後に、4段階でCSSが変わるアニメーションを作ってみましょう。ユーザーが要素をクリックすると開始します。

   var clicked = false;
   
   $('myElement').on({
    'click': function() {
        if( !clicked ) {
            clicked = true;
            this.fx({'width': '300px', 'height': '300px', 'background-color': 'red', 'border-width': '10px'}, 1, function() {
                this.html('1');
            }, true)
            .fx({'height': '50px', 'background-color': 'yellow', 'border-width': '4px'}, 1, function() {
                this.html('2');
            }, true)
            .fx({'width': '100px', 'background-color': 'blue', 'border-width': '10px'}, 1, function() {
                this.html('3');
            }, true)
            .fx({'height': '100px', 'background-color': '#3dac5f', 'border-width': '2px'}, 1, function() {
                this.html('4');
                clicked = false;
            }, true); 
        }
    } 
  });

なお、以上のスニペットはDOMmy.jsのDEMOセクションで動作を確認できます。

（原文：Riccardo Degni　訳：Yui Shimizu）