今月は直近の大きな提携に向けて、ひたすらコピペプログラミングしてます。
さすがにコピペのみだと対応しきれない部分が多すぎるので日々勉強してますが、まだまだ初心者。
とりあえず今日書いたコードのおさらい。
とある配列データを取得して、ランダムで抽選した6つの配列要素を、テーブルを使って2列3行にデータを並べるプログラムを、JavaScriptとPerlのtemplate toolkitを使って二種類書きました。
配列の参照方法と、while分の中でのif分を使った条件分岐辺りがおさらいポイントです。
簡単なプログラムですが、まだまだ悩みますねぇ。
脱コピペプログラマ。
■JavaScript版
<script type="text/javascript">
<!--
var hogedata = getJSONData('http://domain.com/html/hoge.js');
// 配列hogedataに、hoge.jsのデータを流し込む
var cnt = 6;
// 変数cntを宣言し、繰り返し回数6をセット
var rnd = Math.floor(Math.random() * hogedata.length);
// 変数rndを宣言し、hogedataの要素数を上限として、乱数を発生
// floor関数で小数点以下を切り捨てて、変数rndに代入
if(rnd > hogedata.length - cnt){
rnd = hogedata.length - cnt;
}
// 変数rndに代入された数値が、hogedataの要素数-6より大きい場合は、hogedataの要素数のマイナス6の数値をrndに代入
// 最後の6つの要素を参照する
h = '<table>';
h += '<tr>';
var i = rnd;
// 配列参照用の変数iを宣言、rndの値を代入
var c = 1;
// 変数cを宣言、1を代入
while(i <= rnd + cnt - 1){
// iが、乱数rndから1を引いた数に、繰り返し回数cnt6以上になるまで、以下の処理を繰り返す
// -1 は、配列要素の1番目が0番であるための処理
if(c == 3){
// もし変数cが3の場合は、trを追加し、変数cを1に初期化
c = 1;
h += '<tr>';
}
h += '<td width="168" valign="top" style="line-height:140%">';
h += '<a href="' + hogedata[i].url + target="_blank">';
// 配列hogedataの要素番号[i]のurlデータを表示
h += '<span class="title">' + hogedata[i].name + '</span><br>';
h += '<img width="75" height="75" border="0" src="' + hogedata[i].imageurl + '"><br> ';
h += '<span class="address">' + hogedata[i].address + '<br>';
h += '</span>';
h += '</a>';
h += '<br></td>';
c == 2 ? '</tr>' : '';
// 変数cが2の場合に、trを閉じる
c++;
i++;
//変数cとiをインクリメントし、処理を繰り返す
}
h += '</table>';
document.write(h);
//-->
</script>
JavaScriptはhtmlを書くのに直接書けないのでコードがぐちゃぐちゃ見えて嫌ですね。
初心者はこれだけで嫌悪感を感じてしまいます。
■template toolkit版
[% USE hogedata = HOGE('/var/www/domain.com/html/js/hoge.js') -%]
// 配列hogedataにjsのデータを流し込む
[% cnt = 6 -%]
// 変数cntを宣言、初期値6をセット
[% USE rnd = RAND(hogedata.size) -%]
// 変数rndを宣言、hogedataの配列の要素数の中から、ランダムで要素数を上限とした整数を初期値としてセッット。
// template toolkitでは、RANDで整数が返されるようで、jsみたいな小数点以下切り捨て処理は不要みたい。便利！
[% IF hogedata.size - cnt < rnd -%][% rnd = hogedata.size - cnt -%][% END -%]
// hogedataの要素数から、cnt（4）を引いたものが、rnd（ランダム整数）より小さい場合、rndには配列要素上限からcnt(4)を引いた数を代入
<table><tr>
[% c = 1 -%]
// 変数cを宣言、初期値1をセット
[% FOREACH i IN hogedata -%]
// 変数iを宣言、hogedataの配列を代入し、繰り返し処理を開始
[% NEXT IF loop.count <= rnd -%]
// ⑦変数rndまでroopをスキップ
[% IF c == 3 -%]<tr>[% c = 1 -%][% END -%]
// 変数cが3の場合、<tr>を記述し、変数cを1に初期化
<td width="168" valign="top" style="line-height:140%"> <a href="[% i.url %]" target="_blank" style="text-decoration:none;">
<span class="title">[% iname -%]</span><br>
<img border="0" src="[% i.imageurl -%]&w=70&h=70&auto_offset=1&size_img=0&zoom_in=0"><br>
<span class="address">
[% IF i.entry -%]<a href="http://www.domain.com/thread/[% i.entry.-1 -%]">掲示板を見る</a>
[% ELSE -%]<a href="http://www.domain.com/thread/id=[% i.id -%]">評判を聞く</a>[% END -%]
<br><br></td>
[% (c == 2) ? '</tr>' : '' -%]
// ⑨変数cが2の場合、trを閉じる、そうでない場合は、何もせずに次の処理を行う
[% c = c + 1 -%]
// ⑩変数cに数値1を追加
[% LAST IF loop.count >= rnd + cnt -%]
// ⑪loop.countが、変数rndと変数cnt（4）の合計以上になった場合に処理を終える
template toolkitは非常に分かりやすい。
コードもシンプルで見やすいですね。
日本語のドキュメントがほとんどないのが難です。
を読みました。