第3章: JavaScript オブジェクトと配列

JavaScriptのプログラミングでは、「オブジェクト」と「配列」の概念は非常に重要です。オブジェクトと配列を活用することで、データの管理や操作が効率的かつ柔軟になります。この章では、オブジェクトと配列の基本から応用的な使用方法までを詳細に解説します。

---

3.1 オブジェクトの作成と操作

オブジェクトは、JavaScriptで複雑なデータを扱うための基本的な構造です。オブジェクトはキーと値のペアを持つデータ構造で、さまざまなデータやメソッドを格納できます。

オブジェクトの作成

JavaScriptでオブジェクトを作成するには、以下の2つの方法があります。

1. リテラル構文

リテラル構文を使用する方法は、オブジェクトの生成に最も一般的です。中括弧 {} を使い、キーと値のペアをカンマで区切って定義します。

let person = {
  name: "John",
  age: 30,
  city: "New York"
};

このオブジェクトには、name, age, city という3つのプロパティが定義されています。それぞれに値が割り当てられています。

2. コンストラクタ関数

new Object() を使用してオブジェクトを生成することもできます。

let person = new Object();
person.name = "John";
person.age = 30;
person.city = "New York";

コンストラクタ関数を使う方法はリテラル構文と同様に動作しますが、一般的にはリテラル構文の方が簡潔で読みやすいため、推奨されます。

オブジェクトプロパティへのアクセスと操作

オブジェクトのプロパティにアクセスする方法には、ドット記法とブラケット記法の2種類があります。

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

ドット記法は直接プロパティ名でアクセスするためシンプルですが、プロパティ名にスペースが含まれる場合や動的にプロパティを指定する場合はブラケット記法を使用します。

プロパティの追加と削除

オブジェクトに新しいプロパティを追加するのは非常に簡単です。

person.country = "USA";
console.log(person.country); // USA

プロパティを削除したい場合は、delete キーワードを使います。

delete person.city;
console.log(person.city); // undefined

メソッドの定義

オブジェクトに関数を追加してメソッドを定義することもできます。以下は person オブジェクトに greet メソッドを追加する例です。

person.greet = function() {
  console.log("Hello, " + this.name + "!");
};
person.greet(); // Hello, John!

メソッド内で this を使用することで、そのオブジェクト自身を参照することが可能です。

---

3.2 配列とそのメソッド

配列は、データのリストを一括で扱うことができる構造です。JavaScriptの配列は柔軟で、異なるデータ型を含めることも可能です。

配列の作成

配列を作成するには、[]（リテラル構文）または new Array() 構文が使えます。

let fruits = ["apple", "banana", "cherry"];
let numbers = new Array(1, 2, 3, 4, 5);

リテラル構文のほうがシンプルでよく使われます。

配列メソッド

JavaScriptの配列には、多くの便利なメソッドが用意されています。ここではいくつかの主要なメソッドを紹介します。

1. pushとpop

push は配列の末尾に要素を追加し、pop は末尾の要素を削除します。

fruits.push("orange");
console.log(fruits); // ["apple", "banana", "cherry", "orange"]

fruits.pop();
console.log(fruits); // ["apple", "banana", "cherry"]

2. shiftとunshift

shift は先頭の要素を削除し、unshift は先頭に要素を追加します。

fruits.unshift("mango");
console.log(fruits); // ["mango", "apple", "banana", "cherry"]

fruits.shift();
console.log(fruits); // ["apple", "banana", "cherry"]

3. indexOf と includes

indexOf は特定の要素のインデックスを返し、要素が存在しない場合は -1 を返します。includes は要素が存在するかどうかを true または false で返します。

console.log(fruits.indexOf("banana")); // 1
console.log(fruits.includes("grape")); // false

4. slice と splice

slice は指定した範囲を抽出し、新しい配列を返します。splice は配列の一部を削除または置換し、元の配列に変更を加えます。

let citrus = fruits.slice(1, 3);
console.log(citrus); // ["banana", "cherry"]

fruits.splice(1, 1, "grape");
console.log(fruits); // ["apple", "grape", "cherry"]

---

3.3 イテレーションとメソッド（map, filter, reduce）

配列の各要素に対して処理を行うためのメソッドがいくつかあります。その中でも代表的なものが map, filter, reduce です。

map

map メソッドは、配列の各要素に対して関数を適用し、新しい配列を生成します。

let numbers = [1, 2, 3, 4, 5];
let squared = numbers.map(function(num) {
  return num * num;
});
console.log(squared); // [1, 4, 9, 16, 25]

filter

filter メソッドは、特定の条件を満たす要素だけを抽出して新しい配列を作成します。

let evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});
console.log(evenNumbers); // [2, 4]

reduce

reduce メソッドは、配列を1つの値に集約します。累積された値を持ち、各要素に対して処理を実行します。

let sum = numbers.reduce(function(accumulator, num) {
  return accumulator + num;
}, 0);
console.log(sum); // 15

reduce は複雑なデータ処理に向いており、初期値（この例では 0）も指定できます。

---

3.4 関数の定義と呼び出し

JavaScriptでは、関数もデータと同様にオブジェクトとして扱われるため、配列内に関数を格納し、他の関数内で呼び出すことが可能です。

関数の基本構文

function greet(name) {
  return "Hello, " + name + "!";
}
console.log(greet("Alice")); // Hello, Alice!

---

まとめ

オブジェクトと配列の理解は、JavaScriptのプログラミングにおいて重要な要素です。この章で解説した基本的な操作に加え、これらのデータ構造を応用して複雑なデータを管理・処理する力がつきます。