モック

モックとは、本物の代わりに使う「仮のもの」 です。
ソフトウェア開発では、まだ完成していない部分や外部のサービスの代わりに、仮のデータやプログラムを用意して開発を進めることがあります。この仮のものを総称してモックと呼びます。

なぜモックを使うのか

開発現場では、1つのサービスを複数の部品に分けて同時並行で開発することがあります。

[ フロントエンド ]  ←→  [ API サーバー ]  ←→  [ データベース ]
     担当: Aさん          担当: Bさん           担当: Cさん

このとき、API サーバーの開発中にデータベースがまだ完成していない、ということが起こります。
他の部品の完成を待っていたら、自分の開発が止まってしまいます。

そこで、まだ完成していない部品の代わりにモックを用意して、自分の担当部分の開発を先に進めます。

// データベースの代わりに配列でデータを管理する（モックデータ）
const records = [
  {
    id: '1',
    employeeName: '田中太郎',
    date: '2026-01-27',
    clockIn: '09:00',
    clockOut: '18:00',
  },
  {
    id: '2',
    employeeName: '佐藤花子',
    date: '2026-01-27',
    clockIn: '08:45',
    clockOut: '17:30',
  },
];

このように、本物のデータベースがなくてもAPIの開発を進められます。
各部品が完成したら、最後にモックを本物に置き換えて結合します。

モックが使われる場面

モックは開発のさまざまな場面で使われます。

モックデータとモック関数の違い

開発で特によく出てくるのはモックデータとモック関数の2つです。

モックデータ

データベースや外部APIの代わりに用意する仮のデータです。
開発の初期段階で、まだデータベースを構築していないときによく使います。

// モックデータの例
const users = [
  { id: '1', name: '田中太郎', email: 'tanaka@example.com' },
  { id: '2', name: '佐藤花子', email: 'sato@example.com' },
];

モック関数

テストで使われることが多い、本物の関数の代わりに動く仮の関数です。
たとえば、テスト中に本物のメールを送信されては困るので、「メールを送ったふりをする関数」に置き換えます。

// テストでメール送信をモック化するイメージ
// 実際にはメールは送信されず、呼び出されたことだけ記録する
const sendEmail = vi.fn();
 
sendEmail('tanaka@example.com', 'テスト件名');
 
// 「呼び出されたか」を確認できる
expect(sendEmail).toHaveBeenCalled();

モックはいつ本物に置き換えるのか

モックはあくまで仮のものなので、基本的には最終的に本物に置き換えます。

モックで動作確認したコードは、データの取得元や接続先を差し替えるだけで本番環境に対応できるように設計するのが理想的です。

まとめ