null と undefined

ヌルアンドアンデファインド

null と undefined を分かりやすく

さて、JavaScriptやTypeScriptの世界における null と undefined、ちょっとややこしいですよね。そもそもこれら二つの違いは何なのか、何がどう違って、どう使い分ければいいのか、という疑問を解き明かしていきましょう。

まず null とは、ものが何もない、という状態を示す特殊な値です。これはプログラミング言語によくある概念で、ある変数に何もない、という状態を明示的に示すために使われます。例えば、あなたが家を出て行った後、誰も家にいない状態、それがまさに null です。

一方で undefined は、値が未定義であることを示す値です。こちらも一見すると null と似ていますが、ちょっと違います。例えば、あなたが新しい家を買ったとしましょう。でもまだ誰もその家に住んでいない、家具も何もない、そんな状態、それが undefined です。

「そもそもこれ使う意味あるん？」って方いるかと思いますが、あります。これらの値は、プログラムの状態を表現するために非常に重要な役割を果たします。ちょっと面白い事例ですが、これらを適切に使わないと、プログラムが予期せぬ動作をすることもありますよ。

`null` と `undefined` の比較表

	null	undefined
意味	値が存在しないことを明示的に示す	値がまだ割り当てられていないことを示す
型	`null`	`undefined`
チェック	`value === null`	`value === undefined`
JavaScriptでの使用	オブジェクトが存在しないことを示すなど	変数が定義されていない、オブジェクトのプロパティが存在しないなど
TypeScriptでの使用	値が意図的に存在しないことを示す	値がまだ割り当てられていないことを示す

※ JavaScriptおよびTypeScriptのコードベースでは、nullとundefinedは多少異なる意味と使用法を持つため、上記の使用法については慎重に考えてください。どちらの値を使用するかは、コードベースや開発チームのスタイルガイドに大きく依存します。

null と undefined の歴史的変遷

JavaScriptが生まれた1995年から、nullとundefinedはその中心的な部分を占めてきました。JavaScriptには型がないため、nullとundefinedは「何もない」状態を示すための手段として導入されました。

一方、2008年にはJSONがRFC 4627として公開され、ここでもnullが利用されました。JSONではundefinedは存在しないため、nullだけが「何もない」状態を表現する手段となりました。

そして2012年にはTypeScriptが初めてリリースされ、JavaScriptのスーパーセットとしてnullとundefinedを引き継ぎました。TypeScriptではnullとundefinedをそれぞれの型として扱うことができ、より厳密な型チェックを可能にしました。

null と undefined と Jamstack の関係

JamstackはJavaScript、API、Markupから構成されるモダンなWeb開発アーキテクチャです。ここでのJavaScriptにはもちろんTypeScriptも含まれます。

null と undefined は、APIからのデータを扱う際に、特に重要な役割を果たします。例えば、APIからデータを取得したとき、そのデータが存在しない場合や、まだロードが完了していない場合には、null や undefined を使用してその状態を表現することが一般的です。

また、Jamstackではサイトの静的生成（SSG）やサーバーサイドレンダリング（SSR）を行うことが多く、その際にはビルド時にデータが存在しない場合や、データの取得に失敗した場合にも null や undefined が活躍します。

null と undefined を使うメリット

明確な状態表現

null や undefined を使うことで、「何もない」、「まだ定義されていない」という状態を明確に表現することができます。これにより、コードを読む人や、コード自体がその状態を正確に理解できるようになります。

型安全性の向上

TypeScriptでは、nullとundefinedをそれぞれの型として扱うことができます。これにより、値がnullやundefinedになり得る場合、それを明示的に型に示すことで、バグの発生を防ぐことが可能です。

null と undefined の実装

それでは、Next.jsとTypeScriptを用いて、nullとundefinedの使い方を見ていきましょう。

type UserProps = {
  name: string | null | undefined;
}

const UserComponent = ({ name }: UserProps) => {
  if (name === undefined) {
    return <div>Loading...</div>
  }
  
  if (name === null) {
    return <div>No user found.</div>
  }

  return <div>{name}</div>
}

この例では、nameプロパティがundefinedの場合は「Loading...」、nullの場合は「No user found.」、それ以外（つまりユーザー名が存在する場合）はそのユーザー名を表示しています。これにより、データの状態に応じた適切な表示が可能となります。

null と undefined を学ぶ

以下に、nullとundefinedについて学ぶためのリソースを紹介します。

タイトル	説明
Understanding null and undefined in JavaScript	JavaScriptのnullとundefinedの違いについて解説している記事です。
The difference between null and undefined in TypeScript	TypeScriptの公式ドキュメンテーションで、nullとundefinedの扱いについて詳しく説明しています。
Understanding the Jamstack	Jamstackについて全般的に学ぶことができる公式サイトです。ここからさらに各種リソースにアクセス可能です。

以上が、nullとundefinedについての解説となります。これらの理解は、JavaScriptやTypeScript、そしてJamstackにおける開発で非常に重要です。ぜひ参考にして、より良いコードを書く助けとしてください。

Next.js を学ぶ一覧へ