本章は前回の記事（※JavaScriptのデータ構造（1））の続きであり、内容を理解していることを前提に進めます。本章の全ての項目は試験に出題される可能性が高く、非常に重要ですのでじっくりと学習しましょう。

値の種類

JavaScriptのデータ型は大きく分けて「プリミティブ型」と「オブジェクト型」の2種類があり、その中に様々なデータ型を持ちます。本章では「オブジェクト型」について詳しく説明します。

オブジェクト型

概要：オブジェクト型は複数の変数やプリミティブ型の値などの集合体で、プリミティブ型とは異なり、値を後から変更することができます。プリミティブ型以外のデータ型はオブジェクト型として扱われ、「typeof」 演算子で確認すると「object」と表示されます。
以下は1〜3の複数の値を格納した変数test（配列）のデータ型の表示結果です。（「配列」は後の項目で説明します。）

■記述例（JavaScript）

let test = [1, 2, 3];
console.log(typeof test);

前述のように、配列が格納されているデータの型は「object」と表示されますが、「関数（function）」を格納した場合については例外となります。関数とは一連の手続きを1つの処理としてまとめ、複数の箇所から呼び出せる機能で、オブジェクト型の一つではありますが、「typeof」演算子でデータ型を判定した場合には「function」として表示されます。

以下は変数testに関数を格納し、「typeof」演算子でデータ型を判定した記述例と表示結果です。（※関数の具体的な記述方法については、後の記事で詳しく説明します。）

■記述例（JavaScript）

let test = function () { };
console.log(typeof test);

下記項目では、オブジェクト型に含まれる、複数の値を纏めて管理する「配列」と「オブジェクト」について、詳しく説明します。

データの配列（Array）

概要：配列(Array)とは、値に順序をつけて格納できるデータ構造です。配列の定義には「[]( 角括弧)」を使用し、値のことを「要素」といいます。複数の要素を列挙する場合、それぞれの値を「 ,(コンマ)」を使って区切り、記述します。
また配列には、配列の操作を行うための様々なメソッド（※オブジェクトがプロパティとして持っている関数）やプロパティ（※オブジェクトの属性や状態）が最初から定義されており、例えば配列の要素の数は「length」プロパティで参照することができます。プロパティを参照する場合、「.(ドット)」記法もしくは「[](角括弧)」記法を使用します。プロパティやオブジェクトに関して、特性と使用方法については後の項目で詳しく説明します。
以下は変数itemsに「りんご」「みかん」「バナナ」の値を格納した配列を定義し、その要素数をconsole.log()を使って出力した記述例と表示結果です。

let items = ["りんご", "みかん", "バナナ"];
console.log(items.length); //ドット記法を使用した場合
console.log(items["length"]); //角括弧記法を使用した場合

上記では、変数itemsには「りんご」「みかん」「バナナ」の３つの要素が格納されているため、表示結果には「3」が出力されます。

次に、配列に用意されているメソッドを利用して、配列の操作を行います。配列の操作には「push()」メソッドを使用し、配列の最後に新しい要素を追加することができます。

以下は、変数itemsにpush()メソッドを使用した後、要素数をconsole.log()を使用して出力した記述例と表示結果です。

■記述例（JavaScript）

let items = ["りんご", "みかん", "バナナ"];
items.push('メロン'); //配列の末尾に要素を追加
console.log(items); //要素を表示
console.log(items.length); //要素数を表示

上記では、変数itemsにはもともと「3」つの要素が格納されていましたが、push()メソッドにより配列の末尾の「メロン」が追加されるため、要素数は「4」と表示されます。

なお、配列の各要素を個別に参照したい場合はインデックス（添字）を使用します。インデックスは、配列に格納された要素の先頭を「0」番目として、そこから順番にインデックスが増えていきます。インデックスでの参照は変数の後に「 [](角括弧)」を追記します。配列内で定義されていない要素のインデックスを指定した場合は「undefined」が表示されます。

以下は、変数 items に「りんご」「みかん」「バナナ」という要素が含まれる配列を格納し、console.log() を使用してそれぞれの要素を出力した記述例と表示結果です。

let items = ["りんご","みかん","バナナ"];
console.log(items[0]); //インデックス0の要素を表示
console.log(items[2]); //インデックス2の要素を表示
console.log(items[3]); //インデックス3の要素を表示(undefined)

最後に、要素の削除を行いたい場合は「pop()」メソッドを使用して、配列の最後の要素を削除することができます。

以下は、変数itemsにpop()メソッドを使用した後、その要素数をconsole.log()を使用して出力した記述例と表示結果です。

■記述例（JavaScript）

let items = ["りんご","みかん","バナナ"];
console.log(items[2]);
items.pop();
console.log(items[2]);

上記では、変数items[2]には「バナナ」が格納されているため、console.log()で出力すると、対象の要素が確認できますが、pop()メソッドによって配列の2番目の要素が削除した後、再度console.log()を使用して出力すると、「undefined」と表示されます。

また、配列内の値は必ずしも同じデータ型である必要はありません。以下は、商品名（文字列型）とその価格（数値型）を1つの配列に格納し、変数itemsに代入した記述例と表示結果となります。

■記述例（JavaScript）

let items = ["りんご",300,"みかん",100,"バナナ",150];
 //文字列型の要素「みかん」を変数nameに格納
let name = items[2];
 //数値型の要素「100」を変数priceに格納
let price = items[3];

console.log(name); //変数nameの値を表示
console.log(price);//変数priceの値を表示

上記の例では、データ型が異なる値を1つの配列に格納している為、商品とその価格が紐づかれているかのように感じますが、上記の方法ではそれぞれの商品と価格の関連性が明示されていないため、データの順序が変わると対応関係が崩れてしまいます。このような場合、より構造化されたデータの扱いに適した「オブジェクト」を使用することが一般的です。

オブジェクト

概要：オブジェクトとは、関連するデータや機能の集合体です。これらは通常、いくつかの変数や関数で構成されています。オブジェクトの定義には「{}（波括弧）」を使用し、波括弧の中ではデータを名前（キー）と値（バリュー）のペアで管理します。キーと値の間は「：（コロン）」で区切られ、このペアを「プロパティ」と言います。複数のプロパティをまとめる際はプロパティとプロパティの間を「,（コンマ）」で区切り、プロパティの値を参照する際は、ドット記法や角括弧記法を使用します。

以下は、商品と価格をオブジェクトで紐付けて、それらを配列に格納した例です。この例では、配列 items の各要素に2つのプロパティが含まれており、先頭のプロパティには「name」というキーで商品名が、次のプロパティには「price」というキーに商品の価格が定義されています。

■記述例（JavaScript）

let items=[
    {name:"りんご",price:300}, //要素1
    {name:"みかん",price:100}, //要素2
    {name:"バナナ",price:150}, //要素3
    ];
//要素を参照する
console.log(items[1].name);
console.log(items[1].price);

上記の例で、console.log() を使って要素2のそれぞれのプロパティを確認すると、各プロパティに紐づけられた値「みかん」と「100」が表示されます。

オブジェクトとオブジェクト型との違いに混乱することがあるかもしれませんが、オブジェクトはキーと値のペアの集合体を指します。一方、オブジェクト型はプリミティブ型以外のデータ型のことを指し、配列やオブジェクトといったデータ構造を保持する変数などがあります。これらの違いをしっかり理解しましょう。

演算子

プログラミングでは、変数に値を代入するだけではなく、変数の値を変更することもあります。例えば、変数に格納された数値の計算を行う場合です。JavaScriptでは、変数の値を直接計算したり、その結果を新しい変数として保存するための様々な演算子が用意されています。

演算子は数値や文字列などのデータを操作するために使用される記号や記述方法です。例えば、「200」という数値が格納されている変数priceに、「50」という値を加える場合、加算演算子「+」が使用されます。なお、演算子の両側の値を「オペランド」といいます。

以下は、JavaScriptで利用される基本的な演算子の記述例です。

■記述例（JavaScript）

//加算演算子(+)
price = 200 + 50; //結果： 250  
//減算演算子(-)
price = 200 - 50; //結果：150
//乗算演算子(*)
price = 200 * 2; //結果：400
//除算演算子(/)
price = 200 / 2; //結果：100
//剰余演算子(%)
price = 200 % 3; //結果：2、これは200を3で割った余りです 

オペランドには数値だけではなく、対象となる変数自体も計算に含めることができます。対象の変数自体への算術演算はよく使用されるので、同じ演算を簡略化して記述することもできます。

以下の記述例では、それぞれ2行ずつ算術演算を記載していますが、どちらも同じ動作を意味します。

■記述例（JavaScript）

//加算
price = price + 50;
price += 50;
 //減算
price = price - 50;
price -= 50;
 //乗算
price = price * 2;
price *= 2;
 //除算
price = price / 2;
price /= 2;
 //剰余
price = price % 3;
price %= 3;

また、加算と減算に限り、2番目のオペランドが「1」のときにのみ以下の記述例が可能です。加算の場合は「インクリメント」、減算の場合は「デクリメント」といいます。

■記述例（JavaScript）

//加算
price = price + 1;
price++; //インクリメント
//減算
price = price - 1;
price--; //デクリメント

一つのステートメントに複数の演算子を組み合わせることもできます。演算が実行される順番は数学と同じで、左から右に計算が行われ、乗算と除算が優先されます。優先順位を変更したい場合は「()括弧」を利用します。（ステートメントとは、コンピュータに対する命令を表す文です。）

以下は、複数の算術演算子を用いた記述例です。

■記述例（JavaScript）

let total1 = 2 * 2 + 10; //結果： 14  =>   2 * 2 が先に計算されます
let total2 = 2 * (2 + 10); // 結果：24 => 2 + 10が先に計算されます

また、加算演算子は数字と文字列をつなぎ合わせることもできます。演算の対象が数字の場合は「加算」となりますが、文字列の場合は「結合」になります。

以下は、加算演算子を使って、結合を行った記述例と表示結果です。

■記述例（JavaScript）

console.log("みかんは" + 100 + "円です。");

型強制と型変換の理解

JavaScriptで使用される様々なデータ型の値は、必要に応じて自動的に型が変換されることがあり、この現象のことを「型強制」と呼びます。例えば、文字列型のオペランドに対して、数値型のオペランドを加算演算子で結合すると、数値は自動的に文字列に変換されて結合します。この型強制は便利な面もありますが、場合によっては不都合も生じます。

■記述例（JavaScript）

let value1 = "100";
console.log(value1 + 200); //文字列の連結

上記では、変数value1が文字列型として定義されているため、数値の「200」も文字列として認識され、「100」と「200」が結合した「100200」という文字列が生成されます。このように型強制によって問題が起きる場合は、文字列型を数値型に変換し、数値同士を加算する必要があります。この意図的に型を変換する処理を「型変換」と呼び、文字列型から数値型への型変換にはNumber()を使用します。

以下は、Number()を使用した型変換の記述例と表示結果です。

■記述例（JavaScript）

let value1 = "100";
let value2 = Number(value1); //文字列を数値に変換
console.log(value2 + 200); //数値の加算

上記では、文字列型と定義された変数value1の「100」をNumber()を用いて数値に変換した後、数値同士の加算として「300」が表示されます。

これまでの二つの記事を通じて、JavaScriptの基本的なデータ構造について深く学びました。データの取り扱い方法はWeb開発において必須のスキルとなります。次回の記事では、これまで学んだ知識を前提として進めるため、今までの内容をしっかり身につけておきましょう。

それでは、今回はここまで〜。