JavaScript: JavaScriptのオブジェクト

最終更新：2026-10-13

オブジェクトはJavaScriptで最も重要なデータ構造です。インフォメーションカードのように考えましょう。表面には「名前：花子」、裏面には「年齢：20」と書かれています。各情報にはキーと値があり、キーと値のペアを形成します。

関連するオブジェクト：Object.keys const class

1. オブジェクトの作成と操作

波括弧{}を使ってオブジェクトを直接記述します。これが最も一般的な方法です：

<script>
const student = {
  name: "花子",
  age: 20,
  major: "コンピュータサイエンス"
};
console.log(student);
</script>

キーと値のペアはコロンで区切られ、ペアはカンマで区切られます。最後のペアの後にカンマを付けることもでき、将来の追加に便利です。

(2) プロパティへのアクセス

オブジェクトのプロパティにアクセスする2つの方法：

ブラケット記法の最大の利点：変数をキーとして使用できることです。

<script>
const key = "name";
console.log(student[key]); // student["name"]と同じ
</script>

(3) プロパティの変更と追加

オブジェクト作成後、いつでも既存のプロパティを変更したり、新しいプロパティを追加したりできます。constで宣言されたオブジェクトでも可能です（constは参照をロックし、内容はロックしない）。

<script>
student.age = 21;          // 変更
student.grade = "3年生";   // 新しいプロパティを追加
console.log(student);
</script>

(4) プロパティの削除

delete演算子でプロパティを完全に削除します：

<script>
delete student.grade;
console.log(student);
</script>

削除後、そのプロパティにアクセスするとundefinedを返します。

(5) メソッド

オブジェクト内の関数はメソッドと呼ばれます。関数がプロパティの値になると、オブジェクトが「行動」できるようになります：

<script>
const dog = {
  name: "レックス",
  bark() {
    return "ワン！僕は" + this.name;
  }
};
console.log(dog.bark());
</script>

(6) thisキーワード

thisは「現在のオブジェクト」を指します。メソッドを呼び出したのが誰かで、thisがそのオブジェクトになります。これはJavaScriptのもっとも厄介な概念の一つで、メソッドを抽出して別に呼び出すと、thisは元のオブジェクトを指さなくなります。

<script>
const bark = dog.bark;
console.log(bark()); // thisはdogを指さない — windowまたはundefinedになる可能性
</script>

(7) コンストラクタ

同じ構造の複数のオブジェクトを一括作成する必要がある場合、コンストラクタ関数を使います：

<script>
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function() {
    return "こんにちは、僕は" + this.name + "です";
  };
}

const p1 = new Person("太郎", 25);
const p2 = new Person("一郎", 30);
console.log(p1.sayHi());
console.log(p2.sayHi());
</script>

newは3つのことを行います：空のオブジェクトを作成 → thisをそこに設定 → オブジェクトを返します。

(8) Object.keys / values / entries

この3つの静的メソッドは、オブジェクトのキー、値、キーと値のペアの配列を返します：

オブジェクトの反復に非常に便利です：Object.keys(obj).forEach(key => ...)。

▶ サンプル：学生オブジェクトの作成と情報表示

▶ サンプル：ドット記法とブラケット記法の比較

▶ サンプル：プロパティの動的な追加、変更、削除

▶ サンプル：コンストラクタとObject.keys/values/entries

関連するオブジェクト：Object.keys const class

❓ よくある質問

📖 まとめ

• オブジェクトは {} で作成し、キーと値のペアでデータを格納。ドット記法とブラケット記法でアクセス
• ブラケット記法は動的キーや特殊文字に使用。ドット記法がシンプルで優先
• メソッドは this で自身のプロパティにアクセス。this は呼び出し元を指す
• コンストラクタ関数と new で同じ構造のオブジェクトを量産
• Object.keys/values/entries でキー、値、キーと値のペアを反復処理

📝 練習問題

1. title、author、yearプロパティと、"title by author, published in year"のような文字列を返すgetSummary()メソッドを持つbookオブジェクトを作成してください。
2. コンストラクタCar(brand, model, year)を書き、それを使って3台の車を作成し、Object.keysで1台の車のすべてのプロパティ名を一覧表示してください。
3. 上記の車のいずれかにdrive()メソッドを動的に追加してください（"brand model is driving"を返す）。呼び出して、メソッド内でthisが現在のオブジェクトを指すことを観察してください。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて