はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptの基礎はすでに理解しているが、変数の値が一致しなかったときに柔軟に処理を分岐させたいという開発者向けに書かれています。
- 初心者向けの文法説明に留まらず、実務でよく遭遇する「不一致条件」の具体例を提示します。
- if 文や switch 文、三項演算子を使った実装方法をコードサンプルとともに解説し、テストコードの書き方やデバッグ時のポイントも併せて学べます。
本記事を読むことで、変数比較の基本からエラーハンドリングまで一通りの流れを自分のプロジェクトにすぐ適用できるようになります。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。

  • HTML/CSS の基本的な知識
  • JavaScript の基本的な文法（変数宣言、関数定義、基本的な演算子）
  • Node.js もしくはブラウザコンソールでコードを実行できる環境

変数の不一致を検知する目的と基本概念

プログラムのロジックは「期待する状態」と「実際の状態」」の比較から成り立ちます。例えばユーザー入力を受け取って、正しい形式かどうかを判断したり、API から取得したデータとキャッシュの内容が一致しているか確認したりする場面があります。
不一致が判明したときに行うべきアクション**はケースバイケースですが、代表的なものは次の通りです。

  1. エラーメッセージの表示
    ユーザーに入力ミスや権限不足を伝える。
  2. 代替処理の実行
    デフォルト値やフォールバックロジックで処理を継続させる。
  3. 例外のスロー
    致命的な不整合の場合は例外を投げ、上位レイヤーへ通知する。

JavaScript では比較演算子（===, !==）や Object.is、配列・オブジェクトの深い比較を行うためのユーティリティ（lodash.isEqual など）を組み合わせて不一致判定を実装します。ここで重要なのは、型の違いを意識した比較を行うことで、予期せぬバグを防げる点です。たとえば 0 == false は true になるが、0 === false は false になるため、厳密比較 (===) が推奨されます。

実装手順：JavaScriptで不一致処理を組む方法

以下では、代表的なシナリオを 3 つ取り上げ、実装例と注意点を示します。コードはすべて最新の ECMAScript（ES2022）準拠です。

ステップ1：基本的な if 文で不一致を検知

Js

function validateAge(age) {
  // 年齢は数値で、0以上かつ120未満であることが期待値
  if (typeof age !== 'number' || age < 0 || age >= 120) {
    console.error('年齢の値が不正です:', age);
    return false; // 不一致時は false を返す
  }
  return true; // 一致すれば true
}

// 使用例
const userAge = '25'; // 文字列なので不一致
validateAge(userAge); // => コンソールにエラーが出力され false が返る

ポイント
- typeof を利用して型まで確認する。
- 条件が複数ある場合は || で結合し、いずれかが真になったらエラー処理へ。

ステップ2：switch 文で複数パターンをハンドリング

Js

function handleResponse(status) {
  switch (status) {
    case 200:
      console.log('成功');
      break;
    case 400:
    case 401:
    case 403:
      console.warn('クライアントエラー:', status);
      break;
    case 500:
    case 502:
      console.error('サーバーエラー:', status);
      break;
    default:
      console.info('未定義ステータス:', status);
  }
}

// 使用例
handleResponse(401); // => "クライアントエラー: 401"

ポイント
- 複数のステータスコードを同一ブロックにまとめられる。
- default は予期しない値に備える安全策。

ステップ3：三項演算子で簡潔に不一致処理

Js

const isLoggedIn = user?.token ? true : false;
console.log(isLoggedIn ? 'ログイン中' : '未ログイン');

ポイント
- 短い比較の場合は可読性を保ちつつ一行で書ける。
- ?.（オプショナルチェーン）で null/undefined の安全アクセスを実現。

ハマった点やエラー解決

ケースA：== と === の混同

Js

const a = 0;
if (a == false) { /* 期待外れ */ }

上記は true になるため、不一致判定が正しく行えません。=== に修正するだけで解決します。

ケースB：オブジェクトの浅い比較だけで済んでしまう

Js

const obj1 = { x: 1 };
const obj2 = { x: 1 };
console.log(obj1 === obj2); // false

参照が異なるため === は常に false になる。深い比較が必要な場合は JSON.stringify や lodash.isEqual を使用します。

Js

import isEqual from 'lodash/isEqual';
console.log(isEqual(obj1, obj2)); // true

ケースC：switch の break を忘れる

break がないと次のケースにフォールスルーし、意図しない処理が走ります。ES2023 の switch では case に =>（関数式）を書けますが、従来通り break を忘れないように注意してください。

解決策まとめ

失敗ケース 原因 修正方法
== vs === 型変換が走る 常に === と !== を使用
オブジェクト比較 参照比較になる Object.is か lodash.isEqual を利用
switch のフォールスルー break 忘れ すべての case に必ず break（または return）

まとめ

本記事では、JavaScript における変数不一致時の処理方法を体系的に解説しました。

  • 基本的な if 文で型と範囲をチェックし、エラーハンドリングを行う方法。
  • switch 文でステータスコードや分岐が多いケースを整理し、デフォルト処理で安全性を確保するテクニック。
  • 三項演算子を活用したシンプルかつ可読性の高い不一致判定の書き方。

これらを組み合わせることで、期待値と実際の値が食い違ったときに確実に対処できるコードが書けるようになります。次回は、非同期処理（async/await）と組み合わせた不一致チェックや、型安全を高める TypeScript の活用例について解説する予定です。

参考資料