実習書：補講 (Lesson5)「税率計算機」

目的：WebページにJavaScriptを加え、入力→処理→出力の流れを体験する。会計実務（軽減税率・丸め処理）も意識する。

Step1 最小構成（フルコード）

 1: <!DOCTYPE html>
 2: <html lang="ja">
 3: <head>
 4:   <meta charset="UTF-8">
 5:   <title>税率計算機 Step1</title>
 6: </head>
 7: <body>
 8:   <h1>税率計算機（Step1）</h1>
 9:   <p>税抜き金額</p>
10:   <input id="price" type="number" placeholder="1000">
11:   <p>税率（%）</p>
12:   <input id="rate" type="number" value="10">
13:   <button id="calcBtn">計算する</button>
14:   <p>税込み金額：<span id="result">---</span></p>
15:
16:   <script>
17:     document.getElementById('calcBtn').addEventListener('click', () => {
18:       const price = Number(document.getElementById('price').value);
19:       const rate  = Number(document.getElementById('rate').value);
20:       const total = price * (1 + rate / 100);
21:       document.getElementById('result').textContent = Math.round(total) + ' 円';
22:     });
23:   </script>
24: </body>
25: </html>
最小のプログラム。ボタンを押すと税込金額を計算して表示する。

Step2 リセット機能＋入力チェック（フルコード）

 1: <!DOCTYPE html>
 2: <html lang="ja">
 3: <head>
 4:   <meta charset="UTF-8">
 5:   <title>税率計算機 Step2</title>
 6:   <style> body{font-family:sans-serif} input,button{margin:.3em;padding:.3em} </style>
 7: </head>
 8: <body>
 9:   <h1>税率計算機（Step2）</h1>
10:   税抜き：<input id="price" type="number" placeholder="1000">
11:   / 税率：<input id="rate" type="number" value="10"> %
12:   <button id="calcBtn">計算</button>
13:   <button id="resetBtn">リセット</button>   <!-- ★追加 -->
14:   <p>税込み金額：<span id="result">---</span></p>
15:
16:   <script>
17:     const $ = id => document.getElementById(id);
18:
19:     $('calcBtn').addEventListener('click', () => {
20:       const price = Number($('price').value);
21:       const rate  = Number($('rate').value);
22:
23:       if (!isFinite(price) || price <= 0) {    <!-- ★追加 -->
24:         alert('金額を正しく入力してください'); <!-- ★追加 -->
25:         return;                                <!-- ★追加 -->
26:       }                                        <!-- ★追加 -->
27:       if (!isFinite(rate) || rate < 0) {       <!-- ★追加 -->
28:         alert('税率を正しく入力してください'); <!-- ★追加 -->
29:         return;                                <!-- ★追加 -->
30:       }                                        <!-- ★追加 -->
31:
32:       const total = price * (1 + rate / 100);
33:       $('result').textContent = Math.round(total) + ' 円';
34:     });
35:
36:     $('resetBtn').addEventListener('click', () => {  <!-- ★追加 -->
37:       $('price').value = '';                         <!-- ★追加 -->
38:       $('rate').value = 10;                          <!-- ★追加 -->
39:       $('result').textContent = '---';               <!-- ★追加 -->
40:     });                                              <!-- ★追加 -->
41:   </script>
42: </body>
43: </html>
Step1に「入力チェック」と「リセット処理」を加えた。ユーザーに親切な改良。

Step3 軽減税率＆レシート風出力（フルコード）

 1: <!DOCTYPE html>
 2: <html lang="ja">
 3: <head>
 4:   <meta charset="UTF-8">
 5:   <title>レシート風 Step3</title>
 6:   <style>
 7:     body { font-family: monospace }
 8:     pre { background:#f5f5f5; padding:10px }
 9:   </style>
10: </head>
11: <body>
12:   <h1>レシート風（軽減税率対応）</h1>
13:   商品A <input id="a" type="number" value="500"> 円 税率
14:   <select id="ra"><option>10</option><option>8</option></select><br>   <!-- ★追加 -->
15:   商品B <input id="b" type="number" value="1200"> 円 税率
16:   <select id="rb"><option>10</option><option>8</option></select><br>  <!-- ★追加 -->
17:   商品C <input id="c" type="number" value="300"> 円 税率
18:   <select id="rc"><option>10</option><option>8</option></select><br>  <!-- ★追加 -->
19:
20:   <button id="calcBtn">計算</button>
21:   <button id="resetBtn">リセット</button>
22:
23:   <pre id="result">---</pre>
24:
25:   <script>
26:     const fmt = new Intl.NumberFormat('ja-JP',{style:'currency',currency:'JPY'});  <!-- ★追加 -->
27:     const rows = [ ['a','ra','商品A'], ['b','rb','商品B'], ['c','rc','商品C'] ];  <!-- ★追加 -->
28:     const $ = id => document.getElementById(id);
29:
30:     $('calcBtn').addEventListener('click', () => {
31:       let sub = 0, tax = 0, lines = [];
32:       for (const [v,r,name] of rows) {
33:         const p = Number($(v).value);
34:         const rate = Number($(r).value);
35:         if (p > 0) {
36:           const t = Math.floor(p * rate / 100);      <!-- ★切り捨て -->
37:           sub += p;
38:           tax += t;
39:           lines.push(`${name}\t${fmt.format(p)} (税${fmt.format(t)})`);
40:         }
41:       }
42:       $('result').textContent = lines.join('\n') +
43:         `\n----------------` +
44:         `\n小計 ${fmt.format(sub)}` +
45:         `\n消費税 ${fmt.format(tax)}` +
46:         `\n合計 ${fmt.format(sub + tax)}`;
47:     });
48:
49:     $('resetBtn').addEventListener('click', () => {
50:       $('a').value=''; $('b').value=''; $('c').value='';
51:       ['ra','rb','rc'].forEach(id => $(id).value=10);
52:       $('result').textContent='---';
53:     });
54:   </script>
55: </body>
56: </html>
Step2に「商品ごとの税率」と「レシート風出力」を追加。現実の会計処理に近づけた。

確認問題

Q1: HTMLとJavaScriptの役割の違いを1行で説明せよ。
Q2: addEventListener('click', ...) の用途を説明せよ。
Q3: 金額 2,980 円・税率 10% の税込を四捨五入すると？（円）
Q4: 消費税を 1 円未満切り捨てで求める式を JavaScript で書け。

発展課題

振り返り

★「入力→処理→出力」という情報処理の基本サイクルをWebで体験できた。
★制度（軽減税率・端数処理）とプログラムの関係を考えることは、実社会に直結するプログラミング学習である。
★学習ポイント
　*　HTML：フォーム要素に id を付け、JavaScript から参照。
　*　JS：document.getElementById と addEventListener でイベントを登録。
　*　丸め：合計金額（円）に対して四捨五入／切り上げ／切り捨てを選択可能。
　*　アクセシビリティ：aria-live で結果更新をスクリーンリーダーに通知。
　*　スタイル：簡単な CSS を内蔵。フレームワーク不使用で単一のHTMLとした。