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

オブジェクト

オブジェクト​

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

値の種類

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

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

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

これでは、3つの情報の関連性が分かりづらいだけでなく、配列の要素や関数の引数などとして使用するたびに同様の記述を繰り返すことになり、冗長です。オブジェクトにより3つの値を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 で表示このプログラムを実行する

配列とオブジェクト​

さきほどJavaScriptにおいてプリミティブでない値はすべてオブジェクトであると説明しました。配列はプリミティブではないので、オブジェクトの一種です。

値の種類

JavaScriptのオブジェクトは、プロパティ名とプロパティ値の組によって構成されているのでした。JavaScriptでは、配列も、各要素のインデックスがプロパティ名になっているオブジェクトだとみなすことができます。

配列のプロパティ

逆に、オブジェクトも配列と同じように使用することができます。この記法をブラケット記法と呼び、プログラムの動作に応じて使用したいプロパティを切り替えるのに役立ちます。

const subject = "english"; // ここを変えると表示される教科が変わる。
const scores = {
  japanese: 90,
  math: 70,
  english: 80,
};
document.write(`${subject}の点数は${scores[subject]}点です。`); // englishの点数は80点です。
オブジェクトのプロパティ名

オブジェクトのプロパティ名に数値は使用できません。それではなぜ、配列の場合はstudentNames[0]のようにプロパティ名に数値を使用できるのでしょうか。

答えは単純で、数値が文字列に変換されているためです。そのため、studentNames[0]はstudentNames["0"]と同じ意味になります。

const studentNames = ["田中", "佐藤", "鈴木"];
document.write(studentNames["0"]); // 田中

初級演習​

テストの平均点​

次のような学生を表すオブジェクトがあります。この学生の国語と算数、英語の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 で表示このプログラムを実行する

中級演習​

点群を囲む長方形​

平面上の点は、プロパティxとyを持つオブジェクトとして表現することができます。また、平面上の長方形は、左上の点topLeftと右下の点bottomRightをプロパティに持つオブジェクトとして表現することができます。平面上の点群を表すオブジェクトの配列から、その点群を囲む最小の長方形を求める関数getBoundingRectangleを実装してください。

function getBoundingRectangle(points) {
  // ここに関数を実装してください
}

この関数は、次のようにして使用します。

// 建物の場所
const buildingLocations = [
  { x: 2, y: 1 },
  { x: -1, y: 4 },
  { x: -2, y: -1 },
];
// 全ての建物が収まる地図を表す長方形
// { topLeft: { x: -2, y: -1 }, bottomRight: { x: 2, y: 4 } }
const mapRectangle = getBoundingRectangle(buildingLocations);
document.write(
  `地図の左上の点は(${mapRectangle.topLeft.x}, ${mapRectangle.topLeft.y})で、右下の点は(${mapRectangle.bottomRight.x}, ${mapRectangle.bottomRight.y})です。`,
);
ヒント

各点のx座標とy座標の最小値と最大値を求めることで、長方形の左上の点と右下の点を求めることができます。

解答例
function getBoundingRectangle(points) {
  const rectangle = {
    topLeft: {
      x: points[0].x,
      y: points[0].y,
    },
    bottomRight: {
      x: points[0].x,
      y: points[0].y,
    },
  };
  for (const point of points) {
    if (point.x < rectangle.topLeft.x) {
      rectangle.topLeft.x = point.x;
    }
    if (point.y < rectangle.topLeft.y) {
      rectangle.topLeft.y = point.y;
    }
    if (point.x > rectangle.bottomRight.x) {
      rectangle.bottomRight.x = point.x;
    }
    if (point.y > rectangle.bottomRight.y) {
      rectangle.bottomRight.y = point.y;
    }
  }
  return rectangle;
}
GitHub で表示このプログラムを実行する