【JAVASCRIPT】まとまったデータを作るオブジェクトについて

タグ :

1 オブジェクトの基本
2 プロパティのアクセス
3 プロパティの追加・更新・削除
4 メソッドの使用
5 オブジェクトの作成方法
6 オブジェクトのイテレーション
7 ES6の機能
8 JavaScriptのオブジェクトの実用例

オブジェクトの基本

オブジェクトは中括弧 {} を使って作成され、プロパティはキーと値のペアとして定義されます。



const person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

this.nameのthisについて

person オブジェクトには name と age というプロパティと、greet というメソッドが含まれています。

this はJavaScriptのキーワードで、関数が呼び出されたコンテキストを指します。オブジェクトのメソッド内で this を使用すると、そのメソッドを所有しているオブジェクトを指します。

具体的に言うと、person オブジェクトの greet メソッド内で使用される this は、person オブジェクト自体を指しています。



const person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

// メソッドの呼び出し
person.greet(); // "Hello, my name is John"

person.greet() を呼び出すと、greet メソッド内の this は person オブジェクトを指します。
したがって、this.name は person.name と同じで、”John” になります。

別のオブジェクトに greet を割り当てる場合



const anotherPerson = {
  name: "Alice"
};

anotherPerson.greet = person.greet;
anotherPerson.greet(); // "Hello, my name is Alice"

ここでは、person.greet メソッドを anotherPerson オブジェクトに割り当てています。
anotherPerson.greet() を呼び出すと、this は anotherPerson を指します。
したがって、this.name は anotherPerson.name と同じで、”Alice” になります。

this が意図した通りに機能しない場合

this の値は、関数がどのように呼び出されたかによって異なるため、注意が必要です。例えば、メソッドを変数に代入してから呼び出す場合、
this はグローバルオブジェクト（ブラウザ環境では window、Node.js 環境では global）を指します。そのため、this.name は undefined になります。



const greet = person.greet;
greet(); // "Hello, my name is undefined"

this の明示的な設定

this を明示的に設定する方法もあります。例えば、call、apply、および bind メソッドを使用することができます。



const greet = person.greet;
greet.call(person); // "Hello, my name is John"
greet.apply(person); // "Hello, my name is John"

const boundGreet = greet.bind(person);
boundGreet(); // "Hello, my name is John"

call と apply は関数を呼び出すときに this を明示的に設定します。
bind は新しい関数を作成し、その新しい関数で this が常に特定の値を持つようにします。

これらの方法を使うことで、this を意図した通りに制御できます。

プロパティのアクセス

オブジェクトのプロパティには、ドット表記またはブラケット表記を使ってアクセスできます。



// ドット表記
console.log(person.name); // "John"

// ブラケット表記
console.log(person["age"]); // 30

プロパティの追加・更新・削除

プロパティは後から追加・更新・削除することができます。



// プロパティの追加
person.city = "New York";
console.log(person.city); // "New York"

// プロパティの更新
person.age = 31;
console.log(person.age); // 31

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

メソッドの使用

オブジェクトのメソッドは、そのオブジェクトのプロパティや他のメソッドにアクセスするために this キーワードを使用します。



person.greet(); // "Hello, my name is John"

オブジェクトの作成方法

リテラル表記: 最も一般的な方法。



const car = {
  make: "Toyota",
  model: "Camry",
  year: 2020
};

コンストラクタ関数: より複雑なオブジェクトの作成に使用。



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

const alice = new Person("Alice", 25);

Object.create メソッド: プロトタイプを使ってオブジェクトを作成。



const parent = {
  greet: function() {
    console.log("Hello");
  }
};

const child = Object.create(parent);
child.name = "Charlie";

オブジェクトのイテレーション

オブジェクトのプロパティを反復処理するには、for…in ループを使用します。



for (let key in person) {
  console.log(key + ": " + person[key]);
}

ES6の機能

ES6以降、オブジェクトにはいくつかの便利な新機能が追加されました。

オブジェクトの分割代入



const { name, age } = person;
console.log(name); // "John"
console.log(age); // 30

プロパティの省略表記



const name = "Jane";
const age = 28;
const user = { name, age }; // { name: "Jane", age: 28 }

計算されたプロパティ名



const prop = "age";
const obj = {
  [prop]: 40
};
console.log(obj.age); // 40

JavaScriptのオブジェクトの実用例

ユーザープロファイルの管理

ユーザープロファイル情報を管理するためにオブジェクトを使用します。



const userProfile = {
  username: "john_doe",
  email: "john.doe@example.com",
  age: 25,
  isActive: true,
  login: function() {
    console.log(`${this.username} has logged in.`);
  },
  logout: function() {
    console.log(`${this.username} has logged out.`);
  }
};

// メソッドの使用
userProfile.login(); // "john_doe has logged in."
userProfile.logout(); // "john_doe has logged out."

// プロパティの更新
userProfile.age = 26;
console.log(userProfile.age); // 26

商品カタログ

商品カタログを管理するためにオブジェクトを使用します。



const product = {
  id: 1,
  name: "Laptop",
  price: 999.99,
  discount: 0.1, // 10% discount
  getPriceAfterDiscount: function() {
    return this.price * (1 - this.discount);
  }
};

console.log(product.name); // "Laptop"
console.log(product.getPriceAfterDiscount()); // 899.991

APIからのデータ取得と管理

APIから取得したデータをオブジェクトに保存して管理します。



const user = {};

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(response => response.json())
  .then(data => {
    user.id = data.id;
    user.name = data.name;
    user.email = data.email;
    console.log(user);
  });

DOM操作

DOM要素を操作するためにオブジェクトを使用します。



const domManipulator = {
  element: document.getElementById('myElement'),
  setText: function(text) {
    this.element.innerText = text;
  },
  hide: function() {
    this.element.style.display = 'none';
  },
  show: function() {
    this.element.style.display = 'block';
  }
};

// メソッドの使用
domManipulator.setText('Hello, World!');
domManipulator.hide();
setTimeout(() => domManipulator.show(), 2000);

ショッピングカートの管理

ショッピングカートの管理にオブジェクトを使用します。



const shoppingCart = {
  items: [],
  addItem: function(item) {
    this.items.push(item);
  },
  getTotalPrice: function() {
    return this.items.reduce((total, item) => total + item.price, 0);
  },
  listItems: function() {
    return this.items.map(item => item.name).join(', ');
  }
};

shoppingCart.addItem({ name: "Laptop", price: 999.99 });
shoppingCart.addItem({ name: "Mouse", price: 19.99 });
console.log(shoppingCart.getTotalPrice()); // 1019.98
console.log(shoppingCart.listItems()); // "Laptop, Mouse"

イベントリスナーの管理

イベントリスナーをオブジェクトで管理します。



const eventManager = {
  events: {},
  addEvent: function(event, listener) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(listener);
  },
  removeEvent: function(event, listener) {
    if (!this.events[event]) return;

    const index = this.events[event].indexOf(listener);
    if (index > -1) {
      this.events[event].splice(index, 1);
    }
  },
  triggerEvent: function(event, ...args) {
    if (!this.events[event]) return;

    this.events[event].forEach(listener => listener(...args));
  }
};

function onClick() {
  console.log('Element clicked');
}

eventManager.addEvent('click', onClick);
eventManager.triggerEvent('click'); // "Element clicked"
eventManager.removeEvent('click', onClick);
eventManager.triggerEvent('click'); // No output

前ページに戻る