【初心者→実装まで】JavaScriptで3人麻雀スコア計算アプリを作った話（ロジック重視）

結論

JavaScriptでアプリを作るときは
**「UIより先にロジックを作る」**のが最短で成長できます。

なぜ作ろうと思ったか

プログラミングをやり直すにあたって、

とりあえず何か作りたい
でもコピペだけにはしたくない

と思い、
**自分がよく使う「麻雀のスコア計算」**を題材にしました。

学びの核心

今回一番大事だったのはこれです👇

HTML：場所を作る
JavaScript：データを取る・計算する
JavaScript：結果を書き込む

この構造を理解できたのが一番大きいです。

作ったもの
機能
3人の点数入力
合計105,000点との差表示
順位判定
ウマ計算（+10 / 0 / -10）
最終スコア表示
空欄チェック
同点チェック（未実装として停止）
完成コード
index.html

麻雀スコア計算

麻雀スコア計算

計算する

script.js const button = document.getElementById("testButton");

button.addEventListener("click", function () {

const valueA = document.getElementById("scoreA").value;
const valueB = document.getElementById("scoreB").value;
const valueC = document.getElementById("scoreC").value;

if (valueA === "" || valueB === "" || valueC === "") {
alert("全てのスコアを入力してください");
document.getElementById("result").textContent = "全てのスコアを入力してください";
return;
}

const a = Number(valueA);
const b = Number(valueB);
const c = Number(valueC);

if (a === b || b === c || a === c) {
document.getElementById("result").textContent = "同点です。順位選択機能は未実装です";
return;
}

const total = a + b + c;
const diff = total - 105000;

let message;
if (diff === 0) {
message = "OK";
} else if (diff < 0) {
message = Math.abs(diff) + "点足りません";
} else {
message = diff + "点多いです";
}

let rankA, rankB, rankC;

if (a > b && a > c) rankA = 1;
else if ((a > b && a < c) || (a < b && a > c)) rankA = 2;
else rankA = 3;

if (b > a && b > c) rankB = 1;
else if ((b > a && b < c) || (b < a && b > c)) rankB = 2;
else rankB = 3;

if (c > a && c > b) rankC = 1;
else if ((c > a && c < b) || (c < a && c > b)) rankC = 2;
else rankC = 3;

const uma = (rank) => rank === 1 ? 10 : rank === 2 ? 0 : -10;

const scoreA = (a - 40000) / 1000 + uma(rankA);
const scoreB = (b - 40000) / 1000 + uma(rankB);
const scoreC = (c - 40000) / 1000 + uma(rankC);

document.getElementById("result").textContent =
合計: ${total}点 / ${message} A: ${rankA}位 ${scoreA} B: ${rankB}位 ${scoreB} C: ${rankC}位 ${scoreC};
});
詰まったポイント
① HTMLとJSを同じファイルに書いていた

👉 完全に動かなくなる

② ボタンIDがズレていた

👉 イベントが発火しない

③ valueとNumberの順番

👉 空欄チェックできなくなる

一番の学び

結論：

👉 「コードを書く」より「処理を分解する」方が重要

今後やること
同点時の順位選択UI
データ保存
ランキング機能
まとめ

初心者が最初にやるべきは

👉 フレームワークではなく
👉 小さくても「動くものを作ること」

これが一番成長が早いと感じました。

最後に

今回のように

入力 → 計算 → 表示

この流れを理解できるだけで、
ほとんどのWebアプリの基礎が見えるようになります。

ここまで読んでいただきありがとうございました。