メインコンテンツまでスキップ

オブジェクト

オブジェクト​

JavaScriptで利用することができる値の種類として、これまで数値と文字列、論理値を扱いました。数値や文字列、論理値などの「それ以上分解できない」値のことをプリミティブと呼びます。JavaScriptには、この他にも、オブジェクトと呼ばれる値が存在します。JavaScriptにおいて、プリミティブでない値はすべてオブジェクトです。

値の種類

オブジェクトを用いると、関連する値をまとめて1つの値として扱うことができます。これにより、事物をプログラム上でより現実世界に近い形で表現することができます。

例として、学生の情報をJavaScriptの値として扱う方法を考えてみましょう。1人の学生は、名前、年齢、メールアドレスという3つの情報から構成されるとします。オブジェクトを使用しない場合、次のように3つの値に分けて管理することになるでしょう。

const studentName = "山田太郎";
const studentAge = 15;
const studentEmail = "yamada.taro@example.com";

オブジェクトを用いることで、これらの情報をまとめて扱い、現実の1人の学生をプログラム上でも1つの値として扱うことができます。

オブジェクトの作成​

オブジェクトは、次のようにして作成します。

const student = {
  name: "山田太郎",
  age: 15,
  email: "yamada.taro@example.com",
};

オブジェクトを構成する情報をプロパティと呼び、プロパティ名とプロパティ値の組で表されます。この例では、nameやage、emailがプロパティ名であり、"山田太郎"や15、"yamada.taro@example.com"がプロパティ値です。プロパティ名には文字列しか指定できませんが、プロパティ値には、JavaScriptで使用できるすべての値が指定可能です。

プロパティ名プロパティ値
name"山田太郎"
age15
email"yamada.taro@example.com"
ほかの言語の経験者へ

JavaScriptのオブジェクトは、ほかの言語でいう辞書や連想配列、Mapに近いものです。ただ、こういったものと比べ、JavaScriptのオブジェクトは使用頻度が非常に高いです。

確認問題​

次のような情報を持つユーザーを表すオブジェクトuserを作成してください。

  • name: "山田花子"
  • bio: "プログラミングを勉強しています。"
解答例
const user = {
  name: "山田花子",
  bio: "プログラミングを勉強しています。",
};
GitHub で表示このプログラムを実行する

プロパティの取得​

オブジェクトのプロパティを取得するには、次のようにドット記号（.）を使います。

document.write(student.name); // 山田太郎
document.write(student.age); // 15

プロパティの変更​

オブジェクトのプロパティを変更するには、次のようにします。

document.write(student.email); // yamada.taro@example.com
student.email = "yamada.taro@example.jp";
document.write(student.email); // yamada.taro@example.jp

確認問題​

次のようなユーザーを表すオブジェクトuserがあります。ユーザーのプロフィールを表示し、プロフィールの内容を"JavaScriptでWebアプリを作っています。"に変更してから、もう一度表示してください。

const user = {
  name: "山田花子",
  bio: "プログラミングを勉強しています。",
};
解答例
document.write(user.bio); // プログラミングを勉強しています。
user.bio = "JavaScriptでWebアプリを作っています。";
document.write(user.bio); // JavaScriptでWebアプリを作っています。
GitHub で表示このプログラムを実行する

オブジェクトのネスト​

さきほどプロパティ値には、すべての値が指定可能であると説明しました。オブジェクトも値の一種であるため、次のようにオブジェクトのプロパティ値にオブジェクトを指定する（ネストする）こともできます。

const student = {
  name: "山田太郎",
  age: 15,
  email: "yamada.taro@example.com",
  scores: {
    japanese: 90,
    math: 70,
    english: 80,
  },
};

ネストされたオブジェクトのプロパティは、次のようにして取得、変更できます。

document.write(student.scores.math); // 70
student.scores.math = 100;
document.write(student.scores.math); // 100

確認問題​

次のようなユーザーを表すオブジェクトuserがあります。言語設定を変更することになりました。言語設定を表示し、"English"に変更してから、もう一度表示してください。

const user = {
  name: "山田花子",
  bio: "JavaScriptでWebアプリを作っています。",
  settings: {
    isNotificationsEnabled: true,
    language: "日本語",
  },
};
解答例
document.write(user.settings.language); // 日本語
user.settings.language = "English";
document.write(user.settings.language); // English
GitHub で表示このプログラムを実行する

演習問題​

次のような学生を表すオブジェクトがあります。この学生の国語と算数、英語の3教科の平均点を計算して、表示してください。

const student = {
  name: "山田太郎",
  age: 15,
  email: "yamada.taro@example.com",
  scores: {
    japanese: 90,
    math: 70,
    english: 80,
  },
};
解答例
const averageScore =
  (student.scores.japanese + student.scores.math + student.scores.english) / 3;
document.write(`平均点は${averageScore}点です。`);
GitHub で表示このプログラムを実行する