🛒 プログラム内部 徹底視覚化シート
1. DOM（ドキュメントオブジェクトモデル）の橋渡し
JavaScriptがHTMLを操作するとき、まずは「どの部品を動かすか」を捕まえる必要があります。
JavaScript
const output =
document.getElementById("output")
➡
HTML
<p id="output">
実体（画面上の表示エリア）
output.textContent = "..."
// 意味：JSで計算した結果を、HTMLの文字として流し込む！
2. 入力チェック（バリデーション）と加算の順番
なぜ ++noNum を後ろにずらしたのか？ その「防波堤」の仕組みです。
入力受取 ユーザーが「あいうえお」と入力した！
バリデーション 数字じゃない！ ➡ ここでストップ（エラー表示）
--- (ここから先は正しい数字の時だけ) ---
計算 税金計算・残金チェック OK!
確定処理 ++noNum (ここで初めて番号を増やす！)
※エラーの時にも番号を増やすと、表のNoが「1, 3, 5...」と飛んでしまうバグになります。
3. テーブル生成の「組み立て工場」
JavaScriptは、1枚の「行(tr)」を完成させてから、最後に「表(tbody)」にガッチャンコします。
td (No)
td (税抜)
td (税額)
td (税込)
⬇ 組み合わせて... ⬇
tr (完成した1行)
⬇ appendChild で表へ追加 ⬇
tbody (表の本体)
4. 三項演算子の「色のスイッチ」
(noNum % 2 === 1) ? "lightcyan" : "white" の仕組み
変数 = ( 条件 ) ? 真のとき : 偽のとき;
5. 通貨編集関数 (edtJPYcur) の中身
ただの数字 1000 を ￥1,000 に変える魔法の呪文です。
value.toLocaleString("ja-JP", { style: "currency", currency: "JPY" });
- ja-JP: 日本語・日本スタイル
- currency: JPY: 通貨単位は「円」
- これで自動的に「￥マーク」と「桁区切りのカンマ」が付きます。