Day7 前半のゴール
Day7 のテーマは「配列」です。
ここから一気に「データをまとめて扱う」力が手に入ります。
前半では、まず次の3つを目標にします。
Day7 前半で身につけたいこと
配列とは何かをイメージでつかむ
配列の作り方・中身の取り出し方・length の意味を理解する
push で「配列の最後に追加する」基本操作を身につける
配列とは何か
「同じ種類のデータをまとめて入れる箱」
これまでの変数は、1つの値だけを入れる「ふつうの箱」でした。
const score1 = 80;
const score2 = 90;
const score3 = 75;
値が増えるたびに変数を増やすのは、すぐに限界がきます。
そこで登場するのが「配列」です。
配列は、「同じ種類のデータをまとめて入れておける箱」です。
const scores = [80, 90, 75];
この1つの変数 scores の中に、3つの数値が並んで入っています。
配列の書き方
配列は、角かっこ [] を使って書きます。
const fruits = ["apple", "banana", "orange"];
この例では、fruits という配列の中に
“apple”、”banana”、”orange” という3つの文字列が入っています。
配列の要素を取り出す（インデックス）
0 から数える世界にようこそ
配列の中の「何番目か」を表す番号を インデックス と呼びます。
ここで重要なのが、0 から始まる というルールです。
const fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // "apple"
console.log(fruits[1]); // "banana"
console.log(fruits[2]); // "orange"
0 → 1番目
1 → 2番目
2 → 3番目
という対応になります。
「0 から数える」のは最初は違和感がありますが、
プログラミングでは世界共通のルールだと思ってしまった方が楽です。
インデックスを変数で扱う
for 文と組み合わせると、配列を順番に処理できます。
const fruits = ["apple", "banana", "orange"];
for (let i = 0; i < 3; i = i + 1) {
console.log(fruits[i]);
}
i が 0, 1, 2 と変化していくことで、
fruits[0], fruits[1], fruits[2] が順番に表示されます。
length で「配列の長さ」を知る
length プロパティ
配列には、自分の「長さ（要素の数）」を教えてくれる length というプロパティがあります。
const fruits = ["apple", "banana", "orange"];
console.log(fruits.length); // 3
この length を使うと、
「要素が何個あるか」をコードから知ることができます。
length と for を組み合わせる
配列の長さが変わるかもしれないときは、
数字をベタ書きするのではなく length を使うのが基本です。
const fruits = ["apple", "banana", "orange"];
for (let i = 0; i < fruits.length; i = i + 1) {
console.log(fruits[i]);
}
こう書いておけば、
fruits に要素を追加しても、
自動的に最後までループしてくれます。
push で配列の最後に追加する
push の基本
配列に新しい要素を追加したいときに使うのが push です。
「最後に押し込む」イメージです。
const fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]
push は「配列の末尾に要素を追加する」メソッドです。
追加後の length を確認する
const fruits = ["apple", "banana"];
console.log(fruits.length); // 2
fruits.push("orange");
console.log(fruits.length); // 3
console.log(fruits[2]); // "orange"
push すると length が 1 増え、
新しく追加された要素は「最後のインデックス」に入ります。
実践：Day7 前半のサンプルコード
配列を作って、取り出して、追加してみる
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day7 配列 前半</title>
</head>
<body>
<h1>Day7: 配列の基本</h1>
<script>
const fruits = ["apple", "banana", "orange"];
console.log("最初の配列:", fruits);
console.log("0番目:", fruits[0]);
console.log("1番目:", fruits[1]);
console.log("2番目:", fruits[2]);
console.log("length:", fruits.length);
fruits.push("grape");
console.log("push 後の配列:", fruits);
console.log("length:", fruits.length);
console.log("最後の要素:", fruits[fruits.length - 1]);
</script>
</body>
</html>
このコードを実行して、
配列の中身・インデックス・length・push の動きを
コンソールで一つずつ確認してみてください。
セキュリティの視点から見る「配列のインデックス」
範囲外アクセスはバグと脆弱性の入り口
存在しないインデックスを指定するとどうなるかも見ておきましょう。
const fruits = ["apple", "banana", "orange"];
console.log(fruits[10]); // undefined
JavaScript ではエラーにはなりませんが、
undefined が返ってきます。
「あるはずだと思っていたデータが undefined だった」
という状態は、バグや脆弱性の原因になります。
だからこそ、
配列の長さ（length）を意識する
インデックスが 0 以上 length 未満かを意識する
という感覚を、早い段階で身につけておくことが大事です。
Day7 前半のまとめ
配列は「同じ種類のデータをまとめて扱うための箱」。
インデックスは 0 から始まり、length で要素数がわかる。
push で「最後に要素を追加」できる。
後半では、この配列に対して
splice を使った「途中の要素の追加・削除」や、
for と組み合わせた実用的な処理を深掘りしていきます。