JavaScriptのオブジェクト操作でよくあるエラーとその解決策まとめ｜初心者でもわかる対処法
生徒
「JavaScriptでオブジェクトを使っていると、よくエラーが出るんですが、どうしてでしょうか？」
先生
「JavaScriptのオブジェクト操作は便利ですが、慣れないとよくあるミスでエラーになることがあります。今日は代表的なエラーとその解決策をわかりやすく説明しますね。」
生徒
「どんなエラーがあるのか、具体的に教えてください！」
先生
「はい、それでは順番に見ていきましょう！」
1. 「undefined」のエラーや値が取れない問題
JavaScriptでオブジェクトのプロパティを取り出そうとしたときに、undefinedが返ってきたり、エラーになったりすることがあります。これは、指定したプロパティが存在しないためです。
例えば、次のようなオブジェクトを考えましょう。
const person = {
name: "太郎",
age: 30
};
console.log(person.address); // undefined と表示される
addressプロパティは存在しないので、値はundefinedになります。この状態でさらに深い階層を参照するとエラーになることもあります。
解決策としては、オプショナルチェーン（?.演算子）を使う方法があります。
console.log(person.address?.city); // undefined と表示されエラーにならない
オプショナルチェーンは「もし途中の値がなければそこで止めてundefinedにする」という便利な機能です。
2. 「TypeError: ○○ is not a function」のエラー
オブジェクトのメソッドを呼び出すときに「○○ is not a function」というエラーが出ることがあります。これは、呼び出そうとしているメソッドが実際には存在しなかったり、関数でない場合に起こります。
例を見てみましょう。
const obj = {
greet: "こんにちは"
};
obj.greet(); // TypeError: greet is not a function
ここでは、greetは文字列なので関数のように呼べずエラーになります。
解決策は、関数かどうか確認するか、メソッドとして正しく定義することです。
const obj = {
greet() {
console.log("こんにちは");
}
};
obj.greet(); // こんにちは と表示される
3. プロパティの上書きや削除で失敗することがある
オブジェクトのプロパティを変更したり削除したりしようとしても、うまくいかない場合があります。特に、constで宣言したオブジェクト自体を再代入しようとするとエラーになります。
const obj = { a: 1 };
obj = { b: 2 }; // エラーになる（再代入はできない）
ただし、constでもオブジェクトの中身の変更は可能です。
const obj = { a: 1 };
obj.a = 10; // OK
delete obj.a; // OK
また、Object.freeze()という関数でオブジェクトを凍結（変更不可）にしている場合はプロパティの変更や削除ができません。
4. プロパティの存在確認でよくあるミス
オブジェクトに特定のプロパティがあるかどうか確認するには、in演算子やhasOwnPropertyメソッドを使いますが、使い方を間違えると誤った結果になることがあります。
// 正しい使い方
if ("name" in person) {
console.log("nameがあります");
}
// 間違った例（プロトタイプもチェックしてしまう）
if (person.hasOwnProperty("name")) {
console.log("nameがあります");
}
ここで注意したいのは、hasOwnPropertyはオブジェクト自身のプロパティだけをチェックしますが、継承されたプロパティは見ません。
実際のコードでどちらを使うかは状況によって判断しましょう。
5. JSONのパースでのエラー
オブジェクト形式のデータを文字列で扱う場合、JSON.parse()で変換しますが、形式が正しくないとエラーが出ます。
const jsonStr = '{"name":"太郎","age":30}';
const obj = JSON.parse(jsonStr); // 正常にオブジェクトになる
const badJsonStr = '{"name":"太郎",age:30}';
const obj2 = JSON.parse(badJsonStr); // SyntaxErrorになる
JSONはキーや文字列を必ずダブルクォーテーション（"）で囲む必要があるので注意しましょう。
6. オブジェクトのキーに変な値を使うと意図しない動きに
JavaScriptのオブジェクトのキーは基本的に文字列ですが、他の型を使うと文字列に変換されます。そのため、数字の1と文字列の"1"は同じキーとして扱われます。
const obj = {};
obj[1] = "数字の1";
obj["1"] = "文字列の1";
console.log(obj); // { "1": "文字列の1" }
同じキーとして上書きされるため、意図しない結果になることがあります。キーはなるべく文字列で統一するか、Mapオブジェクトの使用も検討しましょう。
7. 変数名とプロパティ名の混同に注意
オブジェクトのプロパティ名と変数名を間違えて使うと、値が取得できないことがあります。
const name = "太郎";
const person = { name: "花子" };
console.log(name); // 太郎
console.log(person.name); // 花子
console.log(person.Name); // undefined（大文字と小文字は区別される）
JavaScriptは大文字・小文字を区別するので、プロパティ名の綴りも正確に書くことが大切です。
8. プロパティの追加や更新の基本と注意点
オブジェクトに新しいプロパティを追加したり、既存の値を更新するのは簡単ですが、思わぬ影響が出ることもあります。
const obj = { a: 1 };
obj.b = 2; // プロパティbを追加
obj.a = 10; // プロパティaの値を変更
このとき、オブジェクトを他の変数に代入している場合、同じオブジェクトを指しているので、どちらを変更しても影響があります。
const obj1 = { a: 1 };
const obj2 = obj1;
obj2.a = 100;
console.log(obj1.a); // 100 と表示される
これは「参照渡し」と呼ばれ、オブジェクトの特性です。もしコピーしたい場合は、Object.assign()やスプレッド構文を使います。
9. エラーを減らすためのポイントまとめ
- オプショナルチェーン（
?.）を使い、安全にプロパティを取得する - 関数かどうか確認してからメソッドを呼ぶ
constで宣言してもオブジェクトの中身は変更可能- プロパティの存在確認は
in演算子やhasOwnPropertyを使い分ける - JSONの形式に注意して正しい文字列を扱う
- オブジェクトのキーは文字列として扱われることを理解する
- 大文字・小文字は区別されるので正確に書く
- オブジェクトのコピーは浅いコピーで十分か考える
