JS_オブジェクトと配列

10オブジェクトと配列

10-1 オブジェクトの基本

JavaScriptのオブジェクトは、キーと値のペアで構成されるデータ構造です。
様々なタイプのデータを格納し、操作するのに使用されます。
以下の例では、person という名前のオブジェクトを作成し、name と age の2つのプロパティを持たせています。name の値は “太郎”、age の値は 25 です。

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

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

// ドット記法を使用して name プロパティにアクセス
console.log(person.name); // 出力: "太郎" これはドット記法の例です
// ブラケット記法を使用して age プロパティにアクセス
console.log(person["age"]); // 出力: 25 これはブラケット記法の例です

また、プロパティを追加・削除する際は以下のようにします。

// 追加

person.job = "プログラマー";
console.log(person.job);
// 出力: プログラマー これはドット記法でプロパティを追加した例です。ブラケット記法でも、person["job"] = "プログラマー";のようにして追加可能。

// 削除

delete person.job;
console.log(person.job);
// 出力: undefined これはドット記法でプロパティを削除した例です。ブラケット記法でも、delete person["job"];"のようにして削除可能。

オブジェクトに対してメソッドを追加することも可能です。

let person = {
name: '太郎',
greet: function() {
console.log('こんにちは、' + this.name + 'です！');
}
};
person.greet(); // 出力: こんにちは、太郎です！

上記のようにJavaScriptのオブジェクトは柔軟なデータ構造であり、関数、配列、他のオブジェクトなど、あらゆる種類の値を格納することができます。

10-2 配列の操作

10-2-1 配列の宣言

配列の作成方法は大きく２つあります。

main.js

// 配列コンストラクタ
let array1 = new Array('朝', '昼', '晩');
// 配列リテラル
let array2 = ['朝', '昼', '晩'];

console.log(array1);
console.log(array2);

//  array1 ['朝', '昼', '晩']
//  array2 ['朝', '昼', '晩']

new Array or [] を用いると配列を作成することができます。

注意

let array1 = new Array(3);
let array2 = [3];
console.log(array1);
console.log(array2);
// array1 [空 × 3] // array2 [3]

配列コンストラクタの場合、引数に数値を入れた場合、数値分の空配列ができてしまうので基本的には配列リテラルを用います。

配列の初期化は以下のように記載しましょう。

let array = [];

10-2-2 配列の宣言

【配列に要素を追加する方法】

先頭に追加する(unshift)

let array = ['赤', '青'];

array.unshift('緑');
console.log(array); 

// ['緑', '赤', '青']

末尾に追加する(push)

let array = ['赤', '青'];

array.push('緑');
console.log(array); 

// ['赤', '青', '緑']

【配列の要素を削除する方法】

先頭を削除(shift)

let array = ['赤', '青'];
array.shift();
console.log(array); 

// ['青']

末尾を削除(pop)

let array = ['赤', '青'];

array.pop();
console.log(array); 

// ['赤']

10-2-3 配列にアクセスする方法

配列の中身を表示させる方法をご紹介します。

let flower = ["ひまわり", "あさがお", "チューリップ", "どくだみ"];

配列の中身を見る場合はインデックス番号を指定します。

普通ならば左から１，２，３という風に数えていきますが,
配列の場合、はじめは０から始まります。

よってひまわりを取得したい場合は、flower[0]とすると取得することができます。

let flower = ["ひまわり", "あさがお", "チューリップ", "どくだみ"];

console.log(flower[0]);
// ひまわり
console.log(flower[1]);
// あさがお
console.log(flower[2]);
// チューリップ
console.log(flower[3]);
// どくだみ
console.log(flower[4]);
// undefined

flower[4]は配列の中身が存在しないためundefinedとなります。
また、ループを用いることによって配列の中身を表示させることもできます。

10-3 JSONとオブジェクト

JSON（JavaScript Object Notation）は、JavaScriptのオブジェクト構造を文字列で表すときに使う表記法でデータ交換のフォーマットとして広く使用されています。
JavaScriptのコード内では、オブジェクトや配列の形式でデータを管理することが多いですが、それらをそのままサーバーに対して送信することはできません。
JSONを使用することで管理しているデータを1つずつリクエストパラメータとして設定せずに、まとめて送信することができます。

10-3-1 JSONの表記法

JSONは、JavaScriptのオブジェクトリテラル表記法に似ていますが、以下のような重要な違いがあります：

キーは必ずダブルクォーテーション（”）で囲む必要があります。
文字列の値もダブルクォーテーション（”）で囲む必要があります。
数値、ブーリアン値（true/false）、配列、オブジェクト、nullはJavaScriptと同様に記述できます。

以下は有効なJSONの例です：

{
   "name": "太郎",
   "age": 25,
   "isStudent": false,
   "hobbies": ["読書", "映画"],
   "address": { "city": "東京", "country": "日本" }
}

10-3-2 JSON文字列の生成

JavaScriptでオブジェクトからJSON文字列を生成するには、JSON.stringify()メソッドを使用します。このメソッドは、JavaScriptのオブジェクトや値をJSON文字列に変換します。

let person = { name: "太郎", age: 25, isStudent: false };
let jsonString = JSON.stringify(person);
console.log(jsonString);
// 出力: {"name":"太郎","age":25,"isStudent":false}

10-3-3 JSON文字列からオブジェクトの生成

逆に、JSON文字列からJavaScriptのオブジェクトを生成するには、JSON.parse()メソッドを使用します。このメソッドは、JSON文字列を解析してJavaScriptのオブジェクトや値に変換します。

let jsonString = '{"name":"太郎","age":25,"isStudent":false}';
let person = JSON.parse(jsonString);
console.log(person);
// 出力: { name: '太郎', age: 25, isStudent: false }

このように、JSON.stringify()とJSON.parse()を使用することで、JavaScriptのオブジェクトとJSON文字列の間で相互に変換することができます。