JavaScript | 配列に要素を追加する（push, unshift）

JavaScript JavaScript
2020.07.25
スポンサーリンク

JavaScript の配列と「追加」をゼロから理解する

「配列」は、同じ仲間のデータを順番に並べて扱うための箱です。初心者がつまずきやすいのは「位置（インデックス）」の考え方と、「どこに追加されるのか」。ここを丁寧に押さえれば、配列は一気に扱いやすくなります。

配列の基本とインデックス

  • 配列とは: 複数の値をひとまとめにできるデータの形。
  • インデックス: 配列内の位置番号。最初は 0、次は 1、というふうに数える。
  • length: 配列の「要素数（何個入っているか）」を表す数。
const animals = ['cat', 'dog', 'bird'];
console.log(animals[0]); // 'cat'（最初の要素）
console.log(animals.length); // 3（要素数）
JavaScript

直感ポイント: インデックスは「1番目」じゃなくて「0番目」から始まる。ここだけ最初は違和感があるけど、すぐ慣れる。

配列に要素を追加する3つの方法

1. 最後に追加する（push）

  • 使いどころ: 新しいものを「末尾」にどんどん足したいとき。
  • 挙動: 配列の後ろに追加される。戻り値は「追加後の長さ」。
const fruits = ['apple', 'melon'];
const newLength = fruits.push('peach', 'orange');
console.log(fruits);     // ['apple', 'melon', 'peach', 'orange']
console.log(newLength);  // 4
JavaScript

2. 最初に追加する（unshift）

  • 使いどころ: 新しいものを「先頭」に入れたいとき。
  • 挙動: 配列の前に追加され、既存の要素は後ろにずれる。戻り値は「追加後の長さ」。
const queue = ['task2', 'task3'];
const newLength = queue.unshift('task1');
console.log(queue);      // ['task1', 'task2', 'task3']
console.log(newLength);  // 3
JavaScript

3. 指定した位置に直接入れる（インデックス代入）

  • 使いどころ: 特定の場所にピンポイントで入れたいとき。
  • 注意点: 間のインデックスを飛ばすと「空の穴（undefined）」ができがち。基本は「既存の位置を上書き」か「最後に足す」用途で使う。
const nums = [10, 20, 30];
nums[1] = 25;            // 位置1の値を上書き
nums[nums.length] = 40;  // 最後に追加（push と同じ効果）
console.log(nums);       // [10, 25, 30, 40]

// 悪い例（穴が空く）
const arr = ['A'];
arr[5] = 'B';
console.log(arr);        // ['A', undefined, undefined, undefined, undefined, 'B']
JavaScript

よくあるつまずきと回避策

  • つまずき1: 最初は 0 から数えるのを忘れる
    • 回避策: 「位置」を考えるときは、頭の中で 0,1,2… と数える練習をする。
  • つまずき2: インデックス飛ばしで穴だらけになる
    • 回避策: 「任意位置に入れたい」なら、まずは push/unshift を使ってから、必要なら並び替えを考える。
  • つまずき3: 戻り値の誤解
    • 回避策: push/unshift の戻り値は「追加後の長さ」。新しく追加した要素そのものではない。

例題で理解を定着させる

例題1: 会員リストに新規会員を末尾追加

  • 目的: 末尾に新しい名前を追加して最新のリストを作る。
let members = ['Yuki', 'Hana'];
members.push('Sota');
console.log(members); // ['Yuki', 'Hana', 'Sota']
JavaScript
  • 解説ポイント: シンプルに末尾に並ぶ。「順番重視」のときは push が安心。

例題2: 優先度が高いタスクを先頭に積む

  • 目的: 優先タスクは先頭に追加して、すぐ着手できるようにする。
let tasks = ['write report', 'email client'];
tasks.unshift('fix bug');
console.log(tasks); // ['fix bug', 'write report', 'email client']
JavaScript
  • 解説ポイント: 先頭に入ることで「並びの意味」が変わる。順序が重要なときは unshift。

例題3: 指定位置の値を更新しつつ最後にも追加

  • 目的: 途中の値を修正し、さらに新しい値を追加。
let scores = [50, 60, 70];
scores[1] = 65;                 // 修正
scores[scores.length] = 80;     // 最後に追加（push 相当）
console.log(scores); // [50, 65, 70, 80]
JavaScript
  • 解説ポイント: 既存の場所は「上書き」、最後は「length を使って追加」。

例題4: インデックス飛ばしの落とし穴を体験

  • 目的: 飛ばすとどうなるかを自分の目で確認。
let letters = ['a'];
letters[4] = 'b';
console.log(letters);           // ['a', undefined, undefined, undefined, 'b']
console.log(letters.length);    // 5
JavaScript
  • 解説ポイント: 「穴」ができると、後の処理で扱いづらくなる。基本は避けよう。

小さな練習課題（自分で手を動かす）

  1. 買い物リストに品物を追加
    • 課題: ['milk'] に bread を最後、egg を最初に追加して表示。
    • ヒント: push と unshift。
  2. 並び替えたい気持ちを抑えてまず追加
    • 課題: ['red', 'blue'] の配列で、真ん中に green を入れたい。まずは push か unshift で追加して、最終的に ['red', 'green', 'blue'] にする。
    • ヒント: 追加後に splice を使うのが正式だが、今回は「追加」だけで良い。次の学習で「削除/挿入（splice）」に進もう。
  3. 穴あき配列を作らずに 3 つ追加
    • 課題: 空配列 [] に 1, 2, 3 を「順番通り」に追加して表示。
    • ヒント: push(1, 2, 3) が一発でできる。

まとめと次の一歩

  • 最後に追加: push
  • 最初に追加: unshift
  • 位置を指定: インデックス代入（穴に注意）
  • 次は「削除・挿入（pop, shift, splice）」を学ぶと、配列を自由自在に扱えるようになります。希望があれば、続きも初心者向けに丁寧に解説します。どこから掘り下げたい？
前へ次へ
1234
スポンサーリンク
タイトルとURLをコピーしました