JavaScript ・ 配列・オブジェクト
Array
複数の値を順番に並べる（配列）
複数の値を1つにまとめ、順番（インデックス）で管理するデータの形です。[ ] の中にカンマ区切りで値を書きます。
01
サンプルコード
JS
1const menu = ['ブレンド', 'カフェラテ', '紅茶'];
2
3console.log(menu[0]);
4console.log(menu.length);
5
6menu.push('ココア');
7console.log(menu);
02
実行結果
コンソール
- console.log() の出力がここに表示されます
03
解説
配列は [ ] の中に値をカンマで区切って並べたものです。数値・文字列・オブジェクトなど、どんな値でも入れられます。
要素は 配列[番号] で取り出します。番号（インデックス）は0から始まるため、最初の要素は menu[0] です。要素の数は length で分かります。
push() で末尾に追加、pop() で末尾を取り出すなど、配列には便利なメソッドがたくさん用意されています。
04
応用例・注意点
よく使うメソッド・プロパティ
| 名前 | 説明 |
|---|---|
length | 要素の数 |
push(値) | 末尾に追加 |
pop() | 末尾を取り出して削除 |
includes(値) | 値が含まれているか（true / false） |
indexOf(値) | 値の番号（ないときは -1） |
join(区切り) | 要素をつないで文字列にする |
配列からリストを作る
配列の要素を画面のリストに表示します。
HTML
1<ul id="list"></ul>
JS
1const menu = ['ブレンド', 'カフェラテ', '紅茶'];
2const list = document.querySelector('#list');
3for (const name of menu) {
4 const li = document.createElement('li');
5 li.textContent = name;
6 list.append(li);
7}
注意点
- 01存在しない番号を指定すると undefined になります（エラーにはなりません）。
- 02const で宣言した配列でも、push などで中身は変更できます。