【6日でできるJavaScript入門】配列の利用
プログラムで複数のデータをまとめて扱うときに便利なのが配列です。配列を使うと「1つの名前」で「複数の値」を格納・操作でき、繰り返し処理やリスト管理が一気に簡単になります。
ここでは、配列の基本概念から宣言・初期化、要素の読み込みや長さの取得、空要素を含む場合の挙動までをステップで解説します。
１．配列とは？
配列は、複数のデータを順序付きで格納できる「箱の集合」です。添え字（インデックス）で各要素にアクセスします。
| 用語 | 説明 |
|---|---|
| 配列 | 一つの名前で複数の値をまとめて格納できる。 |
| 添え字 | 要素を指定する番号。0から始まるインデックス |
ファイル名： lesson07-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>📚 配列とはサンプル</title>
</head>
<body>
<h1>🍎 配列の基本</h1>
<script>
const fruits = ['りんご', 'バナナ', 'みかん'];
console.log(fruits); // ["りんご","バナナ","みかん"]
</script>
</body>
</html>デバックコンソールの出力
(3) ['りんご', 'バナナ', 'みかん']２．配列の宣言と初期化
配列は let または const と [] を使って宣言します。リテラルと逐次代入の2通りがあります。
| 方法 | 説明 |
|---|---|
| リテラル | let arr = [値1, 値2, ...]; |
| 逐次代入 | let arr = []; arr[0]=値1; ... |
2.1. 逐次代入による初期化
ファイル名： lesson07-2.html
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>✏️ 逐次代入サンプル</title></head>
<body>
<h1>📈 逐次代入方式</h1>
<script>
let price = [];
price[0] = 480;
price[1] = 980;
price[2] = 1280;
console.log(price); // [480,980,1280]
</script>
</body>
</html>デバックコンソールの出力
(3) [480, 980, 1280]2.2. リテラルによる初期化
ファイル名： lesson07-３.html
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>🔥 リテラルサンプル</title></head>
<body>
<h1>🛠️ リテラル方式</h1>
<script>
const price = [480, 980, 1280];
console.log(price); // [480,980,1280]
</script>
</body>
</html>デバックコンソールの出力
(3) [480, 980, 1280]３．配列の読み込み
要素を利用するには、配列名[添え字] を使います。省略時は全要素が表示されます。
3.1. 個別要素の取得
ファイル名： lesson07-4.html
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>🔍 要素取得サンプル</title></head>
<body>
<h1>💰 価格取得</h1>
<script>
const price = [480, 980, 1280];
alert('価格は' + price[1] + '円です'); // 「価格は980円です」
</script>
</body>
</html>ブラウザの出力例
3.2. 全要素の表示
ファイル名： lesson07-5.html
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>📋 全要素表示サンプル</title></head>
<body>
<h1>📑 全要素チェック</h1>
<script>
const price = [480, 980, 1280];
alert(price); // 「480,980,1280」
console.log(price); // 配列オブジェクトを詳しく表示
</script>
</body>
</html>ブラウザの出力例
デバックコンソールの出力
(3) [480, 980, 1280]４．配列の長さ
配列に格納された要素数は、配列名.length で取得できます。最大添え字は length - 1 です。
ファイル名： lesson07-6.html
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>🔢 長さ取得サンプル</title></head>
<body>
<h1>📏 配列の長さ</h1>
<script>
const member = ['佐藤', '田中', '鈴木', '木村', '伊藤'];
alert('メンバーは全部で' + member.length + '名です'); // 「メンバーは全部で5名です」
</script>
</body>
</html>ブラウザの出力例
５．空要素と length の値
配列の途中で添え字を飛ばすと、その要素は undefined となりますが、length は最後の添え字+1を返します。
let member = [];
member[0] = '佐藤';
member[1] = '田中';
member[4] = '伊藤';
console.log(member.length); // 5
console.log(member); // ['佐藤','田中',undefined,undefined,'伊藤']まとめ
配列の宣言・初期化、要素へのアクセス、length プロパティ、未定義要素の挙動を学習しました。配列を活用して、複数データの管理や繰り返し処理をより効率的に行いましょう。