16.
連想配列
連想配列
連想配列とは
連想配列は、キー（key）と値（value）で構成された配列で、key-value データともいいます。
key: value
連想配列の記法
連想配列を定義するには、キーと値を { } で囲み、キーと値を :（コロン）で区切ります。
{ key: value }
複数の値がある場合、, (カンマ) で区切ってデータを複数設定できます。
{
key1: value1,
key2: value2,
key3: value3,
...
}
連想配列の定義
連想配列を定義してみましょう。
| name | furigana |
|---|---|
| 東京 | とうきょう |
js/array_assoc.js
const station = {
name: '東京',
furigana: 'とうきょう'
}
DevTools で確認してみましょう。
コンソール
{name: '東京', furigana: 'とうきょう'}
連想配列の値取得
. でアクセス
連想配列のデータ取得は、.（ピリオド）でキーを指定します。
station.name
character データをキーで取得する
連想配列 station のキーをそれぞれ指定して、コンソール表示します。
js/array_assoc.js
console.log(station.name)
console.log(station.furigana)
コンソール
東京
とうきょう
連想配列のデータ更新
連想配列のキーを指定して値を代入します。 キー「name」「furigana」にデータを代入して更新します。
js/array_assoc.js
station.name = '新橋'
station.furigana = "しんばし"
console.log(station)
データが更新されました。
コンソール
{name: '新橋', furigana: 'しんばし'}
連想配列の配列
| name | furigana |
|---|---|
| 東京 | とうきょう |
| 有楽町 | ゆうらくちょう |
| 新橋 | しんばし |
この表を連想配列で表現すると以下のようになります。
const stations = [
{ name: '東京', furigana: 'とうきょう' },
{ name: '有楽町', furigana: 'ゆうらくちょう' },
{ name: '新橋', furigana: 'しんばし' },
];
console.log(stations);
演習
問題1
以下のHTMLで、連想配列の値を表示してみましょう。
array_assoc.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>連想配列</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 w-[500px]">
<div class="bg-white shadow-md rounded-lg p-4 text-center">
<div id="current-station" class="text-3xl font-extrabold text-black mb-2">
</div>
<div id="current-furigana" class="text-sm text-black mb-6">
</div>
<div class="flex justify-center space-x-24 bg-green-500">
<div id="prev-station" class="font-extrabold text-white px-4 py-2">
</div>
<div id="next-station" class="font-extrabold text-white px-4 py-2">
</div>
</div>
</div>
<script src="js/array_assoc.js"></script>
</body>
</html>
js/array_assoc.js
const stations = [
{ name: '東京', furigana: 'とうきょう' },
{ name: '有楽町', furigana: 'ゆうらくちょう' },
{ name: '新橋', furigana: 'しんばし' },
];