JavaScriptは、現代のWebフロントエンドおよびバックエンド開発において、最も頻繁に使用されるプログラミング言語の一つです。
プログラミングを行う上で、データの塊である「オブジェクト」の操作は避けて通れない非常に重要な要素です。
2026年現在、JavaScriptの進化に伴い、オブジェクトにプロパティを追加する方法も多様化し、より洗練された書き方が求められています。
本記事では、基本的なプロパティの追加方法から、最新の構文を用いた応用、さらには実行パフォーマンスを最適化するためのテクニックまでを詳しく解説します。
開発現場で即戦力として役立つ知識を深め、効率的なコーディングスキルを身につけていきましょう。
JavaScriptにおけるオブジェクト操作の基本
JavaScriptのオブジェクトは、キーと値のペアを保持する動的なデータ構造です。
オブジェクトが生成された後でも、エンジンの柔軟性により動的にプロパティを追加したり、既存の値を変更したりすることが可能です。
最も基本的かつ伝統的な手法は、ドット記法（Dot Notation）とブラケット記法（Bracket Notation）の2種類です。
ドット記法によるプロパティ追加
ドット記法は、最も一般的で読みやすいプロパティの追加方法です。
対象となるオブジェクト名の後ろに「.（ドット）」を付け、その後に新しく追加したいプロパティ名を記述します。
この手法は、追加するプロパティ名が事前に確定しており、かつ変数名として有効な文字列である場合に使用されます。
// オブジェクトの初期化
const user = {};
// ドット記法でプロパティを追加
user.id = 1;
user.name = "田中太郎";
user.role = "Admin";
console.log(user);{ id: 1, name: "田中太郎", role: "Admin" }ブラケット記法によるプロパティ追加
ブラケット記法は、角括弧（[ ]）を使用してプロパティを指定する方法です。
プロパティ名にハイフンが含まれている場合や、数字から始まる場合など、ドット記法ではエラーになる形式の文字列を扱う際に必須となります。
また、変数に格納された値をプロパティ名として使用できる点が最大の特徴です。
const employee = {};
// ハイフンを含むプロパティ名
employee["employee-id"] = "EMP001";
// 変数を利用した動的な追加
const keyName = "department";
employee[keyName] = "開発部";
console.log(employee);{ "employee-id": "EMP001", department: "開発部" }モダンなJavaScriptにおけるオブジェクトの拡張
ES6以降、JavaScriptのオブジェクト操作は劇的に進化しました。
単純な代入だけでなく、複数のオブジェクトを統合したり、新しいオブジェクトを生成しながらプロパティを追加したりする手法が主流となっています。
スプレッド構文を用いた非破壊的な追加
モダンな開発、特にReactやVue.jsといったフレームワークを用いた開発では、元のデータを直接書き換えない「不変性（イミュータビリティ）」が重視されます。
スプレッド構文（…）を使用すると、既存のオブジェクトをコピーしつつ、新しいプロパティを追加した新しいオブジェクトを生成できます。
const baseConfig = {
theme: "dark",
fontSize: 14
};
// スプレッド構文で新しいオブジェクトを作成
const updatedConfig = {
...baseConfig,
showSidebar: true,
fontSize: 16 // 既存のプロパティを上書きすることも可能
};
console.log("元のオブジェクト:", baseConfig);
console.log("新しいオブジェクト:", updatedConfig);元のオブジェクト: { theme: "dark", fontSize: 14 }
新しいオブジェクト: { theme: "dark", fontSize: 16, showSidebar: true }Object.assignによるマージ
Object.assign()メソッドは、一つ以上のソースオブジェクトからターゲットオブジェクトへとプロパティをコピーするために使用されます。
スプレッド構文が登場する前は、オブジェクトの統合や追加における主要な手法でした。
現在でも、動的に複数のソースを組み合わせる必要がある場合などに利用されます。
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
// targetにsource1とsource2のプロパティを追加
Object.assign(target, source1, source2);
console.log(target);{ a: 1, b: 2, c: 3 }高度なプロパティ定義：Object.defineProperty
通常の代入によるプロパティ追加では、そのプロパティは常に「変更可能」「列挙可能」「削除可能」となります。
しかし、ライブラリの開発や厳密なデータモデルを作成する場合、プロパティの振る舞いを細かく制御したいことがあります。
そのような場合には、Object.defineProperty()を使用します。
プロパティ記述子（Property Descriptor）の活用
Object.defineProperty()を使用すると、読み取り専用のプロパティや、for...inループに現れないプロパティを作成できます。
const product = {};
Object.defineProperty(product, "serialNumber", {
value: "SN-9999",
writable: false, // 値の変更を禁止
enumerable: true, // 列挙可能（Object.keysなどで見える）
configurable: false // プロパティ自体の削除や設定変更を禁止
});
// 変更を試みる
product.serialNumber = "NEW-SERIAL";
console.log(product.serialNumber); // 値は変わらない"SN-9999"ゲッターとセッターの追加
オブジェクトにプロパティを追加する際、単なる値ではなく、値の取得や設定時に特定の処理を実行させる「アクセッサプロパティ」を追加することも可能です。
これにより、プロパティへのアクセスをトリガーに関数のようなロジックを組み込むことができます。
const userAccount = {
firstName: "太郎",
lastName: "山田"
};
Object.defineProperty(userAccount, "fullName", {
get() {
return `${this.lastName} ${this.firstName}`;
},
set(value) {
[this.lastName, this.firstName] = value.split(" ");
},
enumerable: true,
configurable: true
});
console.log(userAccount.fullName);
userAccount.fullName = "佐藤 健二";
console.log(userAccount.firstName);"山田 太郎"
"健二"パフォーマンスを考慮したオブジェクト操作
JavaScriptの実行エンジン（V8など）は、オブジェクトの構造を最適化するために「隠しクラス（Hidden Classes）」という仕組みを使用しています。
オブジェクト生成後に頻繁にプロパティを追加すると、エンジンの最適化が解除され、実行速度が低下する恐れがあります。
プロパティ追加の順序と最適化
同じ種類のオブジェクトを多数作成する場合、プロパティを追加する順番を一定に保つことがパフォーマンス向上に繋がります。
順序がバラバラだと、エンジンはそれぞれに対して異なる隠しクラスを生成しなければならず、メモリ効率が悪化します。
// 良い例：プロパティの追加順序が同じ
function createPoint(x, y) {
const p = {};
p.x = x;
p.y = y;
return p;
}
// 悪い例：条件によって追加順序が変わる
function createFlexiblePoint(x, y, reverse) {
const p = {};
if (reverse) {
p.y = y;
p.x = x;
} else {
p.x = x;
p.y = y;
}
return p;
}可能な限り初期化時に定義する
2026年のベストプラクティスとしては、後からプロパティを動的に追加するよりも、オブジェクトリテラル内であらかじめ全てのプロパティを定義しておくことが推奨されます。
値がまだ決まっていない場合は、nullやundefinedで初期化しておくだけでも、エンジンの最適化を助けることができます。
// 推奨される書き方
const userData = {
id: 101,
username: "js_pro",
email: null, // 後で入れる予定でも初期化しておく
lastLogin: null
};
// 後から代入（構造は変わらないので高速）
userData.email = "example@test.com";オブジェクトの拡張性を制御するメソッド
オブジェクトに勝手にプロパティを追加されたくない場合や、構造を固定したい場合には、拡張性を制限するメソッドを使用します。
これらは堅牢なアプリケーションを構築する上で欠かせない機能です。
| メソッド | プロパティの追加 | プロパティの削除 | 既存プロパティの変更 |
|---|---|---|---|
Object.preventExtensions() | 不可 | 可能 | 可能 |
Object.seal() | 不可 | 不可 | 可能 |
Object.freeze() | 不可 | 不可 | 不可 |
Object.freezeによる完全な保護
Object.freeze()を使用すると、オブジェクトを完全に不変（イミュータブル）にすることができます。
この状態のオブジェクトに新しいプロパティを追加しようとしても無視されるか、Strictモードではエラーが発生します。
"use strict";
const constants = {
API_URL: "https://api.example.com",
TIMEOUT: 5000
};
Object.freeze(constants);
try {
constants.NEW_KEY = "dummy"; // ここでエラー
} catch (e) {
console.log("追加できませんでした:", e.message);
}"追加できませんでした: Cannot add property NEW_KEY, object is not extensible"実戦的なユースケース：動的なデータ処理
実際の開発では、APIから取得したデータに基づいてオブジェクトを加工する場面が多くあります。
例えば、リスト形式のデータをIDをキーとしたオブジェクト（マップ）に変換する場合、ブラケット記法が非常に役立ちます。
const usersArray = [
{ id: "u1", name: "Alice" },
{ id: "u2", name: "Bob" },
{ id: "u3", name: "Charlie" }
];
const userMap = {};
usersArray.forEach(user => {
// IDをプロパティ名としてオブジェクトに追加
userMap[user.id] = user;
});
console.log(userMap["u2"]);{ id: "u2", name: "Bob" }よくある間違いと注意点
オブジェクトにプロパティを追加する際、意図しない挙動に悩まされることがあります。
特にプロトタイプチェーンに関連する問題や、参照渡しの性質を理解しておくことがトラブル回避の鍵となります。
プロトタイプ汚染の回避
ユーザー入力をそのままプロパティ名としてブラケット記法で使用する場合、__proto__などの特殊な名前が渡されるとセキュリティリスクが生じます。
これを防ぐためには、Object.create(null)でプロトタイプを持たないオブジェクトを作成するか、Mapオブジェクトを使用することを検討してください。
// プロトタイプを持たないクリーンなオブジェクト
const safeObj = Object.create(null);
safeObj["key"] = "value";
console.log(safeObj.toString); // undefined (安全)定数（const）への追加
constで宣言されたオブジェクト自体を別のオブジェクトに置き換えることはできませんが、その中身（プロパティ）を操作することは可能です。
「定数だから中身も変わらない」と誤解しがちですが、JavaScriptのconstは再代入を禁止するだけであり、オブジェクトのミューテーション（変更）を制限するものではない点に注意しましょう。
まとめ
JavaScriptでオブジェクトにプロパティを追加する方法は、単純な代入から高度なメタプログラミングまで多岐にわたります。
日常的な開発では、可読性の高いドット記法や、不変性を保つスプレッド構文を優先的に使用することが推奨されます。
一方で、動的なキーが必要な場合はブラケット記法、詳細な属性制御が必要な場合はObject.definePropertyといった使い分けが重要です。
また、実行エンジンの特性を理解し、プロパティの追加順序や初期化方法に配慮することで、より高速なアプリケーションを構築できます。
これらの手法を適切に選択し、安全でメンテナンス性の高いコードを目指していきましょう。