いにしえのフロントエンド入門

第6回の Bootstrap 版の申請フォームに、次の動きを付けます。

• 行を追加・削除 ── 「＋ 行を追加」で明細の行が増え、各行の「削除」で消える（最大10行、最低1行）
• 合計をその場で ── 金額を打つたびに合計が変わる。全角やカンマ入りでも読める（第7回の toAmount）
• お知らせ ── 合計が3万円以上なら「領収書が必要」、読めない金額や円以外の行があればその旨を出す

新しく作るのは js/form.js。第7回の js/app.js は1行も変えません。

ブラウザは HTML を読むと、第2回で見た「木」の形に組み立てます。この木を JavaScript から触れるようにしたものが DOM（Document Object Model）です。form.js は最初に、触る予定の部品を探して変数に入れておきます。

const tbody = document.querySelector('#items'); // id が items の要素を1つ
const rows = document.querySelectorAll('#items tr'); // 当てはまる要素をすべて
totalOutput.textContent = '42,240 円'; // 中の文字を書きかえる
receiptNote.hidden = false; // hidden 属性を外して表示する

部品の探し方は、第4回の CSS のセレクタとまったく同じです。#items は id、[name="amount"] は属性。CSS で学んだことが、ここでそのまま役に立ちます。

ボタンが押された、文字が打たれた、といった出来事がイベントです。addEventListener で「この出来事が起きたら、この関数を呼んで」と頼んでおきます。

addButton.addEventListener('click', () => addRow());
//          ↑ 出来事の種類   ↑ 起きたときに呼ぶ関数

入力欄には、似た名前のイベントが二つあります。違いを測ってみました。

合計は打つそばから変えたいので、input を使います。呼ばれた関数にはイベントの情報（event）が渡され、event.target で「どの部品で起きたか」が分かります。

第7回で、計算の関数をわざわざ画面から切り離しておいたのは、この回のためです。

head では、二つのファイルを defer 付きで読み込みます。defer の script は書いた順に実行されるので、計算の app.js を先に、それを使う form.js を後に書きます。

<script src="js/app.js" defer></script>   <!-- 計算 -->
<script src="js/form.js" defer></script>  <!-- 画面（app.js の関数を使う） -->

明細の1行は、入力欄が5つとボタンが1つの、けっこう大きな HTML です。これを JavaScript の文字列で組み立てると、読みにくく、間違えやすくなります。そこで、行のひな形を HTML の template 要素に書いておき、JavaScript はそれを複製するだけにします。

    <tbody id="items"></tbody>
  </table>
</div>
<template id="row-template">
  <tr>
    <td><input type="date" class="form-control form-control-sm" name="date" data-label="日付" required></td>
    <td><select class="form-select form-select-sm" name="category" data-label="区分" required>…</select></td>
    <td><input type="text" class="form-control form-control-sm" name="item" data-label="内容" required></td>
    <td><input type="text" class="form-control form-control-sm text-end" name="amount" data-label="金額" inputmode="numeric" autocomplete="off" required></td>
    <td><select class="form-select form-select-sm" name="currency" data-label="通貨">…</select></td>
    <td><button type="button" class="btn btn-outline-danger btn-sm" data-action="remove">削除</button></td>
  </tr>
</template>
<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mt-3">
  <button type="button" class="btn btn-outline-primary btn-sm" id="add-row">＋ 行を追加</button>
  <p class="mb-0 fs-5">合計：<output id="total" class="fw-bold">0</output></p>
</div>
<p class="alert alert-warning py-2 mt-3 mb-0" id="receipt-note" hidden>合計が3万円以上なので、領収書の添付が必要です。</p>
<p class="small text-body-secondary mt-2 mb-0" id="skip-note" hidden></p>

• template の中は「眠っている」 ── 画面に出ず、フォームの値として送られることもない。複製して表に入れたときに、初めて本物の行になる
• 読み上げ用の名前は JS で付ける ── 表の中の入力欄には横に label が置けないので、第3回と同じく aria-label を付ける。何行目かは足してみるまで分からないので、足したり消したりするたびに付け直す
• 足したら、その行へ ── 新しい行の最初の欄にフォーカスを移す。キーボードで操作している人が、そのまま入力を続けられる

「削除」ボタンは行ごとにあり、行は後から増えます。ページを開いたときに各ボタンへ addEventListener しても、後から足した行のボタンには付いていません。そこで使うのが、イベントの泡立ち（バブリング）です。

tbody.addEventListener('click', (event) => {
  const button = event.target.closest('[data-action="remove"]');
  if (button) removeRow(button.closest('tr'));
});

click は、押された部品から親へ親へと伝わっていきます。だから、行を入れる箱（tbody）に1つだけ聞き耳を立てておけば、後から足した行のボタンも拾えます。closest() は「自分から親へたどって、最初に当てはまる要素」を返すので、押された行がすぐ分かります。この書き方をイベントの委任と呼びます。合計の計算の input も、同じく tbody で受けています。

合計の欄には output 要素を使いました。「計算の結果」を表す HTML の要素で、読み上げソフトに「状態のお知らせ」（status）として扱われる役割を持っています。

もう一つ、金額の欄を第3回の type="number" から type="text"（inputmode="numeric" で数字のキーボード）に変えました。理由は、Chromium で実際に打ってみると分かります。

# type="number" の欄に打ち込んだときの value（Chromium で実測）
'14720' → value = '14720'
'14,720' → value = '14720'
'１４７２０' → value = '14720'
'abc' → value = '' 空欄と区別できない

Chromium の number 欄は、打った文字を勝手に直したり捨てたりしたうえで value を渡します（ほかのブラウザで同じとは限りません）。とくに「abc」が空欄と同じ '' になるので、「入力していない」と「数字以外を入れた」を区別できません。そこで、打たれた文字をそのまま受け取り、自分の toAmount で読むことにしました。空欄は数えず、読めない行と円以外の行は合計から外して、その数をお知らせします。

画面に文字を書くとき、form.js では一貫して textContent を使っています。似た道具に innerHTML がありますが、こちらは文字列を HTML として解釈します。利用者が打った文字を innerHTML に入れるとどうなるか、試しました。

const typed = '<img src="x" onerror="window.__xss = 1">ホテル1泊';
a.innerHTML = typed;     // img 要素が作られ、onerror の処理が実行された（__xss が 1 に）
b.textContent = typed;   // ただの文字として表示された

今回はただの印（window.__xss）を立てただけですが、本物の攻撃なら、ここで他人のログイン情報を盗むような処理が動きます（クロスサイトスクリプティング、XSS）。経費精算の「内容」の欄は、申請者が自由に書ける場所です。人が打った文字を画面に出すときは textContent。これは、いにしえから変わらない鉄則です。

Playwright で実際に入力・クリックし、そのたびに行数・合計・お知らせ・フォーカスの位置を記録しました。

# 実際に操作して記録した値（Chromium）
操作 行数 合計 領収書 フォーカス
開いた直後 1 0 円 ― ―
1行目を入力（14720） 1 14,720 円 ― 1行目の金額
「＋ 行を追加」 2 14,720 円 ― 2行目の日付
2行目に「１２，８００」 2 27,520 円 ― 2行目の金額
3行目を足して「14,720」 3 42,240 円 必要 3行目の金額
3行目の通貨をドルに 3 27,520 円 ― ―
 └ 円以外の行が 1 行あります（換算は第10回。合計に入れていません）
2行目を「約1万」に 3 29,440 円 ― 2行目の金額
 └ 金額として読めない行が 1 行あります（合計に入れていません）
2行目を「12800」に戻す 3 42,240 円 必要 2行目の金額
2行目を「削除」 2 29,440 円 ― #add-row

フォーカスの列に注目してください。行を足すと新しい行の「日付」へ、行を消すと「＋ 行を追加」ボタンへ移っています。消した行にあったフォーカスは行き場を失うので、どこへ戻すかを決めておくのも画面の仕事です。最後に form.js の全体です。

// 経費精算システム：申請フォームの明細（第8回）
// 計算は app.js の関数に任せ、ここでは「画面を読む・書く・動きに反応する」だけを担当する

const MAX_ROWS = 10; // 明細は最大10行

// 画面の部品を、最初に一度だけ探しておく
const tbody = document.querySelector('#items');
const template = document.querySelector('#row-template');
const addButton = document.querySelector('#add-row');
const totalOutput = document.querySelector('#total');
const receiptNote = document.querySelector('#receipt-note');
const skipNote = document.querySelector('#skip-note');

/** 行を1つ足す */
function addRow(moveFocus = true) {
  const row = template.content.firstElementChild.cloneNode(true);
  tbody.append(row);
  renumber();
  if (moveFocus) row.querySelector('input').focus(); // 足した行の最初の欄へ（最初の1行のときは動かさない）
}

/** 行を消す */
function removeRow(row) {
  row.remove();
  if (tbody.rows.length === 0) addRow(false); // 最低1行は残す
  renumber();
  updateTotal();
  addButton.focus(); // 消したら「行を追加」ボタンへ戻る
}

/** 行番号に合わせて、読み上げ用の名前を付け直す */
function renumber() {
  [...tbody.rows].forEach((row, i) => {
    const n = i + 1;
    for (const field of row.querySelectorAll('[data-label]')) {
      const label = field.dataset.label;
      field.setAttribute('aria-label', `${n}行目の${label}`);
    }
    row.querySelector('[data-action="remove"]').setAttribute('aria-label', `${n}行目を削除`);
  });
  addButton.disabled = tbody.rows.length >= MAX_ROWS; // 10行になったら追加できなくする
}

/** 画面から明細を読み、合計とお知らせを表示する */
function updateTotal() {
  const items = [];
  let unreadable = 0;
  let foreign = 0;
  for (const row of tbody.rows) {
    const amount = toAmount(row.querySelector('[name="amount"]').value);
    const currency = row.querySelector('[name="currency"]').value;
    if (amount === null) continue;                          // 空欄は数えない
    if (Number.isNaN(amount)) { unreadable++; continue; }  // 金額として読めない
    if (currency !== 'JPY') { foreign++; continue; }       // 円以外は、まだ足さない
    items.push({ amount });
  }
  const total = calcTotal(items);
  totalOutput.textContent = formatYen(total);
  receiptNote.hidden = !needsReceipt(total);

  const notes = [];
  if (unreadable > 0) notes.push(`金額として読めない行が ${unreadable} 行あります（合計に入れていません）`);
  if (foreign > 0) notes.push(`円以外の行が ${foreign} 行あります（換算は第10回。合計に入れていません）`);
  skipNote.textContent = notes.join(' / ');
  skipNote.hidden = notes.length === 0;
}

// 入力のたびに合計を計算し直す（後から足した行にも効くよう、tbody で受ける）
tbody.addEventListener('input', (event) => {
  const name = event.target.name;
  if (name === 'amount' || name === 'currency') updateTotal();
});

// 「削除」ボタン（これも tbody で受ける）
tbody.addEventListener('click', (event) => {
  const button = event.target.closest('[data-action="remove"]');
  if (button) removeRow(button.closest('tr'));
});

addButton.addEventListener('click', () => addRow());

// 最初の1行を作り、合計を表示する
addRow(false);
updateTotal();