JavaScriptを書いていると、「Cannot read properties of null」などのエラーに出会うことがあります。この記事では、そのエラーが何なのか、なぜ発生するのか、そしてどのように対処すればよいのかを詳しく説明します。
エラーの原因を特定する
最初に行うべきは、エラーの原因を特定することです。エラーメッセージに記載されている行番号を確認し、どのコード行で問題が発生しているのかを明確にしましょう。
オブジェクトがnullまたはundefinedかどうかをチェックする
エラーが発生する直前で、オブジェクトがnullまたはundefinedでないことを確認します。これにより、プログラムがエラーの状態を安全に処理できるようになります。
if (object !== null && object !== undefined) {
// objectのプロパティに安全にアクセスできる
console.log(object.property);
}オプショナル・チェイニング（Optional Chaining）を使用する
ES2020から導入されたオプショナル・チェイニングを使用すると、nullまたはundefinedでない場合にのみプロパティにアクセスします。これは非常に便利な機能で、コードを大幅に簡潔にすることができます。
console.log(object?.property);デフォルト値を設定する（Nullish Coalescing）
オブジェクトがnullまたはundefinedの場合にデフォルト値を設定することができます。これにはES2020のNullish Coalescing演算子??を使用します。これにより、デフォルト値を効果的に設定することができます。
console.log(object?.property ?? 'Default Value');オブジェクトを初期化する
オブジェクトがnullまたはundefinedになる原因を特定し、それが起きないようにオブジェクトを適切に初期化します。これは基本的ながら非常に重要なステップです。
let object = getObjectFromSomewhere(); // この関数からの戻り値がnullの可能性がある
if (!object) {
object = {}; // オブジェクトを初期化する
}
console.log(object.property);エラーハンドリングを行う
最後に、try…catchブロックを使って、エラーをキャッチし、エラーハンドリングを行うことも一つの選択肢です。これにより、エラーが発生した場合にもコントロールを保ち、プログラムがクラッシュするのを防げます。
try {
console.log(object.property);
} catch (error) {
console.error('An error occurred:', error);
}まとめ
「Cannot read properties of null」エラーは、初めて見ると少し厄介に感じるかもしれませんが、実際にはシンプルな問題です。このエラーは、オブジェクトがnullまたはundefinedの状態でプロパティにアクセスしようとしたときに発生します。エラーの原因を特定し、適切に対処することで、安定したコードを書くための大きな一歩を踏み出すことができます。
