Snow-Materia > HTMLのオブジェクト思考なマークアップについて (2)

HTMLな例

ページの書き方は様々で、人によって千差万別ですが、 しかしそのページをみれば、ある特定の構成、ってのはあると思う。

前のページで言えば、

    <h*>だれそれ</h*>    <!-- 名前, h* で世代 -->
    <dl>
        <dt>出身</dt><dd>どこそこ</dd>
        <dt>職業</dt><dd>どれそれ</dd>
        <dt>詳細</dt>
        <dd>
            <ul>
                <li>なんとか</li>
                <li>かんとか</li>
            </ul>
        </dd>
    </dl>

というようなのが多少の差異があれ、繰り返し使われているのがわかると思う。

もちろん詳細はリストでなければ、段落でもかまわない。

    <h*>だれそれ</h*>    <!-- 名前, h* で世代 -->
    <dl>
        <dt>出身</dt><dd>どこそこ</dd>
        <dt>職業</dt><dd>どれそれ</dd>
        <dt>詳細</dt>
        <dd>
            <p>なんとかかんとか で うんとかすんとか</p>
        </dd>
    </dl>

これをひとつのオブジェクトとしてとらえてみます。

まず初めに名前があり、 その中を見るとそれに関する 出身, 職業, 詳細, などが表れ、 このパターン(ルール・規則)にしたがって、 また同じような内容(オブジェクト)が続いていきます。

こうすると、 見る人も決まったパターンで来るのならわかりやすいし、 書くほうも一度テンプレートを作ってしまえば あとはそれを繰り返すだけなので作りやすい。

スクリプトライクな例

なにをやってるか、ってことを ちょっと簡単にスクリプト的に書いてみるとこうなるかと。
実例やHTMLで説明するより、 こうしたスクリプトのがわかりやすいときもあるので。 (ちなみにわかりやすいようにわざと日本語で書いている)

// プロフ作成
function Profile(origin, job, part) {
	this[出身] = origin;
	this[職業] = job;
	this[詳細] = part;
	return this;
}
var だれそれ = new Profile(どこそこ, どれそれ, なんとかかんとか);    // プロフに渡す

具象化すると、

// プロフ作成
function Profile(origin, job, part) {
	this[出身] = origin;
	this[職業] = job;
	this[詳細] = part;
	return this;
}
var パパス = new Profile(グランバニア, じつは王様, 諸国を放浪・以下略);

と、こうするだけで「パパス」の項目ができてしまう、と。
で、「パパスの出身地は～」と参照したい場合は、 パパス[出身] とアクセスするだけで、それがわかるようになります。

あとは、同じように。

var えにくす = new Profile(グランバニア, DQ5の主人公, モンスターと仲良し・以下略);
var テン     = new Profile('', えにくすの息子, 勇者装備が使える・以下略);
var ソラ     = new Profile('', えにくすの娘,   魔法が得意・以下略);

などと連続していくで、それぞれのプロフができていくのです。

で、もし「えにくすの出身地」を参照したい場合は、パパスのと同じように、 えにくす[出身] とやるだけでよいし、 えにくす[職業] とやれば、出身と同じように職業が参照できます。

スクリプトからの参照

上記のようにオブジェクト化すると、 スクリプトなどからもそのグループへの参照がかなり容易になります。

例えば、 var papasu = document.getElementById('papasu'); とやるだけでよいし。 あとは、このpapasu内から検索すれば、 出身とか職業とか、 はたまたパパスの子孫まで特定して見つけ出せるでしょう。