初心者でも分かる!JavaScriptオブジェクト活用法10選

初心者が理解しやすいJavaScriptオブジェクトの解説JS
この記事は約7分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptオブジェクトを活用できるようになります。

JavaScriptオブジェクトは、初心者にとって難しく感じるかもしれませんが、実際には非常に便利で強力な機能を持っています。

この記事では、JavaScriptオブジェクトの作り方、使い方、注意点、カスタマイズ方法を10個の具体的な例とサンプルコードを交えて徹底解説します。

これを機会にぜひJavaScriptオブジェクトをマスターしましょう!

●JavaScriptオブジェクトとは

JavaScriptオブジェクトは、データと機能をまとめたもので、プログラム内で扱いやすい形でデータを表現できます。

○オブジェクトの基本

オブジェクトはプロパティとメソッドを持ちます。

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

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

JavaScriptオブジェクトは、オブジェクトリテラルやコンストラクタ関数を使って作成できます。

○サンプルコード1:オブジェクトリテラルを使った作成方法

オブジェクトリテラルは、{}内にプロパティとメソッドを記述することでオブジェクトを作成できます。

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

○サンプルコード2:コンストラクタ関数を使った作成方法

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

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log("Hello, my name is " + this.name);
  };
}

const person1 = new Person("John", 30);

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

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

オブジェクトのプロパティにアクセスするには、ドット記法またはブラケット記法を使います。

console.log(person.name); // "John"
console.log(person["age"]); // 30

○サンプルコード4:オブジェクトのメソッドを呼び出す

オブジェクトのメソッドを呼び出すには、メソッド名の後に()をつけて実行します。

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

○サンプルコード5:オブジェクトを配列に格納する

オブジェクトを配列に格納することで、複数のオブジェクトをまとめて管理することができます。

const person2 = new Person("Jane", 28);
const people = [person1, person2];

console.log(people[0].name); // "John"

○サンプルコード6:オブジェクトを関数の引数に渡す

オブジェクトを関数の引数に渡すことで、関数内でオブジェクトのプロパティやメソッドにアクセスできます。

function showInfo(person) {
  console.log("Name: " + person.name + ", Age: " + person.age);
}

showInfo(person1); // "Name: John, Age: 30"

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

JavaScriptオブジェクトには、参照渡しという性質があります。

オブジェクトを別の変数に代入したり、関数に渡すときはオブジェクトへの参照が渡されます。

これにより、意図しない変更が加えられることがあります。

対処法として、オブジェクトをコピーする際には浅いコピー(Object.assign)や深いコピー(JSON.parse(JSON.stringify))を利用しましょう。

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

○サンプルコード7:プロトタイプを使った継承

プロトタイプを使って、オブジェクト間でメソッドを共有したり、継承を実現できます。

Person.prototype.introduce = function() {
  console.log("Hi, I am " + this.name + " and I am " + this.age + " years old.");
};

person1.introduce(); // "Hi, I am John and I am 30 years old."

○サンプルコード8:オブジェクトのプロパティを追加・削除する

オブジェクトのプロパティは、動的に追加や削除が可能です。

person1.gender = "male";
console.log(person1.gender); // "male"

delete person1.age;
console.log(person1.age); // undefined

○サンプルコード9:オブジェクトのプロパティを列挙する

for…inループを使って、オブジェクトのプロパティを列挙することができます。

for (const key in person1) {
  console.log(key + ": " + person1[key]);
}
// Output:
// name: John
// age: 30
// greet: function() {...}

●応用例とサンプルコード

JavaScriptオブジェクトを活用することで、様々な応用例があります。

下記にいくつかのサンプルコードを紹介します。

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

オブジェクトを利用して、簡単なToDoリストを作成することができます。

function ToDoItem(title, completed) {
  this.title = title;
  this.completed = completed;
  this.toggle = function() {
    this.completed = !this.completed;
  };
}

const item1 = new ToDoItem("Buy milk", false);
const item2 = new ToDoItem("Read a book", true);
const todoList = [item1, item2];

item1.toggle();
console.log(item1.completed); // true

○サンプルコード11:オブジェクトを使った簡単なゲームのキャラクター管理

オブジェクトを活用して、ゲームのキャラクターを管理することができます。

function Character(name, hp, attack) {
  this.name = name;
  this.hp = hp;
  this.attack = attack;
  this.attackEnemy = function(enemy) {
    enemy.hp -= this.attack;
  };
}

const hero = new Character("Hero", 100, 10);
const monster = new Character("Monster", 50, 5);

hero.attackEnemy(monster);
console.log(monster.hp); // 40

まとめ

この記事では、JavaScriptオブジェクトの作り方、使い方、注意点、カスタマイズ方法を10個の具体的な例とサンプルコードを交えて徹底解説しました。

オブジェクトはJavaScriptの重要な機能であり、これをマスターすることで、より効率的で柔軟なプログラムを作成することができます。

これらの知識を活かして、ぜひ実践的なプロジェクトに取り組んでみてください!