先生と生徒の会話形式で理解しよう

生徒

「JavaScriptで作ったオブジェクトに、新しく情報を足したり、いらない情報を消したりできますか？」

先生

「もちろんできますよ！JavaScriptでは、オブジェクトに対してあとからプロパティを追加したり削除したりするのがとても簡単です。」

生徒

「難しそうに感じます…。どんなふうに書けばいいんですか？」

先生

「心配いりません。すぐにわかるように、順番に説明していきましょう！」

1. オブジェクトとは？

JavaScriptのオブジェクトは、さまざまな情報を1つにまとめるための仕組みです。情報は「プロパティ」という形で保存され、名前（キー）と値のセットになっています。

例えば、「本」の情報をまとめたオブジェクトを作ると次のようになります。


const book = {
  title: "やさしいJavaScript",
  author: "山田太郎"
};

このbookというオブジェクトには、「title（タイトル）」と「author（著者）」というプロパティが含まれています。

2. プロパティを追加する方法

JavaScriptのオブジェクトにプロパティを追加するには、ドット記法かブラケット記法を使います。とても簡単です。

たとえば、上のbookオブジェクトに「出版年（year）」を追加したい場合、次のように書きます。

ドット記法で追加する


book.year = 2024;

ブラケット記法で追加する


book["publisher"] = "技術書出版";

どちらも正しく動作します。プロパティ名が英単語だけならドット記法、スペースがあるなど特殊な名前のときはブラケット記法が使いやすいです。

追加後のオブジェクトの中身


console.log(book);


{
  title: "やさしいJavaScript",
  author: "山田太郎",
  year: 2024,
  publisher: "技術書出版"
}

3. プロパティを削除する方法

オブジェクトからプロパティを削除するには、deleteというキーワードを使います。

例えば、authorの情報がいらなくなったときは、次のようにします。


delete book.author;


{
  title: "やさしいJavaScript",
  year: 2024,
  publisher: "技術書出版"
}

deleteを使うと、そのプロパティは完全に消えます。値がnullやundefinedになるわけではなく、そもそも存在しない状態になります。

4. 存在しないプロパティを追加・削除しても大丈夫？

JavaScriptでは、存在しないプロパティに対して追加・削除をしてもエラーにはなりません。

たとえば、次のようにまだないプロパティを指定して追加してもOKです。


book.price = 1500;

また、存在しないプロパティを削除しようとしても、エラーにはなりません。


delete book.notExist; // 実行しても何も起きません

このように、JavaScriptのオブジェクトはとても柔軟に扱えるようになっています。

5. 変数に入れたプロパティ名で追加・削除する

プロパティ名を変数として扱いたい場合は、ブラケット記法を使います。


const keyName = "language";
book[keyName] = "日本語";

このように変数を使うと、動的に（あとから決まる）プロパティ名を使いたい場面でとても便利です。

削除も同じくブラケット記法で行えます。


delete book[keyName]; // "language"プロパティが削除される

6. オブジェクトのプロパティの状態を確認するには？

オブジェクトにプロパティが存在するかどうかを調べたいときは、in演算子を使う方法があります。


console.log("title" in book); // true
console.log("author" in book); // false（削除済み）

このように、inを使えば、プロパティがオブジェクトに含まれているか簡単に確認できます。

まとめ

JavaScriptオブジェクトとプロパティ操作の基本を振り返る

JavaScriptのオブジェクトは、複数の情報をひとまとめに管理できる非常に重要な仕組みです。今回の記事では、そのオブジェクトに対してプロパティを追加したり削除したりする方法を、基礎から順番に学びました。オブジェクトは柔軟性が高く、プログラムの途中で必要な情報を後から追加できる点が大きな特徴です。この柔軟さこそが、JavaScriptがWeb開発で広く使われている理由の一つと言えます。

プロパティの追加は、ドット記法やブラケット記法を使うことで簡単に行えます。特にドット記法は直感的で読みやすく、初心者にも扱いやすい書き方です。一方で、プロパティ名を変数で指定したい場合や、特殊な名前を使いたい場合にはブラケット記法が活躍します。用途に応じて使い分けることが、JavaScriptのオブジェクト操作を理解するうえでの大切なポイントです。

プロパティ削除と存在確認の重要性

不要になった情報を削除するために使う delete は、JavaScriptならではの便利な機能です。deleteを使うことで、プロパティは完全にオブジェクトから取り除かれ、存在しない状態になります。この点は、値を null や undefined にするのとは意味が異なるため、正しく理解しておく必要があります。

また、in 演算子を使ってプロパティの存在を確認する方法も重要です。オブジェクトの中にその情報があるかどうかを事前にチェックすることで、エラーや想定外の動作を防ぐことができます。JavaScriptのオブジェクトはエラーを出さずに処理が進む場面も多いため、「今どんな状態なのか」を確認する習慣を身につけることが、安定したコードを書くためのコツになります。

まとめとして確認したいサンプルプログラム


const user = {
  name: "佐藤",
  age: 20
};

// プロパティを追加
user.email = "test@example.com";

// プロパティを削除
delete user.age;

// 存在確認
console.log("name" in user);  // true
console.log("age" in user);   // false

このサンプルでは、オブジェクトに情報を追加し、不要になった情報を削除し、最後にプロパティの存在を確認しています。実際の開発でも、ユーザー情報や設定情報などを扱う場面で、同じような操作が頻繁に行われます。JavaScriptのオブジェクト操作は、Webアプリケーションやシステム開発の基礎として欠かせない知識です。