null

ナル（データ型）

意味存在しない

nullとは？

オブジェクトが存在しないことを示す特殊な値。

nullの具体的な使い方

null型の変数を宣言する例

let emptyValue = null;

console.log('emptyValue:', emptyValue);
console.log('typeof emptyValue:', typeof emptyValue);

👇出力結果

emptyValue: null
typeof emptyValue: object

emptyValueという変数にnullを代入し、その値と型を確認します。typeof nullは'object'になる点に注意してください。

nullの比較例

let emptyValue = null;

console.log('emptyValue === null:', emptyValue === null);
console.log('emptyValue == null:', emptyValue == null);

👇出力結果

emptyValue === null: true
emptyValue == null: true

nullとの厳密等価演算子（===）と等価演算子（==）を使用した比較方法を示します。

オブジェクトの不在を表す例

let user = null;

function displayUserInfo(user) {
  if (user === null) {
    console.log('ユーザー情報が存在しません');
  } else {
    console.log('ユーザー情報:', user);
  }
}

displayUserInfo(user);

user = { name: '山田太郎', age: 30 };
displayUserInfo(user);

👇出力結果

ユーザー情報が存在しません
ユーザー情報: { name: '山田太郎', age: 30 }

オブジェクトが存在しないことを示すためにnullを使用し、条件分岐で確認します。その後、オブジェクトを代入して再度確認します。

nullを使用したデータの初期化と条件付き表示

<!DOCTYPE html>
<html>
<body>
  <button id="loadDataBtn">データを読み込む</button>
  <p id="dataDisplay">データはまだ読み込まれていません</p>

  <script>
    let data = null;
    const loadDataBtn = document.getElementById('loadDataBtn');
    const dataDisplay = document.getElementById('dataDisplay');

    loadDataBtn.addEventListener('click', function() {
      // データ読み込みのシミュレーション
      setTimeout(() => {
        data = { name: '山田太郎', age: 30 };
        updateDisplay();
      }, 1000);
    });

    function updateDisplay() {
      if (data === null) {
        dataDisplay.textContent = 'データはまだ読み込まれていません';
      } else {
        dataDisplay.textContent = `名前: ${data.name}, 年齢: ${data.age}`;
      }
    }
  </script>
</body>
</html>

nullを使用してデータの初期状態を表現し、ボタンクリックでデータを読み込みます。データの有無に応じて表示を切り替えます。

nullに関するよくある質問

Q. nullとundefinedの違いは？

A. nullは意図的に「値が存在しない」ことを示すのに対し、undefinedは「値が割り当てられていない」状態を示します。nullはオブジェクト型、undefinedは独自の型です。

Q. nullチェックの方法は？

A. 変数 === null で厳密等価比較を行うか、変数 == null で等価比較を行います。後者はundefinedも含めてチェックできます。

Q. nullの使用例は？

A. オブジェクトの初期化（例：let obj = null;）や、関数が有効な値を返せない場合の戻り値として使用されます。

nullが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのnullやBoolean、Symbol、BigInt、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。