こんな方にオススメの記事
そんなニーズがあるか分かりませんが…笑
先日、練習スケジュールの策定でざっくり計算するにはちょうど良かったのでおすそ分けしておきます！
曜日別走行距離算出ツール
表の比率を入力して試算してください。
（平日2回、週末1回(平日の2倍)走りたい場合の例：月=1, 水 =1, 土=2）
km
0 km
| 曜日 | 月 | 火 | 水 | 木 | 金 | 土 | 日 |
|---|---|---|---|---|---|---|---|
| 比率 | |||||||
| 距離 | 0 km | 0 km | 0 km | 0 km | 0 km | 0 km | 0 km |
【おまけ】1発で計算ツールを作る方法
記事の目的は以上ですが、このままだとちょっとつまらないので「1発で計算ツールを作る方法」を共有しておこうと思います。
“1発”というくらいなので、やりかたは超カンタン
以下、指示内容と出力結果を転記しておくので何かの（何の？）参考にしてください。
指示内容
HTMLとJavaScriptを使い、月間走行距離から曜日別の走行距離を試算するWebツールを作成したい。
各曜日の走行距離は曜日別に設定した比率に基づいて算出するものとする。
#エンコード#
Shift-JIS
#画面レイアウトイメージ#
月間走行距離 [ M ] km
週間走行距離 W km
┌──┬──┬──┬──┬──┬──┬──┬──┐
│曜日│月 │火 │水 │木 │金 │土 │日 │
├──┼──┼──┼──┼──┼──┼──┼──┤
│比率│A1▼│B1▼│C1▼│D1▼│E1▼│F1▼│G1▼│
├──┼──┼──┼──┼──┼──┼──┼──┤
│距離│A2km│B2km│C2km│D2km│E2km│F2km│G2km│
└──┴──┴──┴──┴──┴──┴──┴──┘
週間走行回数 R 回
#コントロール#
・月間走行距離 [ M ] :テキストボックス
※テキストボックスは0～999の数値のみ入力可
※範囲外の文字が入力された場合「0～999の数字を入力してください」のalertをポップアップ表示する
・週間走行距離 W km :ラベル
・週間走行回数 R 回 :ラベル
・比率 A1▼～G1▼ :コンボボックス
※コンボボックスの選択肢 = [0, 0.5, 1, 1.5, 2, 3, 4, 5, 10]
※コンボボックスの既定値 = 0
・距離 A2～G2 :ラベル
・罫線で囲まれた領域は表形式のテーブルとする
#計算式#
・M = 入力値(0～999)
・W = M / 4.3 (小数点第一位で四捨五入)
・A1 ～ G1 = 選択値
・A2 = W / (A1 + B1 + C1 + D1 + E1 + F1 + G1) * A1 (小数点第一位で四捨五入)
・B2 = W / (A1 + B1 + C1 + D1 + E1 + F1 + G1) * B1 (小数点第一位で四捨五入)
・以下、C2 ～ G2 の計算もA2, B2...に倣う
・R = {A1 ～ G1｝で0以外が選択されている数（例: A1=0.5, B1=1, E1=2, 他=0の場合、3とする）
#イベント#
上記の#計算式#を実行するのは以下のいずれかのタイミングとする
・M入力直後
・A1 ～ G1選択直後
以上
これを食べさせた結果が以下です↓
出力結果
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="Shift-JIS">
<title>曜日別走行距離計算ツール</title>
<script>
function calculate() {
// 月間走行距離の取得
let M = parseFloat(document.getElementById("monthlyDistance").value);
// 入力値チェック
if (isNaN(M) || M < 0 || M > 999) {
alert("0～999の数字を入力してください");
return;
}
// 週間走行距離の計算
let W = Math.round(M / 4.3 * 10) / 10;
document.getElementById("weeklyDistance").innerText = W + " km";
// 比率を取得
let ratios = [];
for (let i = 1; i <= 7; i++) {
ratios.push(parseFloat(document.getElementById("ratio" + i).value));
}
// 有効な比率の合計と走行回数
let totalRatio = ratios.reduce((acc, val) => acc + val, 0);
let runCount = ratios.filter(r => r > 0).length;
document.getElementById("runCount").innerText = runCount + " 回";
// 各曜日の走行距離の計算
for (let i = 0; i < 7; i++) {
if (totalRatio > 0) {
let distance = Math.round((W / totalRatio * ratios[i]) * 10) / 10;
document.getElementById("distance" + (i + 1)).innerText = distance + " km";
} else {
document.getElementById("distance" + (i + 1)).innerText = "0 km";
}
}
}
</script>
</head>
<body>
<h2>曜日別走行距離計算ツール</h2>
<label for="monthlyDistance">月間走行距離</label>
<input type="text" id="monthlyDistance" oninput="calculate()" maxlength="3" /> km<br/><br/>
<label>週間走行距離:</label> <span id="weeklyDistance">0 km</span><br/><br/>
<table border="1">
<tr>
<th>曜日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
<th>日</th>
</tr>
<tr>
<td>比率</td>
<td>
<select id="ratio1" onchange="calculate()">
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="10">10</option>
</select>
</td>
<td>
<select id="ratio2" onchange="calculate()">
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="10">10</option>
</select>
</td>
/* 長いので割愛 */
<td>
<select id="ratio7" onchange="calculate()">
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td>距離</td>
<td><span id="distance1">0 km</span></td>
<td><span id="distance2">0 km</span></td>
<td><span id="distance3">0 km</span></td>
<td><span id="distance4">0 km</span></td>
<td><span id="distance5">0 km</span></td>
<td><span id="distance6">0 km</span></td>
<td><span id="distance7">0 km</span></td>
</tr>
</table><br/>
<label>週間走行回数:</label> <span id="runCount">0 回</span>
</body>
</html>これをブログエディタに貼り付けて、改行などを整えるだけで完成ですね。
ほら、あっという間でしょ？笑
さいごに ～1億総エンジニア社会へ～
「指示内容がめんどくさそう…」と思ったかもしれませんが、0からプログラミングするよりだいぶラクです。
おかげで私はJavaScriptの勉強やめちゃいました笑
指示文の書き方（プロンプトエンジニアリング）さえ習得してしまえば、プログラミング以外でも活用できるので、ご興味があればぜひ勉強してみてください＾＾
