【JavaScript入門】テストを行う

　ドキュメントを書くだけでは品質は保証できません。テストコードを用意しておけば、関数の仕様が後で変わっても「何が壊れたか」を即座に検知できます。ここでは最小構成のブラウザ実行テストとして console.assert() を使った “お手軽アサーション” の書き方を紹介し、あとで本格的なフレームワーク（Jest、Vitest など）へスムーズに移行できるようテスト構造の基本を押さえます。

テスト種別主な用途特徴
アドホック確認その場で console.log手軽だが再利用性ゼロ
簡易アサーションconsole.assert で真偽判定ブラウザ標準・依存ゼロ
ユニットテストJest / Vitest / MochaCLI 実行・CI 統合が容易
E2E テストPlaywright / Cypress実ブラウザでフロー検証

まず “壊れたら赤く光る” 仕組みを持つだけで、修正時の心理的ハードルが激減します。簡易でよいので必ず 1 本はテストを書く習慣を。

サンプル：カタカナをひらがなへ変換する関数 + 簡易テスト

ファイル名： test_kata2hira.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>🧪 簡易テストデモ</title>
<style>
  body{font-family:"Segoe UI",sans-serif;background:#f7fbff;margin:2rem}
  h1 {font-size:1.6rem;text-align:center}
  pre{background:#272822;color:#eee;padding:1rem;border-radius:6px}
</style>
</head>
<body>
  <h1>🧪 kata2hira 関数の簡易テスト</h1>
  <pre>ブラウザの DevTools → Console を確認してください</pre>

<script>
/**
 * カタカナをひらがなに変換する
 * @param {string} str - 変換前文字列
 * @returns {string} 変換後文字列
 */
function kata2hira(str) {
  return str.replace(/[\u30a1-\u30f6]/g, ch =>
    String.fromCharCode(ch.charCodeAt(0) - 0x60));
}

/*--------- ここからテストコード ---------*/
function assertEqual(actual, expected, label) {
  console.assert(actual === expected, { label, actual, expected });
}

function test_kata2hira() {
  assertEqual(kata2hira('カタカナ'), 'かたかな', '通常変換');
  assertEqual(kata2hira('アイウエオ'), 'あいうえお', '五十音');
  assertEqual(kata2hira('テスト123'), 'てすと123', '非対象文字');

  /* デバッグ用：失敗例（わざと間違い） */
  assertEqual(kata2hira('ガギグゲゴ'), 'かきくけこ', '濁点テスト');
}

test_kata2hira();
</script>
</body>
</html>

ブラウザの出力例

デバックコンソールの出力

{label: '濁点テスト', actual: 'がぎぐげご', expected: 'かきくけこ'}

　赤字で失敗ラベル・実値・期待値が表示され、ファイル名と行番号 も併せて報告されるため原因箇所へすぐジャンプできます。

プログラム解説

区分行説明
① 変換関数17-23Unicode 範囲 U+30A1–30F6（カタカナ）を −0x60 してひらがなへ
②assertEqual26-28console.assert をラップしラベル付きで使い勝手向上
➂テスト関数30-37正常ケース 3 本 + 故意に失敗させる 1 本
➃実行39ページ読み込みと同時にテスト走査

まとめ

  • テストは最小限でも “自動で赤くなる仕組み” を作ることが重要。
  • ブラウザだけなら console.assert() で依存ゼロのユニットテストが書ける。
  • 失敗時にオブジェクトを渡せば 期待値と実際値を同時表示 でき、デバッグ効率が跳ね上がる。
  • 習慣がついたら Jest/Vitest に置き換え、CI でプッシュごとに実行することで品質ゲートを構築しよう。

　こうしたステップアップ方式なら「とりあえず 5 分でテストを書き始める」→「いずれ本格フレームワークへ移行」という自然な流れをチームに根付かせることができます。