ブログ
第１０章 一覧
最後の最後にどうでもいいようなテーマを持ってきてしまったかも。
「一覧」って。
私が逆の立場だったら、見てテンション下がるわ～。
これは一種の新しい切り口。
以前、プログラムの動きとは「読んで書くだけ」と言いましたが、その、「書くだけ」の部分で共通なものとして多いのが「一覧」かと。
もちろん「一覧」の先には「詳細」を表示するという流れになる＆その詳細こそがゴールなのですが、詳細表示には大したプログラム的要素はないか、あった場合はその用途によって様々なので、一概にこうだ、とは説明しづらいものです。なので、ここでははしょります。
「一覧」は、どんなものでも共通のルールでしばることができます。
また、けっこう手間がかかる部分でもあります。
なんで意外と重要っす。
またゲームでの例え話になりますが、アイテム一覧とかモンスタ一覧とかって、ちょっと見てるだけで嬉しいじゃないですか、なんならこの一覧を眺めるためにゲームを続けていると言っても過言ではない、コレクター魂を刺激する、それはもう何はともあれ「一覧」です。
ソシャゲによったら、戦闘や戦略なんか二の次で、「一覧」を充実させるために働いているようなゲームも少なくないのでは、と。
なぜなら私がそんな感じのゲームにシャレにならないような時間を費やしているのだから、間違いない。
うわ、なんか嬉しいですね。
事務的な仕事で扱っている一覧表と何も変わらないのに、内容が変わるだけで、もう嬉しい。
ぼくの考えたモンスター、みたいなのを好きに書くだけでワクワクしてくる。
この良く見すぎる一覧表ですが、とりあえず的なプログラムは以下です。
<script>
// 読んで
var data1 =[
{"name":"モンスター１", "rarity":"★", "attribute":"土"},
{"name":"モンスター２", "rarity":"★", "attribute":"水"},
{"name":"モンスター３", "rarity":"★", "attribute":"火"},
{"name":"モンスター４", "rarity":"★★", "attribute":"闇"},
{"name":"モンスター５", "rarity":"★★", "attribute":"風"},
{"name":"モンスター６", "rarity":"★★★", "attribute":"光"}
];
// 書く
var html = '<table class="table table-striped"><tr><th>名前</th><th>レア度</th><th>属性</th></tr>';
for(var i = 0 ; i < data1.length ; i++ ){
html += '<tr><td>' + data1[i]['name'] + '</td><td>';
html += data1[i]['rarity'] + '</td><td>';
html += data1[i]['attribute'] + '</td></tr>';
}
html += '</table>';
document.getElementById("sample-1").innerHTML = html;
</script>
<div id="sample-1"></div>
var data1 のところが、本来データベースから受け取る情報部分になるのですが、今回は便宜的にべた書きしました。
やってることは繰り返しで回しながら１行ずつ書いているだけです。
────────────────────
■ 連装配列
────────────────────
data1 の {"name":"モンスター１", "rarity":"★", "attribute":"土"} のところですが、これは連想配列と言って、前章で書いた配列の仲間です。
配列の背番号にあたるところを明示的に文字で指定したものが連想配列です。
ちなみに連想配列で配列を表現すると以下のような感じになります。
{"0":"モンスター１", "1":"★", "2":"土"} // 配列っぽい連想配列
↓ まぁ同じ ↑
["モンスター１","★","土"] // 配列
なんで背番号を文字にするのか、は、その方が分かりやすいときがあるからです。
配列だけで全部できるならそれでも結構で、連想配列なんか使う必要はありません。
でも、まあなんか、連想配列の方が便利なことが増えてきます。複雑なデーターを扱うようになってくると特に。
今は、そんなもんがあるんだね、ぐらいで良いです。
────────────────────
■ コメント
────────────────────
さっきからちょいちょい出てくる // これなんですけど、プログラム中にこれを書くと、その行の // から後ろは無視されます。
なんでこんなものがあるのかというと、プログラマーがメモを残したいとき用です。
他の人が見て分かるようにとか、しばらく経った後の自分が分かるように。
そんなのなくてもプログラムみれば分かるじゃないか、とも言えるのですが、まあ、日本語で書いていたら一発で分かりやすいじゃん。ということで。
でも中には全然書かない人もいます。
コメントが複数にまたがるときは /* */ で挟みます。
/*
こんな風に書くと、
この部分はプログラム的に無視されます。
(´･ω･‘)
*/
と言うわけで、一覧のサンプルもういっちょ。
うひょ。 もうこれスマホアプリの何かでしょう。 パズル＆ゾンビーズのゾンビＢＯＸでしょう。 緑色のやつがレア度の高いゾンビだなっ。 この一覧は雰囲気を伝えたいためだけに作ったため、プログラムはろくなもんじゃないので晒しません。 どうしても見たい人は「ソースを表示」で見て下さいw。 この後、一覧に必要な機能は、「検索」「並び替え」「ページング」等があります。 作りこみだすと、けっこうバカになりません。 というわけで、全１０回、ウルトラ初心者用プログラム入門未満のコーナーは終わりです。 ほんの小さなきっかけにでもなれば良いのですが。 結局何が言いたかったのかと言うと、とりあえず始めてみる、触ってみるのは、メモ帳とブラウザがあれば出来るし、簡単なんだよ、と言うこと。 難しいプログラムを作るのは難しいけれど、簡単なプログラムは簡単なんで。 その後、簡単なところから入っていって、だんだん難しいものに挑戦していっても良いし、簡単なものだけで勝負するのもアリです。 以上、何卒よろしくお願い申し上げます。