このページについて
概要
1ミリもプログラミングをしたことのない方に対して、「アプリとかブログとかがどのようにして動いているのか凄いざっくりと知りたい」という要望とかあったりします？と思い書きました。
概要のみ説明して、数記事に分けてアプリの成り立ちが理解いただければと思います。
「誰」向けのページ？
・プログラミング超初心者の方。
・筋トレされている方・プログラミングとか全く触ったことのない方で、アプリがどのようにして動いているのか興味がある方。
【筋トレ】目的でいらっしゃる方で、プログラミングに全く触れたことのない方は、こういったアプリケーションがどのように動いているのかさらっとご確認いただき、「へーー(・ω・)」と思っていただければ幸いです。
できれば日曜大工としてプログラミングを始めていただければ、もっと幸いです。
『RM換算表』の「処理」部分について
『RM換算表』の処理はどのようにして行っているのか？
とりあえず今回は「処理」について書きます。
クリックしたものをオレンジ色にしたり、「クリックした1RMの重さ±１kgのものを全体から探す」処理はこちらのたった「31行」で全て行われています。
<script>
$(function() {
//クリックしたら発動
$('span.rm').click(function() {
var onerm = parseFloat(this.innerHTML);
var max = 0;
var hdnId = '';
var divzone = '';
//初期化
$('div').css('background-color', '');
for(d = 1; d < 81; d++) {
for(w = 1; w < 51; w++) {
hdnId = 'hdn' + d + 'w' + w;
max = parseFloat(document.getElementById(hdnId).value);
if (onerm > max - 1 && onerm < max + 1) {
divzone = '#d' + d + 'w' + w;
$(divzone).css('background-color', 'orange');
}
}
}
});
});
</script>
１つ１つ処理を解説していきますね。
『jQuery』の力を借りる。
<script>
$(function() {
//クリックしたら発動
$('span.rm').click(function() {
});
});
</script>
まず、便利な『jQuery』のお力を借りたいと思います。
『jQuery』とは、JavaScriptというプログラミング言語の「フレームワーク」と呼ばれます。
フレームワークとは、いろいろなアニメーションなどの複雑な処理をサクっと表示してくれる凄く便利な道具箱のようなものです。
『jQuery』で処理を行うには
・『jQuery』を呼び出す。
・「$(function() {}」で囲んだ中で処理を行う。
というルールに従って書きます。
次に「『RM換算表』の数字をクリックしたらオレンジ色に変えたいな」という処理を書きます。
「$(‘span.rm’).click(function() {}」で、「span.rm（1RMの重量が書いてある部分）」をクリックしたら、以下の処理をしてください。ということを書きます。
どこがクリックされたのか？
var onerm = parseFloat(this.innerHTML); var max = 0; var hdnId = ''; var divzone = '';
必要なのは「var onerm = parseFloat(this.innerHTML);」の部分だけです。（あとの3行は「後で使うものを先に書いてあるだけ。」）
こちらは「『onerm』という数字の入る「箱」を用意して、クリックした場所の数値を取得する。」という処理になります。
※『onerm』という名前は好きに決められます。「aaa」でも「omosa」でも何でもいいです。
前回のクリックした場所の色を戻す。
//初期化
$('div').css('background-color', '');
クリックする場所が最初の場所であればいいですが、2回目以降のクリックであれば、前回オレンジ色にした場所がずっとオレンジ色になった状態が続きます。
なので、前回までに変更した「全部」の色指定を「無」にします。
表示されている「重量」を全部見ます。
for(d = 1; d < 81; d++) {
for(w = 1; w < 51; w++) {
}
}
実は『RM換算表』は、表示されている重さを「全部」見ています。
全部で4,000個あります。
1RMの重さをクリックするたびに4,000個の数値を全部参照しています。
こちらの「for(d = 1; d < 81; d++) {}」は、縦の行の総数を参照する処理です。
その１行１行に51列の数値が存在します。
なので、その51列も全て見たいので81行の参照の中に51列の参照する処理も書いていきます。
クリックした数値と、各々の数値を比較します。
hdnId = 'hdn' + d + 'w' + w;
max = parseFloat(document.getElementById(hdnId).value);
if (onerm > max - 1 && onerm < max + 1) {
}
左上の数値から、右下の最後の数値までを１つ１つ見ていきます。
「if (onerm > max – 1 && onerm < max + 1) {}」の記述で、先ほどクリックして取得した重量「onerm」と、１つ１つ比較していく重量を比較していきます。
今回は、±１kgの範囲で取得していきます。
なので、「onerm > max – 1（各々のセルの重さ-1以上）」「&&（同時に）」「onerm < max + 1（各々のセルの重さ+1以下）」の場合は「{}」内の処理を実行します。と書きます。
条件に合った重量の場所をオレンジ色にする
divzone = '#d' + d + 'w' + w;
$(divzone).css('background-color', 'orange');
さて、上記で１つ１つ比較していった結果、条件に合う部分はオレンジ色に染めていきます。
上記記述で染めることができます。
いかがでしたでしょうか？
「処理」の部分はこれで全部ですが、ざっくりどんなことが行われているのかご理解いただけますと幸いです。
あとがき
どこまで解説すべきなのか？
処理の部分について解説を行おうとすると細かいところ際限がないので、かなり絞って解説しました。
解説の展開としては、裾野を広げていく方が、プログラミングのパーツを１つ１つ解説していくよりも良いのではと考え実験的に投稿してみました。
セオリー通りでは「表示」 → 「処理」
普通、プログラミングのセオリー通りに行うのであれば「表示」 → 「処理」と解説していくのですが、ざっくりっと理解する場合は「処理」の方が先かと思い書きました。
「表示」は解説すべきことが多くなる上に、サーバーサイドの解説も必要だったりするので長くなりがちです。
