似たような動作をさせたい要素はclass属性でまとめると楽

投稿者: | 2011/08/11

安全かつ簡単にメンテナンスできる構造の作り方

HTML+CSS+JavaScript(jQuery)でのWebページ作成のお話。

似たような動作をさせたい要素はclass属性でまとめると楽に管理できます。

例えば、複数並んだボタンを押すと、それぞれ別のページに移動するような場合。

jQueryとCSSのクラス指定、そしてHTML内に自前の属性値を設定してやることで、
後のメンテナンスを安全かつ簡単に行える構造にできます。

idで識別して、動作を割り振る(自前の属性値を使わない)

まず、普通にidで要素を識別して、動作を割り振る方法。

HTML



JavaScript(jQuery)

$(function(){
    $('#hoge').click(function(){ document.location = 'hoge.html'; });
    $('#fuga').click(function(){ document.location = 'fuga.html': });
});

解説

【HTML】
各要素(例:button)はid属性のみを持ちます。

【JavaScript(jQuery)】
id属性ごとにクリック時の動作を設定します。

とてもシンプルで、コードも一見すると短いです。

しかし、それはサンプルでのお話。
もし、このボタン要素が#piyo, #foo, #bar, #baz, …と増えた場合、
HTML要素はもちろん、JavaScript側も、以下の様に増えて行きます。

HTML







JavaScript(jQuery)

    $('#hoge').click(function(){ document.location = 'hoge.html'; });
    $('#fuga').click(function(){ document.location = 'fuga.html': });
    $('#piyo').click(function(){ document.location = 'piyp.html': });
    $('#foo').click(function(){ document.location = 'foo.html': });
    $('#bar').click(function(){ document.location = 'bar.html': });
    $('#baz').click(function(){ document.location = 'baz.html': });

要素の増減がある度にHTMLとJavaScriptの双方をメンテナンスせねばならず、
とても面倒です。

classでまとめて、動作を設定(自前の属性値を使う)

一方、要素をclassでまとめて、動作を設定する方法。

HTML



JavaScript(jQuery)

function change_location(jqObj){
    var uri = jqObj.attr('my_location');
    document.location = uri;
}

$(function(){
    $('.change_location').click(function(){
        change_location($(this));
    }
});

解説

【HTML】
各要素(例:button)は共通のclass属性と個別の属性(例:my_location)を持ちます。
個別の属性値を持つ分、各要素のHTMLは少しだけ長めです。

【JavaScript(jQuery)】
class属性共通の関数を1つだけ持ちます。(例:change_location関数)
そして、class属性共通の関数呼び出しも1つだけ持ちます。(例:$(‘.change_location’).click)

ここだけ見ると、こう思うかもしれません。
「なんだ、classとやらを使う方がHTMLも長くなるし、JavaScriptも複雑じゃないか。」と。

しかし、それはサンプルでのお話。

idによる動作の割り振りと比較するために、
このボタン要素が#piyo, #foo, #bar, #baz, …と増えた場合の結果を以下に示します。

HTML







JavaScript(jQuery)

    /* 変更不要 */

こちらも、要素の増減に合わせてHTMLのメンテナンスは必要です。

しかし、JavaScript側は変更がまったく要りません。

どちらが楽かは言うまでもありませんね。
編集ミスによるリスクも最小限に抑えられます。

似たような動作をさせたい要素はclass属性でまとめると楽」への1件のフィードバック

  1. ピンバック: Tips Focus【20110812版】= iPhone/Macの使いこなしのワンポイントを紹介。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータがどう処理されているか知りたい方はこちらをお読みください