push とは何か
push は「配列の末尾に要素を追加し、その結果の要素数を返す」メソッドです。ここが重要です：push は“破壊的操作”です。元の配列を直接書き換えるため、同じ配列を共有している変数や状態（参照）があれば、その内容が更新されます。
基本の使い方と戻り値
1件追加と戻り値の意味
const a = [1, 2];
const len = a.push(3);
console.log(a); // [1, 2, 3]
console.log(len); // 3（現在の要素数）
ここが重要です：push は「新しい長さ」を返します。追加後の配列の末尾は a[a.length – 1] で安全に参照できます。
複数件をまとめて追加する
const a = [1];
a.push(2, 3, 4);
console.log(a); // [1, 2, 3, 4]
ここが重要です：引数をカンマで並べれば一度に複数追加できます。ループで push するより、まとまった追加のほうが読みやすく高速です。
スプレッドとの組み合わせ（他の配列を末尾に足す）
別配列の中身を展開して追加
const a = [1, 2];
const b = [3, 4];
a.push(...b);
console.log(a); // [1, 2, 3, 4]
ここが重要です：push(b) だと b 全体が“1要素”として入ってしまいます。要素を展開して入れたいときはスプレッド（…）を使います。
破壊的操作の注意と“非破壊”での代替
共有参照があるなら副作用に注意
const a = [1, 2];
const alias = a; // 同じ配列を指す
a.push(3);
console.log(alias); // [1, 2, 3]（同時に変わる）
ここが重要です：push は元配列を変えます。状態管理（React/Vue）や他所と共有している場合は“非破壊”に切り替えるのが安全です。
非破壊で末尾に追加（新配列を作る）
const a = [1, 2];
const added = [...a, 3]; // または a.concat(3)
console.log(added); // [1, 2, 3]
console.log(a); // [1, 2]
ここが重要です：スプレッドや concat は新しい配列を返します。差分検知や副作用回避に向いています。
push と他メソッドの違い（使い分けのコツ）
末尾操作に特化（unshift との比較）
const a = [1, 2];
a.unshift(0); // 先頭に追加。要素を全体的にずらすためコストが高い
a.push(3); // 末尾に追加。一般に高速
ここが重要です：大量データでは“先頭操作（unshift/shift）”は遅く、末尾操作（push/pop）が有利です。キュー／スタックの設計で性能差が出ます。
結合のときは concat が読みやすい
const a = [1, 2];
const b = [3, 4];
const merged = a.concat(b); // 非破壊
// または [...a, ...b]
ここが重要です：配列どうしを“つなげたい”ときは concat/スプレッド。push(…b) は「元を壊す」ため、文脈で賢く選びましょう。
実践例（積み上げ・スタック・入力収集）
スタック（LIFO）を push/pop で実装
const stack = [];
stack.push("A");
stack.push("B");
console.log(stack.pop()); // "B"
console.log(stack.pop()); // "A"
ここが重要です：push は“積む”、pop は“最後に積んだものを取り出す”。データ構造の基本として覚えておくと役立ちます。
条件付きで末尾に追加（フィルタ後に積む）
const input = ["a", "", "b"];
const result = [];
for (const s of input) {
if (s.trim()) result.push(s.toUpperCase());
}
console.log(result); // ["A", "B"]
ここが重要です：push は“集める器”と相性が良いです。条件分岐と組み合わせると読みやすいパイプラインになります。
大量追加はまとめて（性能と読みやすさ）
const arr = [];
arr.push(...Array.from({ length: 1000 }, (_, i) => i)); // 一括
ここが重要です：1件ずつループで push するより、生成してから一括 push のほうがシンプルで速いことが多いです。
よくある落とし穴と回避策
配列そのものを push してしまう
const a = [1, 2];
const b = [3, 4];
a.push(b); // → [1, 2, [3, 4]]（意図せず“入れ子”になる）
ここが重要です：要素を展開して追加したいなら a.push(…b) か a = a.concat(b) を使います。
不要な破壊で状態が壊れる
状態を共有している配列に push すると、予期せぬ画面更新漏れやロジック破綻が起きます。新配列を返す非破壊スタイル（[…a, x] / a.concat(x)）へ切り替えます。
巨大配列での先頭操作
unshift を多用すると全要素がシフトしてコスト増。可能なら末尾操作（push）に寄せるか、データ構造の設計を見直します。
まとめ
push は「末尾へ追加して新しい長さを返す」破壊的メソッドで、スタックや逐次収集に最適です。複数追加は引数を並べる、他配列を展開するならスプレッドを使う。共有状態やUIの差分検知が必要なら非破壊の代替（スプレッドや concat）を選ぶ。末尾操作は高速、先頭操作は高コスト——この前提を踏まえ、目的に応じて push と代替手段を使い分けると、初心者でも読みやすく壊れにくい配列追加が書けます。
