---

もう迷わない！JavaScriptの配列操作、push()メソッド入門

はじめに

プログラミングの世界、特にWeb開発のフロントエンドで中心的な役割を果たすJavaScriptにおいて、「配列」は最も基本的かつ強力なデータ構造の一つです。数値を集計したり、ユーザーのリストを管理したり、APIから取得したデータを一時的に保存したりと、その用途は枚挙にいとまがありません。そして、この配列を自在に操るためには、配列操作メソッドの理解が不可欠です。

JavaScriptには、配列を操作するためのメソッドが数多く用意されています。map(), filter(), reduce()といった高階関数から、slice(), splice()のような配列の一部を操作するメソッドまで様々です。しかし、その中でも最も頻繁に使用され、すべてのJavaScript学習者が最初にマスターすべきメソッドが、今回徹底的に解説する push() メソッドです。

「配列の末尾に要素を追加する」——push()の機能は、言葉にすればたったこれだけです。しかし、このシンプルな操作の裏には、JavaScriptの配列の性質、パフォーマンス、そして他のメソッドとの微妙な違いといった、深く理解すべき多くの側面が隠されています。なぜpush()は「破壊的メソッド」と呼ばれるのか？ concat()やスプレッド構文(...)を使った追加方法と何が違うのか？どのような場面でpush()を使うのが最適なのか？

この記事では、JavaScript初心者から、知識を再確認したい中級者までを対象に、push()メソッドに関するあらゆる疑問に答えていきます。基本的な構文から始め、その内部的な挙動、他のメソッドとの詳細な比較、そして実践的なコーディング例まで、段階的かつ網羅的に解説します。

この記事を読み終える頃には、あなたはpush()メソッドを単なる「要素を追加する命令」としてではなく、JavaScriptの配列操作全体像の中でのその役割と特性を正確に理解し、自信を持って使いこなせるようになっているはずです。さあ、配列操作の世界への扉を開き、push()メソッドのすべてを解き明かしていきましょう。

---

第1章: JavaScriptの配列とは？ – push()を理解する前に

push()メソッドの旅を始める前に、まずはその舞台となる「JavaScriptの配列」について基本的なおさらいをしておきましょう。配列の特性を正しく理解することが、push()の挙動を深く理解するための盤石な基礎となります。

1.1 配列の基本概念

配列とは、一言で言えば 「複数のデータを順番に格納できる、リストのようなもの」 です。プログラミングでは、関連するデータを一つにまとめて管理したい場面が頻繁に登場します。例えば、一週間の曜日、クラスの生徒名簿、ショッピングカートに入っている商品のリストなどです。これらのデータを、個別の変数として宣言するのは非常に非効率です。

javascript
// 非効率な例
let student1 = "Alice";
let student2 = "Bob";
let student3 = "Charlie";

配列を使えば、これらのデータを一つの変数にすっきりとまとめることができます。

javascript
// 配列を使った効率的な例
let students = ["Alice", "Bob", "Charlie"];

このstudentsという配列には、3つの文字列データが格納されています。配列内の個々のデータのことを 要素（element） と呼びます。

1.2 JavaScript配列のユニークな特徴

他の多くのプログラミング言語の配列と比較して、JavaScriptの配列にはいくつかのユニークな特徴があります。

a) 動的なサイズ
JavaやC++のような静的型付け言語では、多くの場合、配列を作成する際にそのサイズ（格納できる要素の数）を最初に決める必要があります。一度決めたサイズは後から変更できません。
しかし、JavaScriptの配列は 動的 です。つまり、最初にサイズを決める必要がなく、後から自由に要素を追加したり削除したりして、サイズを伸縮させることができます。この「動的に要素を追加する」という操作の主役こそが、push()メソッドなのです。

b) 異なるデータ型の格納
もう一つの大きな特徴は、一つの配列内に 異なるデータ型の要素を混在させることができる 点です。数値、文字列、ブール値、オブジェクト、さらには他の配列や関数まで、何でも格納できます。

javascript
let mixedArray = [
100, // 数値 (Number)
"Hello, World!", // 文字列 (String)
true, // ブール値 (Boolean)
{ name: "John", age: 30 }, // オブジェクト (Object)
[1, 2, 3], // 別の配列 (Array)
function() { console.log("I am a function"); } // 関数 (Function)
];
この柔軟性はJavaScriptの強みですが、一方でコードの意図が分かりにくくなる可能性もあるため、通常は同じ種類のデータを格納することが推奨されます。

1.3 配列の作成と要素へのアクセス

JavaScriptで配列を作成する最も一般的な方法は、角括弧 [] を使った 配列リテラル です。

“`javascript
// 空の配列を作成
const emptyArray = [];

// 初期値を持つ配列を作成
const fruits = [“Apple”, “Banana”, “Cherry”];
“`

配列内の各要素には、インデックス（index） と呼ばれる一意の番号が割り当てられています。このインデックスは 0から始まります。最初の要素のインデックスは0、2番目は1、3番目は2となります。このインデックスを使うことで、特定の要素にアクセスできます。

“`javascript
const fruits = [“Apple”, “Banana”, “Cherry”];

console.log(fruits[0]); // “Apple”
console.log(fruits[1]); // “Banana”
console.log(fruits[2]); // “Cherry”

// 存在しないインデックスにアクセスすると undefined が返る
console.log(fruits[3]); // undefined
“`

1.4 lengthプロパティの重要性

すべての配列は length というプロパティを持っています。これは、その配列に格納されている要素の数を返します。

“`javascript
const fruits = [“Apple”, “Banana”, “Cherry”];
console.log(fruits.length); // 3

const emptyArray = [];
console.log(emptyArray.length); // 0
“`

このlengthプロパティは、単に要素の数を教えてくれるだけではありません。push()をはじめとする多くの配列メソッドの挙動に深く関わっています。push()が要素を追加すると、このlengthプロパティの値が自動的に更新されます。また、lengthプロパティは最後の要素のインデックスよりも1大きい値（最後のインデックス = length - 1）になるという関係も重要です。

この章では、JavaScriptの配列が「動的で、様々なデータを格納できる、0から始まるインデックスを持つリスト」であり、lengthプロパティでそのサイズを管理していることを確認しました。この基礎知識を念頭に、いよいよ次章からpush()メソッドの詳細な解説に入っていきます。

---

第2章: push()メソッドの基本 – 最初のステップ

配列の基礎を固めたところで、本題であるpush()メソッドの核心に迫りましょう。この章では、push()の基本的な構文、機能、そして最も重要な特徴である「破壊的な性質」について、具体的なコード例を交えながら解説します。

2.1 push()メソッドの構文と機能

push()メソッドは、非常にシンプルで直感的な構文を持っています。

構文:
javascript
array.push(element1, element2, ..., elementN)

• array: 要素を追加したい対象の配列。
• element1, ..., elementN: 配列の末尾に追加したい1つ以上の要素。カンマ区切りでいくつでも指定できます。

機能:
push()メソッドは、引数で渡された要素を、呼び出し元の配列の 末尾 に順番に追加します。これがpush()の最も基本的な役割です。

2.2 push()の戻り値

多くの人が見落としがちですが、push()メソッドには 戻り値 があります。それは、メソッドを呼び出した後の、配列の新しいlengthプロパティの値です。追加された要素そのものが返ってくるわけではない点に注意してください。

この戻り値は、要素追加後の配列の長さをすぐに知りたい場合に便利です。

2.3 基本的なコード例で学ぶ

それでは、実際のコードでpush()の動きを見ていきましょう。

例1: 空の配列に要素を1つ追加する
“`javascript
let numbers = [];
console.log(“追加前:”, numbers); // 追加前: []
console.log(“追加前のlength:”, numbers.length); // 追加前のlength: 0

const newLength = numbers.push(10); // 配列の末尾に 10 を追加

console.log(“追加後:”, numbers); // 追加後: [10]
console.log(“追加後のlength:”, numbers.length); // 追加後のlength: 1
console.log(“push()の戻り値:”, newLength); // push()の戻り値: 1
``
この例では、空のnumbers配列にpush(10)を実行しました。その結果、配列には10が追加され、lengthは1になりました。そして、push()の戻り値として、この新しいlengthである1が変数newLength`に格納されていることが分かります。

例2: 既存の配列に要素を追加する
“`javascript
let fruits = [“Apple”, “Banana”];
console.log(“追加前:”, fruits); // 追加前: [“Apple”, “Banana”]

fruits.push(“Cherry”); // 配列の末尾に “Cherry” を追加

console.log(“追加後:”, fruits); // 追加後: [“Apple”, “Banana”, “Cherry”]
``
既に要素が存在する配列に対しても、push()`は期待通りに末尾に新しい要素を追加します。

例3: 複数の要素を一度に追加する
push()の便利な点は、一度に複数の要素を追加できることです。引数をカンマで区切って渡します。

“`javascript
let vegetables = [“Carrot”];
console.log(“追加前:”, vegetables); // 追加前: [“Carrot”]

const newLength = vegetables.push(“Broccoli”, “Spinach”, “Tomato”);

console.log(“追加後:”, vegetables); // 追加後: [“Carrot”, “Broccoli”, “Spinach”, “Tomato”]
console.log(“push()の戻り値:”, newLength); // push()の戻り値: 4
``
引数で渡した“Broccoli”,“Spinach”,“Tomato”が、その順番通りに配列の末尾に追加されています。戻り値は、追加後の要素数である4`です。

2.4 最重要ポイント: push()は「破壊的メソッド」である

ここがpush()を理解する上で最も重要なポイントです。push()は 破壊的メソッド (mutator method) と呼ばれます。これは、push()が呼び出された元の配列そのものを直接変更（ミューテート）することを意味します。

先ほどの例をもう一度見てみましょう。
javascript
let fruits = ["Apple", "Banana"];
fruits.push("Cherry");
// この時点で、変数 fruits が参照している配列自体が ["Apple", "Banana", "Cherry"] に変わっている
fruits.push("Cherry")は、新しい配列をコピーして作成し、それを返すわけではありません。fruitsという変数が指し示しているメモリ上の配列データに、直接"Cherry"を書き加えているのです。

この「破壊的」という性質は、意図しない副作用（バグ）の原因になることがあります。特に、関数に配列を渡してその中でpush()を使う場合などに注意が必要です。

“`javascript
function addFruit(fruitArray, newFruit) {
// この関数は、渡された配列を直接変更してしまう！
fruitArray.push(newFruit);
return fruitArray;
}

let myFruits = [“Apple”, “Banana”];
console.log(“関数呼び出し前:”, myFruits); // 関数呼び出し前: [“Apple”, “Banana”]

let updatedFruits = addFruit(myFruits, “Cherry”);

console.log(“関数呼び出し後 (元の変数):”, myFruits); // 関数呼び出し後 (元の変数): [“Apple”, “Banana”, “Cherry”]
console.log(“関数呼び出し後 (戻り値):”, updatedFruits); // 関数呼び出し後 (戻り値): [“Apple”, “Banana”, “Cherry”]
``addFruit関数を呼び出した結果、元のmyFruits`配列まで変更されてしまいました。これは、関数が配列のコピーではなく、参照（メモリ上の場所）を受け取るためです。

この挙動を意図して利用する場面も多いですが、元の配列を保持したい場合には、後述するconcat()やスプレッド構文などの 非破壊的 (non-mutating) な方法を選択する必要があります。

この章では、push()の基本的な使い方と、その核心的な性質である「破壊的」な挙動について学びました。この性質を理解することは、他のメソッドとの違いを明確にし、適切な場面でpush()を使いこなすための鍵となります。

---

第3章: push()の挙動を深く探る

push()の基本的な使い方が分かったところで、次はその内部的な挙動や少し特殊なケースについて、より深く掘り下げていきましょう。これらの知識は、push()をさらに正確に理解し、予期せぬ挙動を避けるのに役立ちます。

3.1 lengthプロパティとの密接な関係

前章で、push()が配列のlengthプロパティを更新し、その新しい値を返すことを見ました。実は、push()の挙動はlengthプロパティと非常に密接に関わっています。

JavaScriptの配列において、push(newElement)という操作は、概念的には以下のコードとほぼ同等です。

javascript
// array.push(newElement) は、以下と似たようなことをしている
array[array.length] = newElement;
どういうことか見ていきましょう。

javascript
let colors = ["Red", "Green"];
console.log(colors.length); // 2
この時、colors配列の最後の要素のインデックスは1 (length - 1) です。colors[2]はまだ存在しません。ここに新しい要素を代入するとどうなるでしょうか。

“`javascript
colors[colors.length] = “Blue”; // colors[2] = “Blue” と同じ意味

console.log(colors); // [“Red”, “Green”, “Blue”]
console.log(colors.length); // 3
``
見事に、配列の末尾に要素が追加され、lengthプロパティも自動的に3に更新されました。これはpush()`と全く同じ結果です。

では、なぜわざわざpush()メソッドを使うのでしょうか？理由はいくつかあります。

1. 可読性と意図の明確さ: colors.push("Blue") は、「colors配列にBlueを追加する」という意図がコードから直接的に読み取れます。colors[colors.length] = "Blue" は、少し考えないと何をしているのか分かりにくいかもしれません。
2. 複数の要素の追加: push()はcolors.push("Blue", "Yellow")のように複数の要素を一度に追加できますが、lengthプロパティを使った直接代入では、一つずつループ処理などを行う必要があり、コードが煩雑になります。
3. メソッドチェーン: push()はメソッドですが、戻り値がlengthのため、他の配列メソッド（mapやfilterなど、配列を返すもの）と直接チェーンさせるのには不向きです。しかし、フレームワークやライブラリによっては、この戻り値を利用する場面も考えられます。

基本的には、配列の末尾に要素を追加する際は、可読性と利便性の観点からpush()メソッドを使用するのがベストプラクティスです。

3.2 疎な配列（Sparse Arrays）とpush()

疎な配列とは、インデックスが連続していない、つまり要素が存在しない「穴」がある配列のことです。

javascript
// インデックス1に要素が存在しない疎な配列
const sparseArray = ["a", , "c"];
console.log(sparseArray); // ["a", empty, "c"]
console.log(sparseArray.length); // 3
console.log(sparseArray[1]); // undefined

このような配列に対してpush()を使うとどうなるでしょうか？ push()は「穴」を埋めるのでしょうか？

答えは「いいえ」です。push()は常に現在のlengthプロパティが示す位置（つまり配列の末尾）に要素を追加します。

“`javascript
const sparseArray = [“a”, , “c”];
console.log(“追加前:”, sparseArray, “length:”, sparseArray.length);
// 追加前: [“a”, empty, “c”] length: 3

sparseArray.push(“d”);

console.log(“追加後:”, sparseArray, “length:”, sparseArray.length);
// 追加後: [“a”, empty, “c”, “d”] length: 4
``push(“d”)は、sparseArray[3]に“d”を追加しました。インデックス1の「穴」はそのまま残ります。push()は配列の内部構造を気にせず、あくまでlength`を基準に末尾へ追加する、というシンプルなルールで動作します。

3.3 あらゆるデータ型の追加

第1章で触れたように、JavaScriptの配列は異なるデータ型を格納できます。push()もその性質を受け継いでおり、引数として渡せるデータ型に制限はありません。

“`javascript
let container = [];

// 数値
container.push(123);

// 文字列
container.push(“Hello”);

// ブール値
container.push(false);

// null と undefined
container.push(null, undefined);

// オブジェクト
const user = { id: 1, name: “Alice” };
container.push(user);

// 配列（多次元配列の作成）
const matrix = [[1, 2], [3, 4]];
container.push(matrix);

// 関数
container.push(() => { return “I am a function inside an array!”; });

console.log(container);
/
[
123,
‘Hello’,
false,
null,
undefined,
{ id: 1, name: ‘Alice’ },
[ [ 1, 2 ], [ 3, 4 ] ],
[Function (anonymous)]
]
/

// 配列内の関数を実行することもできる
console.log(container7); // “I am a function inside an array!”
``
このように、push()`は非常に柔軟で、どんな種類のデータでも配列のコレクションに加えることができます。特に、ループ処理の中でオブジェクトや配列を別の配列に格納していく際に、この柔軟性が大いに役立ちます。

3.4 引数を指定しない場合

もしpush()を引数なしで呼び出したらどうなるでしょうか？

“`javascript
let items = [“A”, “B”];
const newLength = items.push();

console.log(items); // [“A”, “B”]
console.log(newLength); // 2
``
結果は、**配列は何も変更されず、現在のlength`がそのまま返されます**。エラーにはなりませんが、特に意味のある操作ではありません。

この章では、push()がlengthプロパティを基準に動作する仕組み、疎な配列に対する挙動、そしてデータ型を問わない柔軟性について深く見てきました。これらの知識は、push()がなぜそのように振る舞うのかを理解する助けとなり、より高度な配列操作へのステップとなります。

---

第4章: push()と他の配列操作メソッドとの比較

push()を真にマスターするためには、その機能単体だけでなく、他の類似した配列操作メソッドとの違いを正確に理解することが不可欠です。それぞれのメソッドが持つユニークな特性、破壊的か非破壊的か、そして戻り値の違いを知ることで、状況に応じた最適なメソッドを選択できるようになります。

4.1 push() vs pop(): スタックの基本操作

pop()メソッドはpush()と対になる存在です。

• push(): 配列の 末尾に 要素を 追加 する。
• pop(): 配列の 末尾から 要素を 削除 する。

pop()もpush()と同様に 破壊的メソッド であり、元の配列を直接変更します。ただし、戻り値が異なります。pop()は 削除した要素そのもの を返します。

“`javascript
let stack = [];

// pushでデータを追加
stack.push(1); // stack is now [1]
stack.push(2); // stack is now [1, 2]
stack.push(3); // stack is now [1, 2, 3]
console.log(“After pushes:”, stack); // After pushes: [1, 2, 3]

// popでデータを取り出す
const lastItem = stack.pop(); // stack is now [1, 2]
console.log(“Popped item:”, lastItem); // Popped item: 3
console.log(“After pop:”, stack); // After pop: [1, 2]

const secondLastItem = stack.pop(); // stack is now [1]
console.log(“Popped item:”, secondLastItem); // Popped item: 2
console.log(“After pop:”, stack); // After pop: [1]
“`

この「後から入れたものが先に出る」という振る舞いは、LIFO (Last-In, First-Out) と呼ばれるデータ構造で、スタック と呼ばれます。push()とpop()は、このスタック構造をJavaScriptの配列で簡単に実現するための完璧なペアです。ブラウザの「戻る」ボタンの履歴管理や、テキストエディタのUndo/Redo機能などに利用されます。

4.2 push() vs unshift(): 追加する場所の違い

unshift()メソッドも要素を追加するメソッドですが、その場所がpush()とは異なります。

• push(): 配列の 末尾に 要素を追加する。
• unshift(): 配列の 先頭に 要素を追加する。

unshift()もpush()と同じく、破壊的メソッド であり、戻り値は 追加後の新しいlength です。

“`javascript
let list = [“b”, “c”];

// pushで末尾に追加
list.push(“d”);
console.log(“After push:”, list); // After push: [“b”, “c”, “d”]

// unshiftで先頭に追加
list.unshift(“a”);
console.log(“After unshift:”, list); // After unshift: [“a”, “b”, “c”, “d”]
“`

パフォーマンスに関する注意点:
一般的に、unshift()はpush()よりもパフォーマンスが劣る可能性があります。なぜなら、unshift()で先頭に要素を追加すると、既存のすべての要素のインデックスを一つずつ後ろにずらす必要があるからです。配列が非常に大きい場合、このインデックスの再割り当て処理はコストが高くなることがあります。一方、push()は末尾に追加するだけなので、通常は非常に高速です。

4.3 push() vs shift(): キューの実現

shift()はunshift()の対となるメソッドで、配列の先頭から要素を削除します。push()とshift()を組み合わせることで、別の重要なデータ構造を実現できます。

• push(): 配列の 末尾に 要素を追加する（Enqueue）。
• shift(): 配列の 先頭から 要素を 削除 する（Dequeue）。

この「先に入れたものが先に出る」という振る舞いは、FIFO (First-In, First-Out) と呼ばれ、キュー（待ち行列）と呼ばれます。

“`javascript
let queue = [];

// pushで列の最後尾に並ぶ
queue.push(“Task 1”); // queue is [“Task 1”]
queue.push(“Task 2”); // queue is [“Task 1”, “Task 2”]
queue.push(“Task 3”); // queue is [“Task 1”, “Task 2”, “Task 3”]
console.log(“Current queue:”, queue);

// shiftで列の先頭から処理する
const firstTask = queue.shift(); // queue is [“Task 2”, “Task 3”]
console.log(“Processing:”, firstTask); // Processing: Task 1
console.log(“Current queue:”, queue);

const secondTask = queue.shift(); // queue is [“Task 3”]
console.log(“Processing:”, secondTask); // Processing: Task 2
console.log(“Current queue:”, queue);
“`
イベントループや非同期処理のタスク管理など、処理を順番待ちさせる場面でキューは広く使われています。

4.4 push() vs concat(): 破壊的 vs 非破壊的

ここが最も重要な比較の一つです。concat()メソッドは、既存の配列に他の配列や値をつなげて、新しい配列を生成して返すメソッドです。

• push(): 元の配列を変更する（破壊的）。戻り値は新しいlength。
• concat(): 元の配列は変更せず、結合された新しい配列を返す（非破壊的）。

“`javascript
const originalArray = [1, 2, 3];

// — push()の場合 —
const pushResult = originalArray.push(4, 5);
console.log(“— push() —“);
console.log(“元の配列:”, originalArray); // 元の配列: [1, 2, 3, 4, 5] <– 変更されている！
console.log(“戻り値:”, pushResult); // 戻り値: 5 (新しいlength)

// — concat()の場合 —
const originalArray2 = [1, 2, 3];
const newArray = originalArray2.concat([4, 5]);
console.log(“\n— concat() —“);
console.log(“元の配列:”, originalArray2); // 元の配列: [1, 2, 3] <– 変更されていない！
console.log(“戻り値(新しい配列):”, newArray); // 戻り値(新しい配列): [1, 2, 3, 4, 5]
“`

どちらを使うべきか？
これはプログラムの設計思想に依ります。元のデータを直接変更しても問題ない、手続き的な処理ではpush()がシンプルで効率的です。
一方、ReactやVueのようなモダンなJavaScriptフレームワークの世界では、イミュータビリティ（不変性）という考え方が非常に重要視されます。これは、データ（特にアプリケーションの状態）を直接変更せず、常に新しいコピーを作成して変更を適用するという原則です。これにより、変更の追跡が容易になり、予期せぬ副作用を防ぐことができます。このような文脈では、concat()のような非破壊的メソッドが好まれます。

4.5 push() vs スプレッド構文 (...)

ES2015 (ES6)で導入されたスプレッド構文は、concat()と同様に、配列を非破壊的に結合するための現代的で人気のある方法です。

“`javascript
const originalArray3 = [“a”, “b”];
const newElement = “c”;
const anotherArray = [“d”, “e”];

// スプレッド構文を使って新しい要素を追加
const newArray2 = […originalArray3, newElement];
console.log(“元の配列:”, originalArray3); // 元の配列: [“a”, “b”] (不変)
console.log(“新しい配列:”, newArray2); // 新しい配列: [“a”, “b”, “c”]

// スプレッド構文を使って配列を結合
const combinedArray = […originalArray3, …anotherArray];
console.log(“結合された配列:”, combinedArray); // 結合された配列: [“a”, “b”, “d”, “e”]
``
スプレッド構文はconcat()よりも可読性が高く、直感的であると感じる開発者が多いため、非破壊的な配列の追加・結合にはこちらが頻繁に使われます。push()`との根本的な違いは、やはり 破壊的か非破壊的か という点です。

4.6 push() vs splice()

splice()は配列操作の「万能ナイフ」のようなメソッドで、任意の位置の要素を削除、置換、そして追加することができます。

splice()を使ってpush()の動作を模倣することも可能です。
splice(startIndex, deleteCount, item1, item2, ...)

• startIndex: 操作を開始するインデックス。
• deleteCount: 削除する要素の数。
• item1, ...: 追加する要素。

push()と同じことをするには、以下のようにします。
array.splice(array.length, 0, newItem)
これは、「配列の末尾（array.lengthの位置）から、0個の要素を削除し、newItemを追加する」という意味になります。

“`javascript
let letters = [“a”, “b”, “c”];
letters.splice(letters.length, 0, “d”, “e”);

console.log(letters); // [“a”, “b”, “c”, “d”, “e”]
``
結果はpush()と同じですが、コードの意図が全く異なります。push()は「末尾に追加する」という意図が明確ですが、splice()はより複雑な操作を示唆します。単純に末尾に追加したい場合は、迷わずpush()`を使いましょう。

4.7 比較まとめ表

メソッド	操作対象	破壊的/非破壊的	戻り値	主な用途
push()	末尾に追加	破壊的	新しいlength	スタック、単純な要素追加
pop()	末尾を削除	破壊的	削除された要素	スタック
unshift()	先頭に追加	破壊的	新しいlength	キュー、リストの先頭に追加
shift()	先頭を削除	破壊的	削除された要素	キュー
concat()	配列を結合	非破壊的	新しい配列	イミュータブルな配列結合
... (スプレッド構文)	配列を展開・結合	非破壊的	(式の一部)	イミュータブルな配列結合・コピー
splice()	任意の位置で操作	破壊的	削除された要素の配列	複雑な配列の変更（追加・削除・置換）

この章を通じて、push()が持つ独自の立ち位置が明確になったはずです。シンプルさ、破壊的な性質、そして末尾への操作という特徴を理解し、他のメソッドとの使い分けを意識することが、より質の高いコードを書くための重要な一歩です。

---

第5章: 実践的なpush()の活用例

理論を学んだ後は、push()が実際のプログラミングでどのように活躍するのかを見ていきましょう。ここでは、日常的な開発シーンでよく遭遇する具体的なシナリオをいくつか紹介します。

例1: フォーム入力データの収集

Webページで、ユーザーが複数の項目（例えば、趣味やスキルなど）を動的に追加できるフォームを考えてみましょう。ユーザーが「追加」ボタンを押すたびに、入力された値を配列に格納していく、という処理はpush()の典型的な出番です。

“`javascript
// HTML (イメージ)
//
// スキルを追加
//

// JavaScript
const skills = [];
const skillInput = document.getElementById(‘skillInput’);
const addSkillBtn = document.getElementById(‘addSkillBtn’);
const skillList = document.getElementById(‘skillList’);

addSkillBtn.addEventListener(‘click’, () => {
const newSkill = skillInput.value.trim();

if (newSkill) {
// 入力値を配列に追加
skills.push(newSkill);

// 入力フィールドをクリア
skillInput.value = '';

// 画面のリストを更新（例）
updateSkillList();
console.log("現在のスキル配列:", skills);

}
});

function updateSkillList() {
skillList.innerHTML = ”; // リストを一旦空にする
skills.forEach(skill => {
const li = document.createElement(‘li’);
li.textContent = skill;
skillList.appendChild(li);
});
}
``
このコードでは、skillsという空の配列を用意し、ボタンがクリックされるたびに入力値をpush()`で追加しています。これにより、ユーザーが入力したスキルのリストを簡単に構築・管理できます。

例2: 条件に合うデータのフィルタリングと集計

APIから取得したユーザーデータのリストから、特定の条件（例: 20歳以上）を満たすユーザーの名前だけを抽出して新しい配列を作りたい、というケースは非常に頻繁にあります。

“`javascript
const allUsers = [
{ name: “Alice”, age: 25 },
{ name: “Bob”, age: 18 },
{ name: “Charlie”, age: 32 },
{ name: “David”, age: 19 },
{ name: “Eve”, age: 28 },
];

const adultUserNames = [];

for (const user of allUsers) {
if (user.age >= 20) {
// 条件に合致すれば、名前を新しい配列にpushする
adultUserNames.push(user.name);
}
}

console.log(adultUserNames); // [“Alice”, “Charlie”, “Eve”]
``
この例では、for…ofループで元のallUsers配列を一つずつチェックし、年齢が20歳以上という条件を満たすユーザーのnameプロパティだけをadultUserNames配列にpush()`しています。

（補足: このような処理は、高階関数のfilter()とmap()を使えば、より宣言的に書くこともできますが、push()を使った基本的なループ処理は、アルゴリズムの基礎として非常に重要です。）
javascript
// 高階関数を使った場合
const adultUserNames2 = allUsers
.filter(user => user.age >= 20)
.map(user => user.name);
console.log(adultUserNames2); // ["Alice", "Charlie", "Eve"]

例3: スタック構造の実装（簡易的な「戻る」機能）

第4章で触れたスタック構造の実用例です。ユーザーが行った操作の履歴を保存し、「元に戻す」機能を提供したい場合を考えます。

“`javascript
class Editor {
constructor() {
this.history = []; // 操作履歴を保存するスタック
this.content = “”;
}

type(text) {
// 操作を履歴にpush
this.history.push(this.content);
this.content += text;
this.showContent();
}

undo() {
if (this.history.length > 0) {
// 履歴からpopして一つ前の状態に戻す
this.content = this.history.pop();
this.showContent();
} else {
console.log(“これ以上元に戻せません。”);
}
}

showContent() {
console.log(“Content:”, this.content);
}
}

const myEditor = new Editor();
myEditor.type(“Hello, “); // Content: Hello,
myEditor.type(“World!”); // Content: Hello, World!
myEditor.type(” How are you?”); // Content: Hello, World! How are you?

myEditor.undo(); // Content: Hello, World!
myEditor.undo(); // Content: Hello,
myEditor.undo(); // Content:
myEditor.undo(); // これ以上元に戻せません。
``
このEditorクラスでは、typeメソッドが呼ばれるたびに、変更前のcontentをhistory配列にpush()で保存します。undoメソッドでは、pop()を使って最後に追加された履歴を取り出し、contentをその状態に戻しています。push()とpop()`の見事な連携プレーです。

例4: 多次元配列の動的な構築

push()を使って、ネストされたループの中で多次元配列（行列やグリッド）を動的に生成することができます。例えば、九九の表を作成してみましょう。

“`javascript
const multiplicationTable = [];
const size = 9;

for (let i = 1; i <= size; i++) {
const row = []; // 各行を表す新しい配列をループ内で作成
for (let j = 1; j <= size; j++) {
// 計算結果を「行」の配列にpush
row.push(i * j);
}
// 完成した「行」の配列を、全体の表の配列にpush
multiplicationTable.push(row);
}

// 結果の確認 (見やすいように表形式で出力)
console.table(multiplicationTable);
/
┌─────────┬───┬───┬───┬───┬───┬───┬───┬───┬───┐
│ (index) │ 0 │ 1 │ 2 │ 3 │ 4 │ 5 │ 6 │ 7 │ 8 │
├─────────┼───┼───┼───┼───┼───┼───┼───┼───┼───┤
│ 0 │ 1 │ 2 │ 3 │ 4 │ 5 │ 6 │ 7 │ 8 │ 9 │
│ 1 │ 2 │ 4 │ 6 │ 8 │ 10│ 12│ 14│ 16│ 18│
… (以下略) …
└─────────┴───┴───┴───┴───┴───┴───┴───┴───┴───┘
/
``
このコードでは、外側のループで各行を表すrow配列を初期化し、内側のループで計算結果をそのrowにpush()していきます。内側のループが終わるたびに、完成したrow配列を、最終的なmultiplicationTable配列にpush()`することで、2次元の表データが綺麗に構築されます。

これらの例からわかるように、push()は「空の配列を用意し、ループやイベントに応じて動的に要素を積み上げていく」というプログラミングの基本的なパターンにおいて、中心的な役割を果たします。そのシンプルさゆえの汎用性の高さが、push()が最もよく使われるメソッドの一つである理由です。

---

まとめ

この記事では、JavaScriptの配列操作の基本中の基本であるpush()メソッドについて、その表面的な機能から内部的な挙動、そして実践的な応用に至るまで、多角的に掘り下げてきました。

最後に、私たちが学んだ重要なポイントを振り返ってみましょう。

1. 基本的な機能: push()は、配列の 末尾 に1つ以上の要素を追加し、追加後の 新しいlength を返します。
2. 破壊的な性質: push()は、呼び出し元の配列 そのものを直接変更 します。この「破壊的」な性質は、他の「非破壊的」なメソッド（concat()やスプレッド構文）との最大の違いであり、使用する際には常に意識する必要があります。
3. 他のメソッドとの関係:
   • pop()とは対になり、スタック (LIFO) 構造を形成します。
   • unshift()とは追加する場所（先頭か末尾か）が異なります。
   • shift()と組み合わせることで、キュー (FIFO) 構造を形成します。
   • concat()やスプレッド構文は、元の配列を変更しない非破壊的な代替手段であり、イミュータビリティ（不変性）が求められる場面で重要となります。
4. 実践的な応用: ユーザー入力の収集、データのフィルタリング、操作履歴の実装、多次元配列の構築など、push()はプログラムの中で動的にコレクションを構築するあらゆる場面で活躍します。

push()は、そのシンプルさゆえに、ともすれば深く考えずに使われがちなメソッドです。しかし、その背後にある「破壊性」や「lengthプロパティとの関係」を理解することで、コードの挙動をより正確に予測し、意図しない副作用を避け、そして状況に応じて最適なメソッドを選択する判断力を養うことができます。

JavaScriptの配列操作をマスターする旅は、push()の完全な理解から始まります。このメソッドを自在に操れるようになったあなたは、次なるステップとしてmap(), filter(), reduce()といった、より表現力豊かで強力な高階関数へと進んでいく準備が整ったと言えるでしょう。

もうpush()の前で迷うことはありません。自信を持って、あなたのコードに要素を追加していってください。Happy Coding