はじめてのJavaScript⑫ 「配列と連想配列」

##1. はじめに
本記事では、JavaScripの
「配列」
について記載する。
##2. 配列
###配列とは？
:::note
複数のデータの集合を扱えるもの。
→1つの変数に対して、複数の値を格納できる。
:::
:::note
要素にインデックス番号(添字)でアクセスできる。
:::
##3. 配列の例題
###(例)変数colorsを定義し、配列の中から要素を取り出す。
####配列の区切り方
※添字は0から始まる。

・カンマ区切りの値をブラケット[...]で囲った形式で表現する。

---

####配列の定義 例の図から、以下のように表記できる。

index.js

let colors = ['Red', 'Green', 'Blue', 'Yellow', 'Black'];

---

####個々の要素の取り出し ```index.js 配列名[インデックス番号]; ``` 例えば、配列からBlackを取り出してコンソールへ出力する場合は

index.js

console.log(colors[4]);

となる。コンソールの出力結果は以下のようになる。

##4. 多次元配列
###多次元配列とは？
:::note
配列の中に配列を入れるデータ構造を指す。
:::
言い換えれば、配列の中に複数の配列を格納できるということ。
##5. 多次元配列の例題
###複数の配列から要素を取り出す
変数scoreとして配列を組んでいく。多次元配列のインデックス番号は下図の通り。

インデックス番号の見分け方は、
最初の[]の数値が行で、最後の[]の数値が列となる。

---

####配列の作成 例題の図を参照しながら配列を組んでいくと以下のようになる。

index.js

let scores = [
  [98, 100, 99],
  [80, 81, 97],
  [70, 96, 85]
];

※カンマ区切りを忘れないこと！！

---

####値の取り出し 多次元配列も配列同様、値の取り出し方はほぼ一緒だが、念の為に取り出し方法を記載しておく。

index.js

配列名[インデックス番号][インデックス番号]

図より、1,2(97点のスコア)を取り出してコンソールへ出力する場合は

index.js

console.log(scores[1][2]);

となる。実際に出力された結果を見ると

となる。
##6. 連想配列
###連想配列とは？
:::note
・各要素を文字列キーでアクセス可能な配列
・Hash、Dictionary、Mapなどと呼ばれることもある。
:::
##7. 連想配列の例題
###ユーザーの情報を取り出す
変数userとして個々の要素を取り出す。
####配列の作成

表の中身を解説すると、

上段:key(キー)

下段:value(値)

となる。
記述方法として、以下のように記述する。

index.js

{キー名:値, キー名:値,・・・}

実際にJavaScriptで表記すると、

index.js

let user = { name: '山田太郎', gender: '男性', birth: '1990/3/4' };

と記述する。

---

####個々の要素の取り出し 取り出し方法は以下のようにする。

index.js

オブジェクト名.プロパティ名
// または
オブジェクト名['プロパティ名']

これをコンソールへ出力し、nameを取り出したい場合は

index.js

console.log(user.name);
// または
console.log(user['name']);

となる。

記述法は違うが出力される文字列は同じなので、同じ文字列が出力される。
##8. おわりに
次項:はじめてのJavaScript⑬ 「配列の演習」に続く。