- Day 5：配列で「たくさんのデータ」をまとめて扱う
- 配列とは：値を順番に並べて入れておく「リスト」
- 要素の取得：インデックスで「何番目か」を指定する
- length：配列の「長さ（要素数）」を知る
- push：配列の末尾に要素を追加する
- pop：配列の末尾から要素を取り出して削除する
- slice：配列の一部を「切り出して新しい配列」を作る
- 配列のコピー：元の配列を壊さずに「複製」を作る
- ミニテンプレート：配列操作をひとまとめに試すコード
- Day 5のまとめ
- Day 5：配列で商品一覧をつくってみる
- 配列とは：商品を並べて管理する「一覧表」
- 要素の取得：何番目の商品かをインデックスで指定する
- length：商品が何個あるかを知る
- push：商品一覧の末尾に商品を追加する
- pop：商品一覧の末尾から商品を取り出して削除する
- slice：商品一覧の一部だけを切り出す
- 配列のコピー：商品一覧を複製して安全に操作する
- ミニ課題テンプレート：商品一覧を配列で作って操作してみる
- Day 5のまとめ
Day 5：配列で「たくさんのデータ」をまとめて扱う
Day 5では、JavaScriptでとてもよく使う 配列（array） を扱います。 Reactでも「一覧表示」「リストレンダリング」などで毎回のように登場するので、ここでしっかりイメージをつかんでおくと、この先がかなり楽になります。
学習項目は次のとおりです。
- 配列とは
- 要素の取得
lengthpushpopslice- 配列のコピー
ひとつずつ、初心者向けにかみ砕いて見ていきます。
配列とは：値を順番に並べて入れておく「リスト」
配列のイメージ
配列（array）は、値を順番に並べて入れておくための「リスト」のようなものです。
- 買い物リスト
- ユーザー一覧
- タスクの一覧
- 商品の価格リスト
こういった「複数のデータ」をひとまとめにして扱いたいときに、配列が活躍します。
// フルーツの名前を並べた配列
const fruits = ["apple", "banana", "cherry"];
// 数字の配列
const numbers = [10, 20, 30, 40];
// いろいろ混ざった配列（型はバラバラでもOKです）
const mixed = [1, "two", true, null];
console.log(fruits);
console.log(numbers);
console.log(mixed);
[]（角かっこ）で囲んで、値をカンマで区切る- 1つの変数に「複数の値」をまとめて入れられる
Reactで「配列を map してコンポーネントを並べる」というパターンがよく出てきますが、その前提になるのがこの配列です。
要素の取得：インデックスで「何番目か」を指定する
インデックスは0から始まる
配列の中の1つ1つの値を「要素」と呼びます。 要素には「インデックス（index）」という番号が付いていて、0から始まるのがポイントです。
const colors = ["red", "green", "blue"];
// 0番目の要素（最初の要素）
console.log(colors[0]); // red
// 1番目の要素
console.log(colors[1]); // green
// 2番目の要素
console.log(colors[2]); // blue
- 最初の要素：インデックス
0 - 2番目の要素：インデックス
1 - 3番目の要素：インデックス
2
「0から始まる」というルールは、最初は少し違和感があるかもしれませんが、 JavaScriptだけでなく多くの言語で共通のルールなので、早めに慣れてしまうのがおすすめです。
範囲外を指定するとどうなるか
存在しないインデックスを指定すると、エラーではなく undefined が返ってきます。
const colors = ["red", "green", "blue"];
console.log(colors[99]); // undefined（99番目の要素は存在しない）
「なぜか undefined が出ている…」というバグの定番パターンなので、 インデックスが正しい範囲かどうかを意識しておくと安心です。
length：配列の「長さ（要素数）」を知る
lengthプロパティの基本
配列の「要素がいくつ入っているか」を知りたいときは、length プロパティを使います。
const fruits = ["apple", "banana", "cherry"];
console.log(fruits.length); // 3
- 要素数が3つなので、
lengthは3 - 「最後の要素のインデックス」は
length - 1になる
const fruits = ["apple", "banana", "cherry"];
// 最後の要素を取り出すときの定番パターン
const lastFruit = fruits[fruits.length - 1];
console.log(lastFruit); // cherry
Reactで「配列の長さによって表示を変える」といった場面でも、length はよく使われます。
push：配列の末尾に要素を追加する
pushの基本
push は、配列の「末尾（いちばん後ろ）」に要素を追加するメソッドです。
const fruits = ["apple", "banana"];
// 末尾に "cherry" を追加します
fruits.push("cherry");
console.log(fruits); // ["apple", "banana", "cherry"]
console.log(fruits.length); // 3
fruits.push("cherry")で、配列の最後に新しい要素が追加されるlengthも自動的に増える
pushは「配列を直接書き換える」
push は、元の配列そのものを変更する（破壊的な操作）という点も押さえておきたいポイントです。
const numbers = [1, 2, 3];
numbers.push(4); // numbers自体が [1, 2, 3, 4] に変わります
console.log(numbers); // [1, 2, 3, 4]
Reactでは「状態（state）を直接書き換えない」というルールがあるので、 push のような「元の配列を変えるメソッド」を使うときは、少し注意が必要になります。 （この話は、もう少し先のReactパートで詳しく扱います）
pop：配列の末尾から要素を取り出して削除する
popの基本
pop は、配列の「末尾の要素」を取り出しつつ、配列から削除するメソッドです。
const fruits = ["apple", "banana", "cherry"];
// 末尾の要素を取り出します
const last = fruits.pop();
console.log(last); // "cherry"
console.log(fruits); // ["apple", "banana"]
popの戻り値：削除された要素popを呼ぶと、配列の長さが1つ減る
pushとpopで「スタック」のような動き
push と pop を組み合わせると、「後から入れたものを先に取り出す」スタック的な動きになります。
const stack = [];
// 要素を追加（push）
stack.push("a");
stack.push("b");
stack.push("c");
console.log(stack); // ["a", "b", "c"]
// 要素を取り出し（pop）
const last1 = stack.pop(); // "c"
const last2 = stack.pop(); // "b"
console.log(last1, last2); // c b
console.log(stack); // ["a"]
こうした「末尾に追加・末尾から削除」という動きは、 簡単な履歴機能やUndo機能のイメージにもつながっていきます。
slice：配列の一部を「切り出して新しい配列」を作る
sliceの基本イメージ
slice は、配列の一部を「切り出して、新しい配列」を作るメソッドです。 元の配列は変更されず、コピーされた新しい配列が返ってきます。
const fruits = ["apple", "banana", "cherry", "orange"];
// インデックス1から3の手前までを切り出します
const sliced = fruits.slice(1, 3);
console.log(sliced); // ["banana", "cherry"]
console.log(fruits); // ["apple", "banana", "cherry", "orange"]（元の配列はそのまま）
- 第1引数：開始位置（インデックス）
- 第2引数：終了位置（インデックス）※「その手前まで」が対象
- 上の例では、インデックス1（banana）からインデックス3の手前（cherryまで）
第2引数を省略した場合
第2引数を省略すると、「開始位置から最後まで」が切り出されます。
const fruits = ["apple", "banana", "cherry", "orange"];
const sliced = fruits.slice(2); // インデックス2から最後まで
console.log(sliced); // ["cherry", "orange"]
slice は「元の配列を壊さずに一部だけ取り出したい」ときに、とても便利です。 Reactで「一部の要素だけを表示する」といった場面でもよく使われます。
配列のコピー：元の配列を壊さずに「複製」を作る
sliceで配列全体をコピーする
slice に引数を渡さずに呼ぶと、配列全体のコピーを作ることができます。
const original = ["apple", "banana", "cherry"];
// 配列全体をコピーします
const copied = original.slice();
console.log(copied); // ["apple", "banana", "cherry"]
console.log(original); // ["apple", "banana", "cherry"]
ここでのポイントは、original と copied が「別の配列」になっていることです。
copied.push("orange");
console.log(copied); // ["apple", "banana", "cherry", "orange"]
console.log(original); // ["apple", "banana", "cherry"]（元の配列は変わらない）
copiedを変更しても、originalには影響しない- 「元の配列を壊したくないとき」は、まずコピーを作ってから操作する
スプレッド構文でコピーする（参考）
少し先取りになりますが、モダンJavaScriptでは スプレッド構文 を使ってコピーすることも多いです。
const original = ["apple", "banana", "cherry"];
// スプレッド構文でコピー
const copied = [...original];
copied.push("orange");
console.log(copied); // ["apple", "banana", "cherry", "orange"]
console.log(original); // ["apple", "banana", "cherry"]
Reactの「stateを更新するとき」に、このスプレッド構文がよく登場します。 Day 5の段階では「配列はコピーしてからいじることがある」というイメージだけ持っておけば十分です。
ミニテンプレート：配列操作をひとまとめに試すコード
最後に、Day 5の内容をまとめて試せる小さなテンプレートコードを載せておきます。
// --- Day 5 配列ミニテンプレート ---
// 1. 配列を作る
const fruits = ["apple", "banana", "cherry"];
console.log("元の配列:", fruits);
console.log("要素数:", fruits.length);
// 2. 要素の取得
console.log("最初の要素:", fruits[0]); // apple
console.log("最後の要素:", fruits[fruits.length - 1]); // cherry
// 3. pushで末尾に追加
fruits.push("orange");
console.log("push後:", fruits); // ["apple", "banana", "cherry", "orange"]
// 4. popで末尾から削除
const last = fruits.pop();
console.log("popで取り出した要素:", last); // "orange"
console.log("pop後の配列:", fruits); // ["apple", "banana", "cherry"]
// 5. sliceで一部を切り出す
const sliced = fruits.slice(1, 3); // インデックス1〜2
console.log("sliceで切り出した配列:", sliced); // ["banana", "cherry"]
console.log("元の配列はそのまま:", fruits); // ["apple", "banana", "cherry"]
// 6. 配列のコピー
const copied = fruits.slice(); // 全体コピー
copied.push("grape");
console.log("コピー後の配列:", copied); // ["apple", "banana", "cherry", "grape"]
console.log("元の配列は変わらない:", fruits); // ["apple", "banana", "cherry"]
このテンプレートを少しずつ書き換えながら、
- 自分の好きなデータ（映画タイトル、ゲーム名、Reactコンポーネント名など）を配列に入れてみる
push/pop/slice/ コピーを試してみる
といった練習をしていくと、配列の感覚が自然と身についていきます。
Day 5のまとめ
- 配列とは 値を順番に並べて入れておく「リスト」のようなもの。複数のデータをひとまとめに扱えます。
- 要素の取得 インデックス（0から始まる番号）を使って、
array[0]のように要素を取り出します。 - length 配列の要素数を表すプロパティで、最後の要素は
array.length - 1でアクセスできます。 - push / pop
pushは末尾に要素を追加、popは末尾から要素を取り出して削除します。どちらも元の配列を直接変更します。 - slice 配列の一部を「切り出して新しい配列」を作るメソッドで、元の配列は変更されません。
- 配列のコピー
slice()やスプレッド構文[...]を使って、元の配列を壊さずにコピーを作ることができます。
Day 5：配列で商品一覧をつくってみる
Day 5のミニ課題は、「商品一覧を配列で作る」ことです。 Reactで「商品リストを画面に並べる」といった場面に直結する内容なので、ここで配列の感覚をしっかりつかんでおくと後がかなり楽になります。
配列とは：商品を並べて管理する「一覧表」
商品一覧を作るとき、1つ1つをバラバラの変数で管理するのは大変です。
// こういう管理はすぐに限界がきます
const product1 = "Tシャツ";
const product2 = "パーカー";
const product3 = "キャップ";
そこで登場するのが 配列（array） です。 配列を使うと、商品名を「ひとつの変数の中に、順番に並べて」管理できます。
// 商品一覧を配列で作ります
const products = ["Tシャツ", "パーカー", "キャップ"];
console.log(products); // ["Tシャツ", "パーカー", "キャップ"]
[]で囲んで、商品名をカンマで区切って並べますproductsという1つの変数で「商品一覧」を表現できます
Reactでは、この products を map して <li> や <Card> コンポーネントに変換していく、という流れがよく使われます。
要素の取得：何番目の商品かをインデックスで指定する
配列の中の1つ1つの値を「要素」と呼びます。 要素には「インデックス（index）」という番号が付いていて、0から始まるのがポイントです。
const products = ["Tシャツ", "パーカー", "キャップ"];
// 0番目の要素（最初の商品）
console.log(products[0]); // Tシャツ
// 1番目の要素
console.log(products[1]); // パーカー
// 2番目の要素
console.log(products[2]); // キャップ
- 最初の商品：インデックス
0 - 2番目の商品：インデックス
1 - 3番目の商品：インデックス
2
「0から始まる」というルールは、最初は少し違和感があるかもしれませんが、 配列を扱ううえでは避けて通れないので、商品一覧で何度か触って慣れてしまいましょう。
length：商品が何個あるかを知る
商品一覧を扱うとき、「今、商品はいくつ登録されているか？」を知りたい場面はよくあります。 そのときに使うのが、配列の length プロパティです。
const products = ["Tシャツ", "パーカー", "キャップ"];
console.log(products.length); // 3
- 要素数が3つなので、
lengthは3 - 「最後の商品のインデックス」は
length - 1になります
const lastProduct = products[products.length - 1];
console.log(lastProduct); // キャップ
「商品数を表示する」「商品が0件のときは別メッセージを出す」といった処理でも、length がよく使われます。
push：商品一覧の末尾に商品を追加する
商品一覧に「新しい商品」を追加したいときに使うのが push です。 push は、配列の末尾（いちばん後ろ）に要素を追加するメソッドです。
const products = ["Tシャツ", "パーカー", "キャップ"];
console.log("追加前:", products);
// 新しい商品「スニーカー」を追加します
products.push("スニーカー");
console.log("追加後:", products); // ["Tシャツ", "パーカー", "キャップ", "スニーカー"]
console.log("商品数:", products.length); // 4
products.push("スニーカー")で、末尾に新商品が追加されますlengthも自動的に増えます
ここで大事なのは、push は元の配列そのものを変更するという点です。
const items = ["A", "B"];
items.push("C"); // items自体が ["A", "B", "C"] に変わります
console.log(items); // ["A", "B", "C"]
Reactのstateでは「直接書き換えない」というルールがあるので、 push を使うときは「今は練習だからOK」「本番ではコピーしてから使う」といった意識を持っておくとよいです。
pop：商品一覧の末尾から商品を取り出して削除する
「一番新しい商品を取り消したい」「最後に追加したものを戻したい」といったときに使えるのが pop です。 pop は、配列の末尾の要素を取り出しつつ、配列から削除するメソッドです。
const products = ["Tシャツ", "パーカー", "キャップ", "スニーカー"];
console.log("削除前:", products);
// 末尾の商品を取り出します
const removedProduct = products.pop();
console.log("取り出した商品:", removedProduct); // スニーカー
console.log("削除後:", products); // ["Tシャツ", "パーカー", "キャップ"]
console.log("商品数:", products.length); // 3
popの戻り値：削除された商品popを呼ぶと、配列の長さが1つ減る
「追加したけどやっぱりやめたい」というときに、push と pop をセットで覚えておくと便利です。
slice：商品一覧の一部だけを切り出す
「商品一覧のうち、2〜3番目だけを表示したい」「先頭の2件だけをピックアップしたい」といったときに使えるのが slice です。 slice は、配列の一部を「切り出して、新しい配列」を作るメソッドで、元の配列は変更されません。
const products = ["Tシャツ", "パーカー", "キャップ", "スニーカー"];
// インデックス1から3の手前までを切り出します
const picked = products.slice(1, 3);
console.log("切り出した商品一覧:", picked); // ["パーカー", "キャップ"]
console.log("元の商品一覧:", products); // ["Tシャツ", "パーカー", "キャップ", "スニーカー"]
- 第1引数：開始位置（インデックス）
- 第2引数：終了位置（インデックス）※「その手前まで」が対象
第2引数を省略すると、「開始位置から最後まで」が切り出されます。
const lastTwo = products.slice(2); // インデックス2から最後まで
console.log(lastTwo); // ["キャップ", "スニーカー"]
Reactで「ページング」「おすすめ商品だけ表示」といった機能を作るときにも、slice がよく使われます。
配列のコピー：商品一覧を複製して安全に操作する
「元の商品一覧はそのまま残しておきたいけれど、別の一覧を作って操作したい」という場面では、配列のコピーが必要になります。
sliceで配列全体をコピーする
slice に引数を渡さずに呼ぶと、配列全体のコピーを作ることができます。
const originalProducts = ["Tシャツ", "パーカー", "キャップ"];
// 商品一覧を丸ごとコピーします
const copiedProducts = originalProducts.slice();
console.log("元の一覧:", originalProducts); // ["Tシャツ", "パーカー", "キャップ"]
console.log("コピー:", copiedProducts); // ["Tシャツ", "パーカー", "キャップ"]
コピー側だけを変更してみます。
copiedProducts.push("スニーカー");
console.log("コピーを変更:", copiedProducts); // ["Tシャツ", "パーカー", "キャップ", "スニーカー"]
console.log("元の一覧はそのまま:", originalProducts); // ["Tシャツ", "パーカー", "キャップ"]
copiedProductsを変更しても、originalProductsには影響しません- 「元のデータを壊したくないとき」は、まずコピーを作ってから操作する
この「コピーしてから操作する」という考え方は、Reactのstate更新でも非常に重要になります。
ミニ課題テンプレート：商品一覧を配列で作って操作してみる
ここまでの内容をまとめて、「商品一覧を配列で作る」ミニ課題用のテンプレートコードを用意しました。
// --- Day 5 ミニ課題：商品一覧を配列で作る ---
// 1. 商品一覧を配列で作る
const products = ["Tシャツ", "パーカー", "キャップ"];
console.log("初期の商品一覧:", products);
console.log("商品数:", products.length);
// 2. 要素の取得（特定の商品を取り出す）
const firstProduct = products[0]; // 最初の商品
const lastProduct = products[products.length - 1]; // 最後の商品
console.log("最初の商品:", firstProduct); // Tシャツ
console.log("最後の商品:", lastProduct); // キャップ
// 3. pushで新商品を追加する
products.push("スニーカー");
console.log("新商品追加後:", products); // ["Tシャツ", "パーカー", "キャップ", "スニーカー"]
console.log("商品数:", products.length); // 4
// 4. popで最後の商品を取り消す
const removedProduct = products.pop();
console.log("取り消した商品:", removedProduct); // スニーカー
console.log("取り消し後の商品一覧:", products); // ["Tシャツ", "パーカー", "キャップ"]
// 5. sliceで一部の商品だけをピックアップする
const featuredProducts = products.slice(0, 2); // 先頭2件をピックアップ
console.log("おすすめ商品一覧:", featuredProducts); // ["Tシャツ", "パーカー"]
console.log("元の商品一覧はそのまま:", products); // ["Tシャツ", "パーカー", "キャップ"]
// 6. 配列のコピーを作って別の一覧として扱う
const copiedProducts = products.slice(); // 全体コピー
copiedProducts.push("スニーカー");
console.log("コピー側の商品一覧:", copiedProducts); // ["Tシャツ", "パーカー", "キャップ", "スニーカー"]
console.log("元の一覧は変わらない:", products); // ["Tシャツ", "パーカー", "キャップ"]
このテンプレートをベースにして、
- 商品名を自分の好きなものに変えてみる
- 商品数を増やしたり減らしたりしてみる
sliceの開始位置・終了位置を変えて、どんな結果になるか試してみる
といった小さな実験を繰り返していくと、配列の扱い方が自然と身についていきます。
Day 5のまとめ
- 配列とは 商品一覧のような「複数のデータ」をひとまとめに管理するための仕組みです。
- 要素の取得 インデックス（0から始まる番号）を使って、
array[0]のように特定の商品を取り出します。 - length 商品数を表すプロパティで、最後の商品は
array.length - 1でアクセスできます。 - push / pop
pushは末尾に商品を追加、popは末尾から商品を取り出して削除します。どちらも元の配列を直接変更します。 - slice 商品一覧の一部だけを切り出して、新しい配列として扱うことができます。元の配列は変更されません。
- 配列のコピー
slice()を使って商品一覧を丸ごとコピーし、コピー側だけを安全に操作できます。
この「商品一覧を配列で作る」という感覚は、Reactで「リスト表示」「カード一覧」「テーブル表示」などを作るときの土台になります。