css,javascript,actionscriptを中心に勉強したことをまとめるブログ

javascriptを書いていると、動的に書き出したい部分のHTMLがスクリプト内に散乱してしまうことありますね。
jQueryを使っていると、簡単にHTMLが変えられるので、HTMLを書く機会も多いかと。
しかも変数を挟むともう、大変なことになりますよね。

できるだけメインのスクリプトと分離させてあげると可読性も高まると思って、自分なりに作ってみました。

make_html

(function($){

$.fn.make_html = function(){
    var args = arguments;
    var temp = args[0];
    var dic = args[1];
    var type = typeof dic;
    var list = temp.match(/{JQ:.+?}/g);
    var r_list = [];

    /* 配列を文字のみにする */
    for(var i=0,n=list.length;i<n;i++){
        var str = list[i].match(/{JQ:(.+)?}/);
        r_list.push(str[1]);
    }

    /* 引数がオブジェクトの場合 */
    if(type == 'object'){
        for(var j=0,m=r_list.length;j<m;j++){
            var value = dic[r_list[j]] || '';
            var re = new RegExp('{JQ:'+r_list[j]+'}','g');
            temp = temp.replace(re,value);
        }
        this.html(temp);
        return this
    }

    /* 引数が複数の文字列の場合 */
    else if(type == 'string'){
        for(var j=0,m=r_list.length;j<m;j++){
            var value = args[j+1] || '';
            var re = new RegExp('{JQ:'+r_list[j]+'}','g');
            temp = temp.replace(re,value);
        }
    this.html(temp);
    return this
    }
};

})(jQuery);

仕様

jQueryオブジェクト.make_html(テンプレート文字列,ハッシュ形式の値);

今回はjQueryのpluginの形で実装しました。
第一引数にはテンプレートとなるHTML文字列。
第二引数にはテンプレートに差し込む値をハッシュ形式で。

var str = '<ul><li>{JQ:detail}それから{JQ:main}</li></ul>';
var dic = {
    'detail' : '内容',
    'main' : 'メインだよ'
};

$('#rad').make_html(str,dic);

テンプレート文字列内の特定の文字列が置換されます。

テンプレート文字列

テンプレート文字列の使い方。

{JQ:名前}

上記のような文字列が差し込まれた部分は、make_htmlで指定される値に置換されることになります。
指定する名前は自由です。

var str = '<ul><li>{JQ:detail}それから{JQ:main}</li></ul>';

ハッシュ形式の値

置換する値はハッシュ形式で指定します。

var dic = {
    'detail' : '内容',
    'main' : 'メインだよ'
};

テンプレート内の置換文字列に指定した名前と同じkeyの値が置換されます。

var str = '<ul><li>{JQ:detail}それから{JQ:main}</li></ul>';
↓
<ul><li>内容それからメインだよ</li></ul>

同じ置換文字列は全て同じ値に置換されます。

var str = '<ul><li>{JQ:detail}それから{JQ:detail}</li></ul>';
↓
<ul><li>内容それから内容</li></ul>

また、値はハッシュ形式ではなく、通常の文字列でも指定できます。

var str = '<ul><li>{JQ:detail}それから{JQ:main}</li></ul>';
$('#rad').make_html(str,'内容','メインだよ');

この場合、指定した引数の順番で置換されます。

1番目の置換文字列　{JQ:detail}
↓
1番目の引数（正確には２番目）　'内容'

2番目の置換文字列　{JQ:main}
↓
2番目の引数（正確には3番目）　'メインだよ'

というように。
まあでも、あんまり使わないかも。

参考にしたモジュール

Template - python

pythonのモジュールです。
これを真似てみました。

まとめ

とりあえずで作ったんですが、これを使っていろいろとやってみようと思います。
いちおう利点としては、

• HTML文字列をメインのスクリプトから分離できる。
• 変数を使わず正規表現で置換するので、HTML文字列の可読性が高まる。
• 変数の数が少なくてすむ。

ただし、大規模なテンプレートエンジンではないので、ある程度以上の規模だと使い勝手が悪くなるかもしれません。
あと、テンプレート文字列自体は、Ajaxを使えば別ファイルにしてしまうこともできますね。

MT等で使うようなしっかりとしたテンプレートエンジンもあるようです。

jTemplates

こちらもチェックしてみてはいかがでしょう。
でも、自分としてはjavascriptではそんなに大規模なテンプレートエンジンは必要ないんじゃないかと思っています。
そこまでやりたいんなら、サーバーサイドの言語を使ったほうがよさそうですから。
うまく使い分けるのも大切です。
では。