JavaScript ヌルチェック徹底解説！10のサンプルコードで完璧に理解

はじめに

この記事を読めば、JavaScriptでヌルチェックを行う方法が完璧に理解できるようになります。

JavaScript初心者であっても、ヌルチェックの基本から応用までをわかりやすく解説します。

10のサンプルコードを使って、ヌルチェックの使い方や対処法、注意点、カスタマイズ方法を学びましょう。

●JavaScript ヌルチェックとは

JavaScriptでは、変数やオブジェクトのプロパティが存在しない場合に、nullまたはundefinedが返されます。

ヌルチェックは、これらの値が返された場合に、適切な処理を行うための方法です。

ヌルチェックを行わずにnullやundefinedが参照されると、エラーが発生しプログラムが停止することがあります。

この記事では、JavaScript初心者でも理解できるように、ヌルチェックの基本から応用までを10のサンプルコードで徹底解説します。

○ヌルチェックの重要性

ヌルチェックは、プログラムの安定性や信頼性を向上させるために重要な役割を果たします。

適切なヌルチェックを行うことで、予期しないエラーやバグの発生を防ぐことができます。

●ヌルチェックの基本的な方法

まずは、簡単なヌルチェックの方法を見ていきましょう。

○サンプルコード1：簡単なヌルチェック

// 変数valueがnullかundefinedの場合、デフォルト値を代入する
const value = null;
const defaultValue = "デフォルト値";

if (value === null || value === undefined) {
  console.log(defaultValue); // デフォルト値が出力される
} else {
  console.log(value);
}

このサンプルコードでは、変数valueがnullまたはundefinedの場合、デフォルト値を出力する処理を行っています。

●ヌルチェックの使い方

次に、ヌルチェックを応用した使い方を見ていきましょう。

○サンプルコード2：入力チェック

// 入力フォームから値を取得し、ヌルチェックを行う
const input = document.getElementById("input");
const button = document.getElementById("button");

button.addEventListener("click", () => {
  const inputValue = input.value;
  
  if (inputValue === null || inputValue === undefined || inputValue.trim() === "") {
    alert("入力が空です。値を入力してください。");
  } else {
    console.log("入力値:", inputValue);
  }
});

このサンプルコードでは、入力フォームから取得した値に対して、null、undefined、空文字の場合にアラートを表示する処理を行っています。

○サンプルコード3：関数内でのヌルチェック

// 関数の引数でヌルチェックを行い、デフォルト値を使用する
function greeting(name) {
  if (name === null || name === undefined) {
    name = "名無しさん";
  }

  console.log("こんにちは、" + name + "さん!");
}

greeting("太郎"); // こんにちは、太郎さん!
greeting(null); // こんにちは、名無しさんさん!

このサンプルコードでは、関数の引数にヌルチェックを行い、引数がnullまたはundefinedの場合、デフォルト値を使用して挨拶を表示します。

●ヌルチェックの応用例

次に、ヌルチェックをさらに応用した例を見ていきましょう。

○サンプルコード4：オブジェクトのプロパティをチェック

const user = {
  name: "太郎",
  age: 20,
};

if (user && user.name) {
  console.log("名前:", user.name);
} else {
  console.log("名前がありません");
}

if (user && user.email) {
  console.log("メールアドレス:", user.email);
} else {
  console.log("メールアドレスがありません");
}

このサンプルコードでは、オブジェクトのプロパティが存在するかどうかをチェックしています。

存在する場合はその値を出力し、存在しない場合は適切なメッセージを出力します。

○サンプルコード5：配列の要素チェック

const fruits = ["apple", "banana", "orange"];

if (fruits && fruits[0]) {
  console.log("1つ目の要素:", fruits[0]);
} else {
  console.log("1つ目の要素がありません");
}

if (fruits && fruits[3]) {
  console.log("4つ目の要素:", fruits[3]);
} else {
  console.log("4つ目の要素がありません");
}

このサンプルコードでは、配列の要素が存在するかどうかをチェックしています。

存在する場合はその値を出力し、存在しない場合は適切なメッセージを出力します。

●注意点と対処法

○厳密比較とゆるい比較の違い

JavaScriptでは、比較演算子には厳密比較(===)とゆるい比較(==)があります。

ヌルチェックを行う際は、厳密比較を使ってnullとundefinedを判別することが推奨されます。

○undefinedとnullの扱い

JavaScriptでは、undefinedとnullは異なる値ですが、両方とも「何もない」状態を示しています。

ヌルチェックを行う際は、どちらの値も考慮に入れることが重要です。

●ヌルチェックのカスタマイズ方法

次に、ヌルチェックをカスタマイズする方法を見ていきましょう。

○サンプルコード6：カスタムヌルチェック関数

// カスタムヌルチェック関数の定義
function isNull(value) {
  return value === null || value === undefined;
}

// カスタムヌルチェック関数の使用例
const value1 = null;
const value2 = "テスト";

console.log(isNull(value1)); // true
console.log(isNull(value2)); // false

このサンプルコードでは、カスタムヌルチェック関数を定義し、nullまたはundefinedを判別しています。

○サンプルコード7：オプショナルチェイニング

const user = {
  name: "太郎",
  age: 20,
  address: {
    city: "東京",
  },
};

// オプショナルチェイニングを使用したヌルチェック
console.log(user.address?.city); // 東京
console.log(user.address?.street); // undefined

このサンプルコードでは、オプショナルチェイニング（?.）を使用して、プロパティの存在をチェックしています。

プロパティが存在する場合はその値を取得し、存在しない場合はundefinedを返します。

●ヌルチェックのさらなる応用例

○サンプルコード8：フォーム入力のバリデーション

function validateInput(input) {
  if (isNull(input)) {
    console.log("入力が空です。");
  } else {
    console.log("入力された値:", input);
  }
}

validateInput("テスト"); // 入力された値: テスト
validateInput(null); // 入力が空です。

このサンプルコードでは、フォーム入力のバリデーションにヌルチェックを使用しています。

入力がnullまたはundefinedの場合は、エラーメッセージを表示します。

○サンプルコード9：APIからのデータ取得時のヌルチェック

// 仮想APIからデータを取得する関数
async function fetchData() {
  // ここでは仮想APIから取得したデータを返すものとします。
  return {
    title: "サンプルデータ",
    content: null,
  };
}

async function displayData() {
  const data = await fetchData();
  const title = data?.title ?? "タイトルがありません";
  const content = data?.content ?? "コンテンツがありません";

  console.log("タイトル:", title);
  console.log("コンテンツ:", content);
}

displayData();
// タイトル: サンプルデータ
// コンテンツ: コンテンツがありません

このサンプルコードでは、APIから取得したデータのヌルチェックを行っています。

オプショナルチェイニングとnull合体演算子を使用して、データがnullまたはundefinedの場合はデフォルトの値を表示します。

○サンプルコード10：DOM操作時のヌルチェック

// HTML要素を取得
const element = document.getElementById("example");

// 要素が存在するかヌルチェックを行う
if (element) {
  // 要素が存在する場合の処理
  console.log("要素が見つかりました。");
} else {
  // 要素が存在しない場合の処理
  console.log("要素が見つかりませんでした。");
}

このサンプルコードでは、DOM操作時に要素のヌルチェックを行っています。

要素が存在する場合は処理を実行し、存在しない場合はエラーメッセージを表示します。

まとめ

JavaScriptでヌルチェックを行う方法は、基本的な比較演算子やオプショナルチェイニング、カスタム関数など様々あります。

適切な方法を選択し、nullやundefinedを考慮した安全なコードを書くことが重要です。