script.aculo.usを読み解く

第4回　builder.js

JavaScript, script.aculo.us

この記事を読むのに必要な時間：およそ 6 分

builder.jsは，DOMを簡単に構築できるライブラリです。

prototype.jsにも，バージョン1.6でDOM構築を簡単にするためのElementコンストラクタが導入されましたが，script.aculo.usのBuilderのほうが開発の歴史が古いので，いくつかの点で一日の長があります。

機能の紹介

DOMを構築するときは，次のような一連の操作が頻出します。

var elt = document.createElement('button');
elt.setAttribute('id','hoge');
elt.onclick=doSomething
elt.appendChild(document.createTextNode('hello button'));

builder.jsを使うと，次のように簡単に書くことができます。

Builder.node('button',{id:'hoge',onclick:'doSomething()'},'hello button');

さらに便利なのは，このBuilder.nodeはこのように入れ子にできることです。これはprototype.jsのElementコンストラクタにはない機能です。

Builder.node('div',[
  Builder.node('a',{href:'./foo.png'},
    Builder.node('img',{src:'./foo.png'})),
  Builder.node('a',{href:'./bar.png'},
    Builder.node('img',{src:'./bar.png'}))]);

入れ子にした結果はこのようになります。

<div>
  <a href="./foo.png">
    <img src="./foo.png"/>
  </a>
  <a href="./bar.png">
    <img src="./bar.png"/>
  </a>
</div>

便利な機能 Builder.dump()

私がBuilder.jsで愛してやまないのは，次のようにも書けることです。

DIV([
  A({href:'./foo.png'},
   IMG({src:'./foo.png'})),
  A({href:'./bar.png'},
   IMG({src:'./bar.png'}))])

このショートカットモードともいうべき機能は，Builder.dump()を呼ぶと，そこでDIV関数やA関数が定義されて，使えるようになります。DIV関数やA関数の実体はBuilder.node関数です。まるで閉じタグのないHTMLのように見えるのがお気に入りです。

Builder.node関数の使いかた

Builder.node関数は，引数に何が与えられるかで動作が変わります。引数の与えかたは以下のようになっています。

  • Builder.node( 要素名 )
  • Builder.node( 要素名, 属性 )
  • Builder.node( 要素名, 入れ子 )
  • Builder.node( 要素名, 属性, 入れ子 )

要素名は，文字列で，要素のタグ名を与えます。

属性は，オブジェクトを与えます。プロパティ名に例えばid，className，style，onclickなどを使います。

入れ子は，要素に追加される，単一の文字列か数字かノード，あるいはそれらの配列を与えます。

この入れ子の中の配列は次のように扱われます。

Builder.node('p','foobar1']) ==
Builder.node('p',['foo','bar',1]) ==
Builder.node('p',['foo',['bar',1]]) ==

<p>foobar1</p>

このライブラリは，Array.mapといった配列操作と組み合わせて使うことで，大きな威力を発揮します。例えばこれは，配列からボタンをまとめて作る例です。

DIV(['foo','bar','foobar'].map(function(x,i){
        return BUTTON({onclick:"alert('" + x + i + "')"},x)}));

Builder

それでは，実際のコードを見ていきましょう。

0001: // script.aculo.us builder.js v1.8.1, Thu Jan 03 22:07:12 -0500 2008
0002: 
0003: // Copyright (c) 2005-2007 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
0004: //
0005: // script.aculo.us is freely distributable under the terms of an MIT-style license.
0006: // For details, see the script.aculo.us web site: http://script.aculo.us/
0007:

1～7行目は著作権表示です。

JavaScript, script.aculo.us

著者プロフィール

源馬照明（げんまてるあき）

名古屋大学大学院多元数理科学研究科1年。学部生のときにSchemeの素晴らしさを知ったのをきっかけに，関数型言語の世界へ。JavaScriptに，ブラウザからすぐに試せる関数型言語としての魅力と将来性を感じている。

ブログ：Gemmaの日記