JavaScriptオブジェクトの使い方10選！初心者でも理解できる徹底解説

はじめに
●JavaScriptオブジェクトとは
- ○オブジェクトの基本概念
●JavaScriptオブジェクトの作り方
- ○オブジェクトリテラルを使った方法
- ○コンストラクタ関数を使った方法
●JavaScriptオブジェクトの使い方
●JavaScriptオブジェクトの応用例
●JavaScriptオブジェクトの注意点と対処法
- ○プロパティ名と予約語の扱い
- ○オブジェクトのコピーと参照の違い
●JavaScriptオブジェクトのカスタマイズ方法
- ○プロトタイプを利用した拡張
- ○Object.create()を使ったオブジェクトの生成
まとめ

はじめに

この記事を読めば、JavaScriptオブジェクトの作り方や使い方を習得できるようになります。

初心者の方でもわかりやすく、サンプルコードを多数掲載しているので、JavaScriptオブジェクトを活用していろいろなプロジェクトに取り組むことができるようになります。

それでは、早速JavaScriptオブジェクトについて学んでいきましょう！

●JavaScriptオブジェクトとは

JavaScriptオブジェクトは、データと機能を一つのまとまりとして扱うためのものです。

オブジェクトは、プロパティとメソッドを持つことができます。プロパティはオブジェクトのデータを表し、メソッドはオブジェクトが持つ機能を表します。

○オブジェクトの基本概念

JavaScriptでは、オブジェクトはキーと値のペアが格納されているコンテナのようなものです。

キーはプロパティ名やメソッド名を表し、値はデータや機能を表します。

オブジェクトは、下記のようにプロパティとメソッドを持つことができます。

{
  プロパティ名1: 値1,
  プロパティ名2: 値2,
  メソッド名1: function() {
    // 処理
  },
  メソッド名2: function() {
    // 処理
  }
}

●JavaScriptオブジェクトの作り方

JavaScriptオブジェクトは、主にオブジェクトリテラルとコンストラクタ関数の2つの方法で作成することができます。

○オブジェクトリテラルを使った方法

オブジェクトリテラルは、キーと値のペアを中括弧{}で囲んで定義する方法です。

下記のコードは、オブジェクトリテラルを使ってオブジェクトを作成する例です。

const person = {
  name: "太郎",
  age: 25,
  sayHello: function() {
    console.log("こんにちは、" + this.name + "です。");
  }
};

// オブジェクトのプロパティやメソッドにアクセスする例
console.log(person.name); // "太郎"
person.sayHello(); // "こんにちは、太郎です。"

○コンストラクタ関数を使った方法

コンストラクタ関数は、オブジェクトを生成するための関数です。

下記のコードは、コンストラクタ関数を使用してオブジェクトを作成する例です。

この例では、Personコンストラクタを定義し、新しいオブジェクトを作成しています。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log("こんにちは、" + this.name + "です。");
  };
}

// コンストラクタ関数を使用してオブジェクトを作成する例
const person = new Person("太郎", 25);
console.log(person.name); // "太郎"
person.sayHello(); // "こんにちは、太郎です。"

●JavaScriptオブジェクトの使い方

○サンプルコード1：オブジェクトのプロパティへのアクセス

このコードでは、オブジェクトのプロパティにアクセスして値を取得しています。

この例では、オブジェクトリテラルを使用してオブジェクトを作成し、ドット記法とブラケット記法でプロパティにアクセスしています。

const person = {
  name: "太郎",
  age: 25
};

console.log(person.name); // ドット記法でアクセス: "太郎"
console.log(person["age"]); // ブラケット記法でアクセス: 25

○サンプルコード2：オブジェクトのプロパティの追加と削除

このコードでは、オブジェクトのプロパティを追加および削除しています。

この例では、オブジェクトリテラルを使用してオブジェクトを作成し、プロパティを追加および削除しています。

const person = {
  name: "太郎",
  age: 25
};

// プロパティの追加
person.gender = "男性";
console.log(person.gender); // "男性"

// プロパティの削除
delete person.age;
console.log(person.age); // undefined

○サンプルコード3：オブジェクトのメソッドの定義と呼び出し

このコードでは、オブジェクトのメソッドを定義し、それを呼び出しています。

オブジェクトリテラルを使用して、名前と年齢のプロパティを持つオブジェクトを作成し、sayHelloという名前のメソッドを定義しています。

このメソッドでは、名前を使って挨拶の文章を出力します。

const person = {
  name: "太郎",
  age: 25,
  sayHello: function() {
    console.log("こんにちは、" + this.name + "です。");
  }
};

person.sayHello(); // "こんにちは、太郎です。"

○サンプルコード4：オブジェクトの継承

このコードでは、オブジェクトの継承を実現しています。Personコンストラクタを定義し、新しいオブジェクトを作成します。

次に、Employeeコンストラクタを定義し、Personを継承して新しいオブジェクトを作成しています。

この例では、継承を実現するために、EmployeeのプロトタイプにPersonのインスタンスを設定しています。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log("こんにちは、" + this.name + "です。");
};

function Employee(name, age, position) {
  Person.call(this, name, age);
  this.position = position;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

const employee = new Employee("花子", 30, "マネージャー");
employee.sayHello(); // "こんにちは、花子です。"
console.log(employee.position); // "マネージャー"

●JavaScriptオブジェクトの応用例

○サンプルコード5：オブジェクトを使ったショッピングカート機能

このコードでは、ショッピングカート機能を実現するオブジェクトを作成しています。

カートに商品を追加し、合計金額を計算するメソッドが定義されています。

const shoppingCart = {
  items: [],
  addItem: function (item, price, quantity) {
    this.items.push({ item: item, price: price, quantity: quantity });
  },
  getTotal: function () {
    let total = 0;
    for (const item of this.items) {
      total += item.price * item.quantity;
    }
    return total;
  },
};

shoppingCart.addItem("りんご", 100, 3);
shoppingCart.addItem("バナナ", 150, 2);
console.log(shoppingCart.getTotal()); // 600

○サンプルコード6：オブジェクトを使った簡単なToDoリスト管理

このコードでは、ToDoリストを管理するオブジェクトを作成しています。

タスクを追加し、完了したタスクを削除するメソッドが定義されています。

const todoList = {
  tasks: [],
  addTask: function (task) {
    this.tasks.push(task);
  },
  removeTask: function (task) {
    const index = this.tasks.indexOf(task);
    if (index > -1) {
      this.tasks.splice(index, 1);
    }
  },
};

todoList.addTask("洗濯物を干す");
todoList.addTask("買い物に行く");
todoList.removeTask("洗濯物を干す");
console.log(todoList.tasks); // ["買い物に行く"]

○サンプルコード7：オブジェクトを使ったイベントハンドリング

このコードでは、イベントハンドラーをオブジェクトで管理します。

ボタンをクリックしたときにメッセージを表示するイベントリスナーを設定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>イベントハンドリングの例</title>
</head>
<body>
  <button id="myButton">クリックしてください</button>
  <script>
    const eventHandler = {
      showMessage: function () {
        alert('ボタンがクリックされました。');
      },
    };

    const button = document.getElementById('myButton');
    button.addEventListener('click', eventHandler.showMessage);
  </script>
</body>
</html>

○サンプルコード8：オブジェクトを使ったAPIデータの取得と表示

このコードでは、APIからデータを取得し、そのデータを表示するオブジェクトを作成しています。

Fetch APIを使ってデータを取得し、指定した要素に結果を表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>APIデータの取得と表示の例</title>
</head>
<body>
  <div id="result"></div>
  <script>
    const apiHandler = {
      fetchData: async function (url, elementId) {
        try {
          const response = await fetch(url);
          const data = await response.json();
          document.getElementById(elementId).innerText = JSON.stringify(data);
        } catch (error) {
          console.error('データの取得に失敗しました:', error);
        }
      },
    };

    apiHandler.fetchData('https://jsonplaceholder.typicode.com/todos/1', 'result');
  </script>
</body>
</html>

○サンプルコード9：オブジェクトを使ったフォームバリデーション

このコードでは、フォームのバリデーションを行うオブジェクトを作成しています。

入力されたメールアドレスが正しい形式かどうかをチェックするメソッドが定義されています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォームバリデーションの例</title>
</head>
<body>
  <form id="myForm">
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email">
    <button type="submit">送信</button>
  </form>
  <script>
    const formValidator = {
      isValidEmail: function (email) {
        const re = /^[\w-_.]+@[\w-]+(\.\w+)+$/;
        return re.test(email);
      },
      validateForm: function (event) {
        event.preventDefault();
        const email = document.getElementById('email').value;
        if (!this.isValidEmail(email)) {
          alert('メールアドレスが正しくありません。');
          return false;
        }
        alert('バリデーションに成功しました。');
      },
    };

    const form = document.getElementById('myForm');
    form.addEventListener('submit', (event) => formValidator.validateForm(event));
  </script>
</body>
</html>

○サンプルコード10：オブジェクトを使ったゲーム開発

このコードでは、簡単なゲームの基本構造をオブジェクトで表現しています。

プレイヤーオブジェクトがゲームオブジェクトの中で移動し、得点を加算するメソッドが定義されています。

const game = {
  score: 0,
  player: {
    x: 0,
    y: 0,
  },
  movePlayer: function (x, y) {
    this.player.x += x;
    this.player.y += y;
  },
  addScore: function (points) {
    this.score += points;
  },
};

game.movePlayer(5, 10);
game.addScore(100);
console.log(game.player); // {x: 5, y: 10}
console.log(game.score);  // 100

●JavaScriptオブジェクトの注意点と対処法

○プロパティ名と予約語の扱い

JavaScriptでは、予約語はオブジェクトのプロパティ名として使用することは避けてください。

予約語を使用した場合、予期しない動作が発生することがあります。

○オブジェクトのコピーと参照の違い

オブジェクトは参照型です。

オブジェクトを別の変数に代入すると、参照がコピーされるため、両方の変数が同じオブジェクトを指します。

オブジェクトのコピーを作成する場合、Object.assign()やスプレッド構文を使用してください。

●JavaScriptオブジェクトのカスタマイズ方法

○プロトタイプを利用した拡張

プロトタイプを使って、既存のオブジェクトに新しい機能を追加することができます。

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function () {
  console.log(`こんにちは、${this.name}です。`);
};

const person = new Person('山田');
person.sayHello(); // こんにちは、山田です。

○Object.create()を使ったオブジェクトの生成

Object.create()を使用すると、指定したプロトタイプオブジェクトを持つ新しいオブジェクトを作成できます。

const animal = {
  speak: function () {
    console.log(`${this.name}は鳴きます。`);
  },
};

const dog = Object.create(animal);
dog.name = 'ポチ';
dog.speak(); // ポチは鳴きます。