- DAY 5：配列
- 前半：配列とは・要素の取得・length
- 中盤・後半へのつながり（push / pop / slice / 配列のコピー）
- DAY 5：配列（中盤）概要
- 前半の復習：配列の基本とlengthのおさらい
- 中盤の本題：pushとpopで配列を“伸ばす・縮める”
- pushとpopを組み合わせて“スタック”のように使う
- 中盤から後半への橋渡し：sliceと配列のコピーの予告
- DAY 5：配列（後半）概要
- 前半・中盤の復習から後半への橋渡し
- slice：配列の一部を“切り出して”新しい配列を作る
- 配列のコピー：元の配列を壊さずに扱うための基本
- 配列コピーとセキュリティ・安全性の視点
- DAY 5（後半）のまとめ
- DAY 5：配列ミニ課題 ― 商品一覧を配列で作る
- 商品一覧を「配列」で表現する
- 商品を追加・削除する（push／pop）
- sliceと配列コピーで“安全に”商品一覧を扱う
- ミニ課題のまとめ ― 商品一覧で配列の感覚を固める
DAY 5：配列
DAY 5では、JavaScriptでとても重要な 配列（Array） を扱います。 配列は、Reactでも「リスト表示」「データの一覧管理」などで頻繁に使われる、基礎かつ実戦的な概念です。
このDAYは理解しやすいように、次の3部構成で進めていきます。
- 前半：配列とは／要素の取得／
length - 中盤：
push／pop - 後半：
slice／配列のコピー
ここでは「前半」を中心にしつつ、中盤・後半につながる形で説明していきます。
前半：配列とは・要素の取得・length
配列とは何か
「同じ種類の値をまとめて管理する箱」
配列は、複数の値をひとまとめにして扱うための“並び” です。 例えば、3人のユーザー名をそれぞれ別々の変数に入れると、次のようになります。
const user1 = '佐藤';
const user2 = '鈴木';
const user3 = '田中';
これでも動きますが、人数が増えると管理が大変になります。 そこで、配列を使って「ひとつの変数にまとめて」管理します。
const users = ['佐藤', '鈴木', '田中'];
usersという1つの変数の中に、3つの名前が「順番付き」で入っています。- この「順番付きのまとまり」が配列です。
配列の基本構文
配列は、角括弧 [] を使って作ります。
const numbers = [1, 2, 3, 4];
const fruits = ['りんご', 'バナナ', 'みかん'];
numbersは数値の配列fruitsは文字列の配列
中身の型は揃っているほうが扱いやすいですが、JavaScriptでは混在させることもできます。
const mixed = [1, 'テキスト', true];
ただし、初心者のうちは「同じ種類の値をまとめる箱」として使う意識を持つと、混乱しにくくなります。
要素の取得：インデックスという“番号”で取り出す
インデックスは0から始まる
配列の中の1つ1つの値を「要素」と呼びます。 要素を取り出すときは、インデックス（index）という番号を使います。
const users = ['佐藤', '鈴木', '田中'];
console.log(users[0]); // 佐藤
console.log(users[1]); // 鈴木
console.log(users[2]); // 田中
ここで重要なのは、インデックスは0から始まるという点です。
- 0番目 → 最初の要素
- 1番目 → 2番目の要素
- 2番目 → 3番目の要素
この「0スタート」は最初は違和感があるかもしれませんが、 JavaScriptだけでなく多くのプログラミング言語で共通のルールなので、早めに慣れておくと後が楽になります。
インデックスで値を書き換える
インデックスを使って、要素を書き換えることもできます。
const users = ['佐藤', '鈴木', '田中'];
users[1] = '高橋';
console.log(users); // ['佐藤', '高橋', '田中']
users[1]に新しい値'高橋'を代入しています。- これで「2番目の要素」が書き換わります。
配列は「読み取り」だけでなく「更新」もできる、柔軟なデータ構造です。
length：配列の“長さ”を知る
lengthプロパティとは
配列には、length というプロパティがあり、 「配列の中にいくつ要素が入っているか」を教えてくれます。
const users = ['佐藤', '鈴木', '田中'];
console.log(users.length); // 3
users.lengthは「要素の数」を表します。- この例では、3人分の名前が入っているので
3になります。
lengthとインデックスの関係
length とインデックスの関係は、次のようになります。
- 要素数：
length - 最後の要素のインデックス：
length - 1
例：
const fruits = ['りんご', 'バナナ', 'みかん'];
console.log(fruits.length); // 3
console.log(fruits[fruits.length - 1]); // みかん
fruits.lengthは3- 最後の要素は
fruits[2]（インデックス2） - それを一般化すると
fruits[fruits.length - 1]で「最後の要素」を取得できます。
このパターンは、配列を扱うときに非常によく使うので、 「最後の要素＝length - 1」という関係を覚えておくと便利です。
中盤・後半へのつながり（push / pop / slice / 配列のコピー）
前半では、
- 配列とは「同じ種類の値をまとめて管理する箱」であること
- 角括弧
[]を使って配列を作ること - インデックス（0から始まる番号）で要素を取得・更新できること
lengthで配列の要素数を取得できること- 最後の要素は
配列[配列.length - 1]で取り出せること
を確認しました。
この土台の上に、中盤では push（末尾に追加）と pop（末尾から削除） を学び、 後半では slice（一部を切り出す）と配列のコピー を扱っていきます。
push／pop→ 「配列の末尾を出し入れする」基本操作slice→ 「配列の一部を取り出して新しい配列を作る」操作- 配列のコピー → Reactで「元の配列を壊さずに新しい配列を作る」ために必須の考え方
DAY 5を通して、配列が「ただの並び」ではなく、 Reactでリスト表示や状態管理をするための重要なデータ構造であることが、 少しずつ立体的に見えてくるはずです。
DAY 5：配列（中盤）概要
DAY 5の中盤では、前半で学んだ 「配列とは」「要素の取得」「length」 を土台にして、 配列を“動かす”ための基本操作である push と pop を中心に、ステップバイステップで解説していきます。
前半・中盤・後半の3回構成のうち、この中盤は次の位置づけになります。
- 前半：配列とは／要素の取得／
length - 中盤：
push／pop（配列を伸ばす・縮める） - 後半：
slice／配列のコピー（元の配列を壊さずに扱う）
ここでは、中盤として 「配列を末尾から出し入れする感覚」 をしっかり身につけていきます。
前半の復習：配列の基本とlengthのおさらい
配列とは・要素の取得
前半で扱った内容を、簡単に振り返ります。
const users = ['佐藤', '鈴木', '田中'];
console.log(users[0]); // 佐藤
console.log(users[1]); // 鈴木
console.log(users[2]); // 田中
- 配列は、角括弧
[]を使って作る「値の並び」です。 - 要素はインデックス（0から始まる番号）で取得します。
lengthで要素数を知る
const users = ['佐藤', '鈴木', '田中'];
console.log(users.length); // 3
console.log(users[users.length - 1]); // 田中（最後の要素）
lengthは「配列の要素数」を表します。- 最後の要素は
配列[配列.length - 1]で取り出せます。
この「インデックス」と「length」の感覚が、中盤の push / pop を理解するうえでの土台になります。
中盤の本題：pushとpopで配列を“伸ばす・縮める”
push：配列の末尾に要素を追加する
基本構文とイメージ
push は、配列の末尾に新しい要素を追加するメソッドです。
const fruits = ['りんご', 'バナナ'];
fruits.push('みかん');
console.log(fruits); // ['りんご', 'バナナ', 'みかん']
console.log(fruits.length); // 3
ここで起きていることをステップで整理すると、
- 最初は
['りんご', 'バナナ']という2つの要素が入った配列。 fruits.push('みかん');によって、末尾に'みかん'が追加される。- 結果として、配列は
['りんご', 'バナナ', 'みかん']になり、lengthは3になる。
push は「配列を後ろに伸ばす」イメージです。
複数の要素を一度に追加する
push は、複数の要素を一度に追加することもできます。
const numbers = [1, 2];
numbers.push(3, 4, 5);
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(numbers.length); // 5
numbers.push(3, 4, 5);で、3つの要素が順番に末尾へ追加されます。- 追加された順番もそのまま保持されます。
pop：配列の末尾から要素を取り出して削除する
基本構文とイメージ
pop は、配列の末尾の要素を取り出しつつ、配列から削除するメソッドです。
const fruits = ['りんご', 'バナナ', 'みかん'];
const last = fruits.pop();
console.log(last); // 'みかん'
console.log(fruits); // ['りんご', 'バナナ']
console.log(fruits.length); // 2
ここで起きていることをステップで整理すると、
- 最初は
['りんご', 'バナナ', 'みかん']という3つの要素が入った配列。 fruits.pop();によって、末尾の'みかん'が取り出される。- 取り出された
'みかん'はlastに代入される。 - 配列は
['りんご', 'バナナ']になり、lengthは2になる。
pop は「配列を後ろから縮める」イメージです。
空の配列でpopした場合
要素がない配列で pop を呼び出すと、戻り値は undefined になります。
const empty = [];
const value = empty.pop();
console.log(value); // undefined
console.log(empty); // []
- 取り出すものがないので、何も削除されず、
undefinedが返されます。 - エラーにはならない点も、挙動として覚えておくと安心です。
pushとpopを組み合わせて“スタック”のように使う
「後から入れたものを先に取り出す」構造
push と pop を組み合わせると、「後から入れたものを先に取り出す」 という動きになります。 これは、プログラミングでよく出てくる「スタック（stack）」という構造と同じです。
const stack = [];
stack.push('A');
stack.push('B');
stack.push('C');
console.log(stack); // ['A', 'B', 'C']
const value1 = stack.pop();
const value2 = stack.pop();
console.log(value1); // 'C'
console.log(value2); // 'B'
console.log(stack); // ['A']
- 追加した順番：
A→B→C - 取り出された順番：
C→B→A（最後に入れたものが最初に出ていく）
このように、push と pop は「配列をスタックとして扱う」ための基本操作でもあります。
Reactそのものではスタック構造を直接意識する場面は少ないですが、 JavaScriptの基礎として知っておくと、アルゴリズムやデータ構造の理解に役立ちます。
中盤から後半への橋渡し：sliceと配列のコピーの予告
中盤では、
pushで配列の末尾に要素を追加する方法popで配列の末尾から要素を取り出して削除する方法lengthと組み合わせて「配列の伸び縮み」を理解することpush/popを組み合わせて「スタック」のような動きを作れること
を確認しました。
このあと続く後半では、よりReactに近いテーマである slice と配列のコピー を扱います。
slice→ 「配列の一部を切り出して、新しい配列を作る」メソッド- 配列のコピー → Reactで「元の配列を壊さずに新しい配列を作る」ために必須の考え方
Reactの状態管理（useState）では、 「元の配列を直接書き換えず、新しい配列を作って差し替える」というスタイルが基本になります。 そのため、DAY 5の後半は、配列とReactがぐっと近づく重要なステップになります。
中盤で身につけた「配列を伸ばす・縮める感覚」を持ったまま、 後半の「配列を安全にコピーして扱う世界」に進んでいくことで、 配列が単なる“並び”ではなく、Reactアプリの土台として見えてくるはずです。
DAY 5：配列（後半）概要
DAY 5の後半では、前半・中盤で学んだ 「配列とは」「要素の取得」「length」「push」「pop」 を土台にして、 より実践的でReactとも深く関わる slice と配列のコピー を中心に解説していきます。
3回構成の位置づけは次のとおりです。
- 前半：配列とは／要素の取得／
length - 中盤：
push／pop（配列を伸ばす・縮める） - 後半：
slice／配列のコピー（元の配列を壊さずに扱う）
ここでは、「配列を安全に扱う」「元のデータを壊さない」という視点を強く意識して説明していきます。
前半・中盤の復習から後半への橋渡し
配列とは・要素の取得・length
const users = ['佐藤', '鈴木', '田中'];
console.log(users[0]); // 佐藤
console.log(users[1]); // 鈴木
console.log(users[2]); // 田中
console.log(users.length); // 3
console.log(users[users.length - 1]); // 田中（最後の要素）
- 配列は角括弧
[]で作る「値の並び」です。 - 要素はインデックス（0から始まる番号）で取得します。
lengthは「要素数」を表し、最後の要素は配列[配列.length - 1]で取り出せます。
push / pop で配列を伸ばす・縮める
const fruits = ['りんご', 'バナナ'];
fruits.push('みかん');
console.log(fruits); // ['りんご', 'バナナ', 'みかん']
const last = fruits.pop();
console.log(last); // 'みかん'
console.log(fruits); // ['りんご', 'バナナ']
pushは末尾に要素を追加するメソッドです。popは末尾から要素を取り出して削除するメソッドです。
この「配列を動かす感覚」が、後半の slice と配列コピーを理解するうえでの前提になります。
slice：配列の一部を“切り出して”新しい配列を作る
sliceの基本構文とイメージ
slice は、配列の一部を切り出して、新しい配列を作るメソッドです。 元の配列は変更されません。
const fruits = ['りんご', 'バナナ', 'みかん', 'ぶどう'];
const someFruits = fruits.slice(1, 3);
console.log(someFruits); // ['バナナ', 'みかん']
console.log(fruits); // ['りんご', 'バナナ', 'みかん', 'ぶどう']
ここで起きていることをステップで整理すると、
fruits.slice(1, 3)を呼び出す。- インデックス1（
'バナナ'）から始まり、インデックス3の「手前」まで切り出す。 - 結果として、
['バナナ', 'みかん']という新しい配列が返される。 - 元の
fruitsは一切変更されない。
sliceの引数の意味（開始位置と終了位置）
slice(開始インデックス, 終了インデックス) のルールは次のとおりです。
- 開始インデックス：ここから切り出しを始める
- 終了インデックス：ここ「まで」ではなく、「手前」まで切り出す
例：
const numbers = [0, 1, 2, 3, 4, 5];
console.log(numbers.slice(2, 5)); // [2, 3, 4]
- 開始インデックス2 → 要素
2からスタート - 終了インデックス5 → 要素
5の手前まで（つまり4まで）
この「終了インデックスは含まれない」というルールは、最初は少し紛らわしいですが、 慣れると「範囲指定」を柔軟に書けるようになります。
終了インデックスを省略する
終了インデックスを省略すると、「開始位置から最後まで」を切り出します。
const fruits = ['りんご', 'バナナ', 'みかん', 'ぶどう'];
const fromBanana = fruits.slice(1);
console.log(fromBanana); // ['バナナ', 'みかん', 'ぶどう']
slice(1)は「インデックス1から最後まで」を意味します。- 元の配列は変更されず、新しい配列が返されます。
配列のコピー：元の配列を壊さずに扱うための基本
なぜコピーが必要なのか（Reactとの関係）
Reactでは、状態（state）を扱うときに 「元の配列を直接書き換えず、新しい配列を作って差し替える」 というスタイルが基本になります。
理由は、
- 直接書き換えると、変更検知が難しくなる
- 「前の状態」と「新しい状態」を比較しづらくなる
- 意図しない副作用（他の変数も同じ配列を参照している場合など）が起きやすくなる
からです。
そのため、「配列をコピーする」という操作は、Reactで安全なコードを書くうえで非常に重要になります。
sliceを使った配列のコピー
slice を引数なしで呼び出すと、配列全体のコピーを作ることができます。
const fruits = ['りんご', 'バナナ', 'みかん'];
const copy = fruits.slice();
console.log(copy); // ['りんご', 'バナナ', 'みかん']
console.log(fruits); // ['りんご', 'バナナ', 'みかん']
ここで重要なのは、
copyはfruitsとは別の配列であることcopyを変更しても、fruitsには影響しないこと
です。
copy.push('ぶどう');
console.log(copy); // ['りんご', 'バナナ', 'みかん', 'ぶどう']
console.log(fruits); // ['りんご', 'バナナ', 'みかん']
copyに'ぶどう'を追加しても、fruitsは元のままです。- これが「元の配列を壊さずに扱う」という状態です。
スプレッド構文によるコピー（予告）
DAY 5では主に slice を使ったコピーを扱いますが、 モダンJavaScriptでは スプレッド構文 ... を使ったコピーもよく使われます。
const fruits = ['りんご', 'バナナ', 'みかん'];
const copy = [...fruits];
この書き方は、Reactのコードで頻出します。 スプレッド構文については、別のDAYで詳しく扱う前提として、 「slice() と同じように配列のコピーができる」というイメージだけ持っておいていただければ十分です。
配列コピーとセキュリティ・安全性の視点
「意図しない共有」を避ける
配列をコピーせずに使い回すと、意図しない共有が起きることがあります。
const original = ['A', 'B', 'C'];
const alias = original; // コピーではなく、同じ配列を参照
alias.push('D');
console.log(original); // ['A', 'B', 'C', 'D']
console.log(alias); // ['A', 'B', 'C', 'D']
aliasはoriginalのコピーではなく、「同じ配列」を指しています。aliasを変更すると、originalも一緒に変わってしまいます。
これは、Reactの状態管理やセキュリティの観点から見ると、 「どこで何が変更されているか分かりにくくなる」原因になります。
コピーしてから変更するという習慣
安全で予測可能なコードを書くためには、
- 元の配列をそのまま使いたいときは、コピーを作る
- コピーを変更し、必要に応じてそれを新しい状態として使う
という習慣を身につけることが大切です。
const original = ['A', 'B', 'C'];
const copy = original.slice();
copy.push('D');
console.log(original); // ['A', 'B', 'C']
console.log(copy); // ['A', 'B', 'C', 'D']
このように、「どの配列が変更されるのか」が明確になることで、 バグや予期せぬ挙動を防ぎやすくなります。
DAY 5（後半）のまとめ
DAY 5の後半では、
sliceで「配列の一部を切り出して新しい配列を作る」方法slice(開始, 終了)のルール（終了インデックスは“手前”まで）を確認したこと- 終了インデックスを省略して「開始位置から最後まで」を切り出せること
slice()を引数なしで呼び出すことで「配列全体のコピー」が作れること- コピーを使うことで「元の配列を壊さずに扱える」こと
- Reactの状態管理では「元の配列を直接書き換えず、新しい配列を作って差し替える」スタイルが重要であること
- コピーせずに参照を共有すると、意図しない変更が起きてバグの原因になること
を確認しました。
前半・中盤・後半を通して、配列は単なる「値の並び」ではなく、 Reactでリスト表示や状態管理を行うための、柔軟で安全なデータ構造であることが見えてきたと思います。
この先のステップでは、配列に対して map / filter / reduce などのメソッドを使い、 Arrow Functionと組み合わせて「宣言的にデータを変換する」スタイルへ進んでいくことで、 モダンJavaScriptとReactのコードがさらに読みやすく・書きやすくなっていきます。
DAY 5：配列ミニ課題 ― 商品一覧を配列で作る
DAY 5のミニ課題では、これまで学んだ 配列とは／要素の取得／length／push／pop／slice／配列のコピー を使って、 「商品一覧」を配列で表現する流れをステップバイステップで確認していきます。
前半・中盤・後半の3回構成として、
- 前半：商品一覧を配列で表現する（配列とは／要素の取得／length）
- 中盤：商品を追加・削除する（push／pop）
- 後半：一部の商品だけを取り出す・コピーする（slice／配列のコピー）
という形で進めていきます。
商品一覧を「配列」で表現する
商品一覧を配列で作る
まず、「商品一覧」を配列で表現してみます。 ここでは、シンプルに商品名だけを並べた例から始めます。
const products = ['Tシャツ', 'ジーンズ', 'スニーカー', 'キャップ'];
productsという変数に、4つの商品名が「順番付き」で入っています。- これが「商品一覧を配列で作る」という基本形です。
要素の取得：インデックスで商品を取り出す
配列の要素は、インデックス（0から始まる番号）で取り出します。
console.log(products[0]); // Tシャツ
console.log(products[1]); // ジーンズ
console.log(products[2]); // スニーカー
console.log(products[3]); // キャップ
- 0番目 → 最初の商品（Tシャツ）
- 1番目 → 2番目の商品（ジーンズ）
- 2番目 → 3番目の商品（スニーカー）
- 3番目 → 4番目の商品（キャップ）
「商品一覧の中から、特定の商品を取り出す」という操作は、 Reactで「特定の商品だけ表示する」といった場面でもよく使われます。
lengthで商品数を確認する
length を使うと、「商品が何個あるか」を知ることができます。
console.log(products.length); // 4
products.lengthは「商品数」を表します。- この例では、4つの商品があるので
4になります。
最後の商品を取り出したいときは、length - 1 を使います。
const lastProduct = products[products.length - 1];
console.log(lastProduct); // キャップ
- 最後の要素のインデックスは
length - 1です。 - 「商品一覧の最後の商品」を取り出すときに、このパターンをよく使います。
商品を追加・削除する（push／pop）
pushで商品を追加する
新しい商品を一覧に追加したいときは、push を使います。
products.push('パーカー');
console.log(products); // ['Tシャツ', 'ジーンズ', 'スニーカー', 'キャップ', 'パーカー']
console.log(products.length); // 5
products.push('パーカー');で、末尾に「パーカー」が追加されます。- 商品数も
4から5に増えています。
複数の商品を一度に追加することもできます。
products.push('ソックス', 'バッグ');
console.log(products);
// ['Tシャツ', 'ジーンズ', 'スニーカー', 'キャップ', 'パーカー', 'ソックス', 'バッグ']
popで商品を削除する（末尾から）
在庫切れなどで「最後に追加した商品を一覧から外したい」ときは、pop を使います。
const removedProduct = products.pop();
console.log(removedProduct); // 'バッグ'
console.log(products);
// ['Tシャツ', 'ジーンズ', 'スニーカー', 'キャップ', 'パーカー', 'ソックス']
popは「末尾の要素を取り出して削除する」メソッドです。- 戻り値として「削除された商品名」が返ってきます。
このように、push と pop を使うことで、 「商品一覧を増やす・減らす」という基本操作を表現できます。
sliceと配列コピーで“安全に”商品一覧を扱う
sliceで一部の商品だけを取り出す
「セール対象の商品だけを取り出したい」といった場面では、slice が役立ちます。
const saleProducts = products.slice(1, 4);
console.log(saleProducts);
// ['ジーンズ', 'スニーカー', 'キャップ']
console.log(products);
// ['Tシャツ', 'ジーンズ', 'スニーカー', 'キャップ', 'パーカー', 'ソックス']
slice(1, 4)は、インデックス1から3まで（4の手前まで）を切り出します。- 元の
productsは変更されず、新しい配列saleProductsが作られます。
終了インデックスを省略すると、「指定した位置から最後まで」を切り出せます。
const fromSecond = products.slice(1);
console.log(fromSecond);
// ['ジーンズ', 'スニーカー', 'キャップ', 'パーカー', 'ソックス']
配列のコピー：元の商品一覧を壊さない
Reactでは、「元の配列を直接書き換えず、新しい配列を作って差し替える」ことが重要です。 そのために、配列のコピーを作る操作がよく使われます。
slice() を引数なしで呼び出すと、配列全体のコピーが作れます。
const productsCopy = products.slice();
console.log(productsCopy);
// ['Tシャツ', 'ジーンズ', 'スニーカー', 'キャップ', 'パーカー', 'ソックス']
コピーを変更しても、元の配列には影響しません。
productsCopy.push('マフラー');
console.log(productsCopy);
// ['Tシャツ', 'ジーンズ', 'スニーカー', 'キャップ', 'パーカー', 'ソックス', 'マフラー']
console.log(products);
// ['Tシャツ', 'ジーンズ', 'スニーカー', 'キャップ', 'パーカー', 'ソックス']
productsCopyにだけ「マフラー」が追加されます。- 元の
productsはそのままです。
このように、「コピーを作ってから変更する」という習慣は、 Reactの状態管理や安全なコードを書くうえで非常に重要です。
ミニ課題のまとめ ― 商品一覧で配列の感覚を固める
このミニ課題では、
- 商品一覧を配列で表現する（
const products = [...]） - インデックスで特定の商品を取り出す（
products[0]やproducts[products.length - 1]） lengthで商品数を確認するpushで商品を追加し、popで末尾の商品を削除するsliceで一部の商品だけを切り出して新しい一覧を作るslice()で配列全体のコピーを作り、元の一覧を壊さずに扱う
という流れを通して、配列の基本操作を「商品一覧」という具体的な題材で確認しました。
この感覚を持ったまま、次のステップで map / filter などのメソッドとArrow Functionを組み合わせていくと、 Reactで「商品一覧を表示するコンポーネント」や「条件付きで商品を絞り込むUI」を、 自然な形で書けるようになっていきます。