5.1 配列の基本操作
配列とは、複数の値を順番に格納できるデータ構造です。Java で学んだ配列と基本的な考え方は同じですが、JavaScript の配列はより柔軟で、異なる型の値を混在させることもできます。
配列の基本的な書き方
// 配列リテラルで作成
const fruits = ["りんご", "バナナ", "みかん"];
// インデックスで要素にアクセス（0 から始まる）
console.log(fruits[0]); // "りんご"
console.log(fruits[1]); // "バナナ"
// 配列の長さを取得
console.log(fruits.length); // 3
Java の配列と違い、JavaScript の配列は動的にサイズが変更できます。また、length プロパティで配列の要素数を簡単に取得できます。
配列への要素の追加と削除
配列には、要素を追加したり削除したりするための便利なメソッドがあります。
const numbers = [1, 2, 3];
numbers.push(4); // [1, 2, 3, 4]
let number = numbers.pop(); // [1, 2, 3]（4 を取り出し、削除する）
console.log(number); // 4
numbers.unshift(0); // [0, 1, 2, 3]
number = numbers.shift(); // [1, 2, 3]（0 を取り出し、削除する）
console.log(number); // 0
5.1.1 forEach による全件処理
配列の全要素に対して順番に同じ処理を実行したい場合、forEach メソッドを使います。
for 文で書くことも可能ですが、forEach を使うとコードが短くなり、「この配列を全件処理する」という意図が一目で伝わります
forEach の特徴として、戻り値がない点が挙げられます。map が「変換した新しい配列を返す」のに対し、forEach は「処理を実行するだけ」です。そのため、alert や console.log での出力など、結果を別の変数に受け取る必要がない場面に適しています。
書式：forEach
配列.forEach(要素 => {
// 各要素に対して実行したい処理
});
ソースフォルダ：public/ch05
ファイル名：array-foreach.js
➢ array-foreach.html
ch04/higher-order.html をコピーし、ch05 フォルダを新規作成してペーストしてください。
その際に、ファイル名を array-foreach.html に変更します。ファイル内の higher-order.html や higher-order.js の記述も、array-foreach.html や array-foreach.js に修正します。
➢ array-foreach.js
// array-foreach.js
// 商品名のリスト
const products = ["ノートPC", "マウス", "キーボード", "モニター"];
// forEach：全件を順番に処理します（戻り値はありません）
let message = "【商品一覧】\n";
products.forEach(product => {
message += "・" + product + "\n";
});
alert(message);
実行結果
解説
3 行目で、商品名を 4 つ格納した配列を定義しています。
3: const products = ["ノート PC", "マウス", "キーボード", "モニター"];
7 行目で、最終的に alert で表示するメッセージを組み立てるための変数 message を用意しています。
7: let message = "【商品一覧】¥n";
8 行目から 10 行目で、forEach を使って配列の全要素を順番に取り出し、1 件ずつ message に追記しています。コールバック関数の引数 product には、「ノート PC」「マウス」…と順番に 1 件ずつの値が渡されます。
8: products.forEach(product => {
9: Message += "・" + product + "¥n";
10: });
forEach は処理を実行するだけで、戻り値を返しません。そのため、新しい変数に代入することはできません（map との大きな違いです）。
// これは動きません（forEach の戻り値は undefined）
const result = products.forEach(product => product);
「全件を表示する」「全件に対してログを出す」「全件を使って別の処理を呼び出す」といった目的には forEach を使うと覚えておきましょう。
【この章でのプログラム出力について】
この章には、alert() と console.log() の両方が登場します。次の基準で使い分けています。
alert()
実際に手を動かして作成するサンプルプログラム（array-find.js など）の出力に使用
console.log()
説明文中のコード例や複数の値をまとめて確認したい場面に使用。開発者ツールの Console タブに出力されるため、配列やオブジェクトの中身を確認しやすいという利点があります。
「Console タブで確認する」コードが出てきた場合は、ブラウザの F12（または右クリック→検証）で開発者ツールを開き、Console タブを確認してください。