✅ バグを過去にする！プロがコードの品質を保証する「ユニットテスト」導入ガイド

WEB制作

🤯 序文：なぜ動くコードをもう一度テストするのか？

あなたは今、セキュリティまで考慮した、非常に高品質なJavaScriptコードを書けるようになりました。しかし、Webサイトの機能が増え、チームでの開発が進むと、ある日、**「機能Aを直したら、全然関係ないはずの機能Bが壊れた」**という恐ろしい事態に直面します。

この「デグレード（機能退行）」を防ぎ、コードの品質を保証するのが、**ユニットテスト（Unit Test）**です。

ユニットテストとは、「プログラムの最小単位（ユニット）である関数やメソッドが、想定通りに動作するかどうか」を自動で検証する仕組みです。人間が毎回手動で確認するのではなく、プログラム自身にテストをさせます。

テストを導入することは、一見遠回りに見えますが、実は開発スピードとコードの寿命を爆発的に伸ばすための、プログラマー必須の最終兵器です！

1. 🧪 ユニットテストの基本：何のためにテストを書くのか？

ユニットテストの目的は、あなたが書いたコードの**振る舞い（Behavior）**を固定することです。

目的説明
品質保証（デグレード防止）機能を修正・追加しても、既存の機能が壊れていないことを瞬時に確認できる。
ドキュメントテストコードは、その関数が「何を目的として、どんな入力で、どんな出力を期待しているか」を示す、生きたドキュメントになる。
自信を持ってリファクタリングテストがすべてパスすれば、コードを内部的に整理（リファクタリング）しても、外部からの動作が変わっていないという自信が持てる。

Google スプレッドシートにエクスポート

📌 テストの構成要素

すべてのテストは、以下の3つのステップ（AAAパターン）で構成されます。

  1. Arrange (準備): テストに必要なデータや環境（引数など）を用意する。
  2. Act (実行): テストしたい関数やメソッドを実行する。
  3. Assert (検証): 実行結果が期待通りの値になっているか検証する。

2. 🛠️ 最も使われるテストフレームワーク：Jest

JavaScriptのユニットテストで最も広く使われているのが、Facebook（Meta）が開発したJestです。Jestは設定が非常に簡単で、すぐにテストを書き始めることができます。

📌 Jestの導入（イメージ）

  1. Node.jsプロジェクトのセットアップ
  2. Jestをインストール: npm install --save-dev jest
  3. package.jsonにテスト実行コマンドを追加: "test": "jest"

📌 Jestを使ったテストコードの書き方

例えば、税込み価格を計算するシンプルな関数をテストします。

ファイル1: calculator.js

JavaScript

export function calculateTax(price, taxRate = 0.10) {
    // 値段と税率を掛けて、整数にして返す
    return Math.floor(price * (1 + taxRate)); 
}

ファイル2: calculator.test.js

JavaScript

import { calculateTax } from './calculator';

// ----------------------------------------------------
// describe: テストのグループ化
describe('calculateTax', () => {
    // test/it: 個別のテストケース
    test('基本の税率10%が正しく計算されるべき', () => {
        // 1. Arrange (準備): 入力と期待値
        const price = 1000;
        const expected = 1100;
        
        // 2. Act (実行)
        const result = calculateTax(price);
        
        // 3. Assert (検証): 実行結果と期待値を比較
        expect(result).toBe(expected); // toBe()はJestの検証用関数
    });

    test('税率0%の場合は、元の価格のまま返されるべき', () => {
        const result = calculateTax(500, 0); 
        expect(result).toBe(500); 
    });
    
    test('小数点以下は切り捨てられるべき', () => {
        const result = calculateTax(101, 0.10); // 101 * 1.1 = 111.1
        expect(result).toBe(111); // 切り捨てられた111を期待
    });
});

3. 実行と結果の確認

上記のテストファイルを準備したら、ターミナルで以下のコマンドを実行します。

Bash

npm test

Jestがすべてのテストケースを実行し、成功すれば緑色のメッセージ（3 passed）が表示され、失敗すれば赤色のエラーメッセージ（1 failed）とともに、どのテストのどの行で期待値と実際の値が異なったかを示してくれます。

これにより、あなたは関数全体を追う必要がなくなり、壊れたピンポイントの場所だけを修正すればよくなります。

🌟 まとめ：テストは「守りのスキル」ではない

テストを書くことは、守りのためのスキルではなく、攻めのためのスキルです。

  • ユニットテスト: プログラムの最小単位（関数など）の動作を自動で検証。
  • AAAパターン: Arrange (準備), Act (実行), Assert (検証) の3ステップでテストを書く。
  • Jest: JavaScriptで最も人気の高いテストフレームワーク。
  • 効果: バグのデグレードを防ぎ、コードを修正する際の恐怖心を取り除く。

テストコードは、あなたが安心して新しい機能を開発し続けるための「安全ネット」です。今日から、新しい関数を書く際は、その関数が完成した後に**「テストコード」もセットで書く**習慣をつけましょう。これにより、あなたのコードは永遠にその品質を保ち続けることができるでしょう！

タイトルとURLをコピーしました