このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

【JavaScript入門】Object

Object

　JavaScript には、あらゆる情報（数値や文字列、日時や配列など）を扱うために、多種多様なオブジェクトが用意されています。これらのオブジェクトの基本的な祖先となるのが Object です。通常、コード中では Object の機能を直接意識することは少ないかもしれませんが、実は多くの標準ビルトインオブジェクトが内部的にこの Object を継承して成り立っています。ここでは、Object が持つメソッドと、そこから派生した各種ビルトインオブジェクトの概要について解説します。

１．Object オブジェクトの役割

  • Object は JavaScript における基本的なオブジェクトの祖先。
  • Object のインスタンス（{} で作るオブジェクトリテラルなど）や、標準ビルトインオブジェクトは、いずれも最終的に Object を継承している。
  • 「インスタンスで使えるメソッド」と「静的メソッド」が存在する。
【Objectと子や孫】

Object
 ├─ 子
 │   └─ 孫
 └─ 子   └─ ひ孫
     └─ 孫

２．Object のインスタンスメソッド

　Object のインスタンス（{ name: '～', price: 〜 }など）で使用可能な主なメソッドは以下のとおりです。

メソッド説明
.toString()オブジェクトを文字列表現に変換し、その文字列を返す。
.valueOf()オブジェクトが表すプリミティブな値を返す。
※プリミティブ値とは、プログラミング言語で利用できる基本的なデータ型（組み込みデータ型、基本データ型とも呼ばれる）の値です。数値や文字列、真偽値などの単純な値を表します。

　JavaScript のほとんどのオブジェクト（配列や日付など）には、これらのメソッドが継承されており、状況によってオリジナルの文字列変換や値変換を行うように作られています。

３．Object の静的メソッド

　Object 自体から直接呼び出すメソッドは「静的メソッド」と呼ばれ、インスタンス上からは使えません。代表的なものは以下のとおりです。

メソッド説明
Object.keys(obj)オブジェクト obj に存在する全てのプロパティ名を配列として返す。
Object.values(obj)オブジェクト obj の値を配列として返す。
Object.entries(obj)オブジェクト obj の [キー, 値] のペアを要素とする配列を返す。
Object.assign(target, source)source から target へプロパティをコピーし、更新した target を返す。

　下記の例では、Object.keys() などを使ってオブジェクトの情報を取り出したり、Object.assign() で複数のオブジェクトを統合したりしています。

４．サンプルコード：Object のメソッド利用

　ファイル名を「objectIntroSample.html」として保存し、ブラウザで実行してみてください。開発者ツール（コンソール）に結果が表示されます。

【objectIntroSample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>objectIntroSample.html</title>
</head>
<body>
  <h1>Object のメソッド紹介</h1>
  <p>ブラウザの開発者ツールを開いて、コンソールの出力を確認してください。</p>

  <script>
    // 1. Object のインスタンスを作成
    const dessert = { name: 'アップルパイ', price: 600 };
    // 2. インスタンスメソッド：toString(), valueOf() の確認
    console.log('toString:', dessert.toString());
    console.log('valueOf:', dessert.valueOf());

    // 3. 静的メソッド：keys(), values(), entries()
    console.log('Object.keys(dessert):', Object.keys(dessert));
    console.log('Object.values(dessert):', Object.values(dessert));
    console.log('Object.entries(dessert):', Object.entries(dessert));

    // 4. assign() でオブジェクトを結合
    const info = { category: 'sweets', time: 'tea time' };
    const merged = Object.assign(dessert, info);
    console.log('dessert:', dessert);
    console.log('info:', info);
    console.log('merged:', merged);

    // 5. 結合後の dessert には info のプロパティが追加されている
    console.log('dessert after assign:', dessert);
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

toString: [object Object]
valueOf: {name: "アップルパイ", price: 600}
Object.keys(dessert): ["name", "price"]
Object.values(dessert): ["アップルパイ", 600]
Object.entries(dessert): [["name","アップルパイ"], ["price",600]]
dessert: {name: "アップルパイ", price: 600, category: "sweets", time: "tea time"}
info: {category: "sweets", time: "tea time"}
merged: {name: "アップルパイ", price: 600, category: "sweets", time: "tea time"}
dessert after assign: {name: "アップルパイ", price: 600, category: "sweets", time: "tea time"}
  • dessert.toString() は特に独自の文字列を返さず、[object Object] というデフォルトの形式になっています。
  • Object.keys(dessert) や Object.values(dessert) では、プロパティ名や値を配列でまとめて取得できます。
  • Object.assign(dessert, info) で dessert に info の内容をコピーして、マージ後のオブジェクトを返します。

５．標準ビルトインオブジェクト

  • Number, Math, Date, String, RegExp などのオブジェクトは、Object を基盤として追加の特性やメソッドを持ったもの。
  • 例外オブジェクト（Error、RangeError など）や JSON、配列（Array）など、多様なビルトインオブジェクトが最終的に Object から継承している。

　JavaScript ではデータ処理や日付操作、ネットワーク通信など、さまざまな場面でこれらのビルトインオブジェクトが活躍します。

まとめ

  • Object は JavaScript オブジェクトの基本的な祖先。
  • インスタンスメソッド（toString() など）と静的メソッド（Object.keys() など）に分かれる。
  • Object.assign() などを使うと、プロパティの一括コピーやオブジェクトの結合が簡単にできる。
  • 多くの標準ビルトインオブジェクトは、Object を継承して機能が拡張されている。

　こうした Object に関する理解を深めると、他のビルトインオブジェクトや自分で作成するオブジェクトの仕組みがより明確に把握できるようになります。