【JavaScript】pushとは？配列に要素を追加する方法を初心者向けにわかりやすく解説

はじめに

JavaScriptを使い始めると、まず最初に学ぶことになるのが配列と呼ばれるデータの集まりです。
配列は複数の要素をまとめて管理できるため、さまざまな場面で利用されます。
そして、その配列に新しいデータを追加したいときに便利なのが、pushメソッドです。

プログラミングを始めたばかりの方でも、配列とpushメソッドは比較的わかりやすい概念です。
しかし実際に使っていくと、「なぜこの書き方で追加できるのか？」や「pushメソッド以外で同じことはできないの？」など、さまざまな疑問が湧いてくるかもしれません。
そこで本記事では、pushメソッドの使い方から実務での具体的な活用シーン、さらにpushメソッドを扱う際に知っておきたいポイントなどを分かりやすく解説していきます。

最終的には、pushメソッドによる配列操作をしっかり理解し、初心者の方でも「どうやって配列に要素を追加すればいいのか」や「pushメソッドを使うとどんなメリットがあるのか」を整理できるようになるはずです。
ぜひ最後まで読んでみてください。

この記事を読むとわかること

• JavaScriptの配列とpushメソッドの基本的な仕組み
• pushメソッドの具体的な書き方と、他のメソッドとの違い
• 実務での活用例や注意点
• pushメソッドを使った効率的な配列操作のやり方
• エラーやバグを防ぐためのポイント

pushメソッドの概要

JavaScriptで配列に要素を追加する場合、pushメソッドはかなりシンプルで扱いやすい手段です。
例えば、const array = [1, 2, 3] という配列に新しい要素を追加したい場合、array.push(4) のように記述するだけで末尾に4が追加されます。

このpushメソッドは「末尾」に要素を追加することが特徴です。
同じように要素を追加する方法として unshift() というメソッドもありますが、unshiftは配列の先頭に要素を追加します。
pushとunshiftは似ているようで挙動が異なるので、用途に応じて使い分けることが重要です。

pushメソッドを覚えておくと、小規模な配列操作だけでなく、将来的に開発していく上で必要になる多くの場面に応用が効きます。
たとえば、ユーザーが操作したデータをどんどん配列に追加して管理したいときなど、pushはよく使われるメソッドの一つです。

pushメソッドの基本的な書き方

基本的なシンタックス

pushメソッドの使い方自体はいたってシンプルです。
以下のサンプルコードを見てください。

コピー
const fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]

1行目で「apple」と「banana」の2要素を持つ配列 fruits を定義しています。
2行目で fruits.push("orange") を実行すると、配列の末尾に「orange」が追加されます。
最後にコンソールへ出力してみると、ちゃんと新要素が加わっているのが確認できるでしょう。

pushメソッドは複数の要素を一度に追加することもできます。
例えば fruits.push("grape", "lemon") のようにカンマ区切りで複数要素を指定でき、それらがすべて末尾に追加されます。

pushメソッドが返す値

pushメソッドの戻り値は「変更後の配列の長さ」です。
つまり、要素を追加したあとの配列の長さ（要素数）が数値として返ってきます。
たとえば先ほどの例で fruits.push("orange") を呼び出すと、結果として 3 が返される仕組みになっています。

この戻り値を活用すると、例えば配列の新しい長さをその場で使いたいときに便利です。
ただし多くの場合、pushメソッドは末尾に要素を足すことが主目的なので、戻り値まで意識するシーンはそこまで多くありません。
しかし返り値が配列そのものではなく「配列の長さ」だという点は頭の片隅に置いておきましょう。

他のメソッドとの違い

pop、shift、unshiftとの比較

配列に関わるメソッドはいろいろありますが、pushと特に対比されるのが pop(), shift(), unshift() です。
以下に簡単な役割を示すと、次のような形になります。

いずれも破壊的なメソッドで、元の配列そのものを変更する点が特徴です。
特に push と unshift は「追加」、pop と shift は「削除」を行うため、それぞれがペアのように捉えられます。

concatやスプレッド演算子との違い

配列を結合する方法としては concat() やスプレッド演算子 (...) も使えます。
ただし、concatの戻り値は結合後の新しい配列を生成する方法であり、もとの配列は変更されません。
一方で push は元の配列を直接変更することになります。

スプレッド演算子も新しい配列を生成するため、元の配列を残しておきたいときに便利です。
pushと区別して使い分けることで、意図せず配列が書き変わらないように気を付けることができます。

実務での活用シーン

ショッピングカートに商品を追加するケース

現場でよくあるのは、ECサイトなどのショッピングカート機能です。
ユーザーが「カートに追加する」ボタンを押すと、その商品情報を配列の末尾にpushしていくという仕組みが一般的です。
例えば以下のようなコードで商品リストを管理するとイメージしやすいでしょう。

コピー
const cart = [];
function addToCart(item) {
  cart.push(item);
  console.log(cart);
}

このように cart という配列を宣言し、ユーザーがカート追加操作をしたらその商品の情報（item）をpushします。
pushを使うことで、常に末尾に新しい商品が積み上がっていくようなイメージになります。
この操作は追加が直感的でわかりやすいため、多くの開発現場で採用されています。

フォーム入力値を順次格納するケース

フロントエンドの開発では、フォームから入力を受け付けて、それらの値を配列に蓄積するケースもあります。
たとえば複数行の入力が連続で行われ、それぞれを配列にしまっておきたいときなどです。
pushを使えば、入力ごとに formData.push(currentInput) のように格納できるので、次の段階での処理がスムーズになります。

入力値をどのように保持し、どのタイミングでサーバーへ送るかは実装次第ですが、pushメソッドを使用するのは基本的なパターンとしてよく見られます。
特に最終的に「まとめて送信したい」ときは、ひとまず配列に貯めていくという設計が扱いやすいです。

まとめてログを取るケース

アプリケーションの中で発生した各種イベントをログとして溜めておきたい場合にも、配列とpushは便利です。
イベントが発生するたびに eventLogs.push(eventObject) といった形で末尾に追記し、ある程度の量になったらサーバーへ送信するという流れを組むことができます。
こうしたケースでもpushのシンプルさと、末尾に追加される構造がわかりやすいので初心者でも管理しやすいでしょう。

pushメソッドの注意点

破壊的メソッドである点

pushメソッドは破壊的メソッドです。
これは実行するたびに配列の中身が直接変更されることを意味します。
場合によっては、同じ配列を別の場所でも参照しているときに、pushで要素が増えてしまうことが意図しない挙動を引き起こすかもしれません。

たとえば、ある状態の配列を保持しておきたい場合は、pushのような破壊的操作を避けて、新しい配列を作る concat() やスプレッド演算子を使う方が好ましいケースもあります。
どちらを使うべきかは、開発している状況や要件に応じて判断することが必要です。

lengthプロパティの自動更新

pushを呼び出すと、配列の要素数を表す length プロパティが自動的に更新されます。
配列に要素を追加したあとで console.log(array.length) とすれば、push前よりも数値が増えていることがわかるはずです。
この更新が自動で行われる点は便利ですが、複数の箇所で length を参照しているときは、想定外に値が変わる可能性があるので注意が必要です。

また、配列の長さを手動で変更すると要素が削られるなどの挙動もあり得ますが、こうしたテクニックは初心者のうちはあまり使う機会がないでしょう。
pushと組み合わせて使う場面も少ないと思われますので、最初は気にしなくて大丈夫です。

pushメソッドの応用

複数要素を一度に追加

先ほど少し触れたように、pushメソッドは1回の呼び出しで複数の要素を追加することもできます。
実際の書き方は次の通りです。

コピー
const numbers = [1, 2];
numbers.push(3, 4, 5);
console.log(numbers); // [1, 2, 3, 4, 5]

このようにカンマ区切りで連続して書くと、それらの値がすべて末尾に連続して追加されます。
配列の合体であれば concat() を使うのも手ですが、pushを連用するよりもこのような書き方のほうがすっきりする場合もあります。

ループとの組み合わせ

配列に対してループ処理を行いながらpushを使うと、別の配列をもとに新しい配列を作りたいときなどにも役立ちます。
例えば次の例を見てみましょう。

コピー
const source = [1, 2, 3];
const result = [];

for (let i = 0; i < source.length; i++) {
  const newValue = source[i] * 2;
  result.push(newValue);
}

console.log(result); // [2, 4, 6]

このコードでは source にある値を2倍にし、それを result にpushしています。
pushでひとつずつ結果を蓄えることにより、元の配列を参照しながら新しい配列を作り出しているわけです。
このようなパターンは、処理内容が複雑になってくるほど使い所が増えるでしょう。

エラーやバグを防ぐためのポイント

pushと参照渡しの問題

JavaScriptの配列は、オブジェクトと同じく参照型として扱われることが多いです。
同じ配列を複数の変数で共有していると、いずれかでpushを行ったタイミングで別の変数から見ても要素が勝手に増えてしまうことがあります。
意図的にそうする場合は問題ありませんが、参照渡しによる予期せぬ挙動に気をつけましょう。

もし、オリジナルの配列を変更したくないときは、pushではなく concat() やスプレッド演算子で新たな配列を生成するほうが安全です。
参照による変更を見落としてバグになるケースは、初心者のうちは特に多いので注意を払うと良いでしょう。

pushし過ぎによるメモリ消費

pushそのものに大きな負荷はありませんが、無制限に要素を追加し続けると、配列のサイズが膨大になってしまう場合があります。
長時間稼働するアプリケーションで、何らかの理由で削除処理を忘れていたり、必要のないデータを延々とpushし続けていると、気づいたらメモリ不足に陥ってしまうこともあります。

たとえばユーザーからの入力を無制限にpushで貯め続けて、どこかで消すのを忘れているようなケースは要注意です。
こまめに不要になったデータを破棄したり、最大保有数を決めるなどの対策を立てておくと、予防になるでしょう。

pushメソッドを使うときに知っておきたい便利テクニック

配列同士の結合に活用

pushは、配列の要素を一つずつ追加する動きですが、配列自体を展開して追加する方法もあります。
たとえば、スプレッド演算子で一度に複数の要素をpushするアプローチが可能です。

コピー
const arr1 = [1, 2];
const arr2 = [3, 4];
arr1.push(...arr2);
console.log(arr1); // [1, 2, 3, 4]

こうすると arr2 の要素3と4を、それぞれ arr1 の末尾に追加できます。
arr1.concat(arr2) と同じ結果ですが、arr1 を直接変更したい場合には便利でしょう。

条件付きでpushする

実際の開発では、「ある条件を満たしている場合のみpushしたい」シーンもよくあります。
そのようなときは、単に if 文や三項演算子を併用して書くことになります。

コピー
function addItemIfValid(array, item) {
  if (typeof item === "number" && item > 0) {
    array.push(item);
  }
}

ここでは引数 item が数値で、しかも0より大きいときだけ array に追加しています。
こうしたバリデーションの存在は、後々のトラブルを回避する上で重要です。

pushの代わりに使われることのあるメソッドや書き方

pushメソッドを使うか否かで迷う場合、一般的には「もともとの配列を変更したいのかどうか」が基準になります。
たとえば新しい配列を作りたいなら push は向いておらず、スプレッド演算子や concat() が適しているでしょう。
ここではよく比較されるメソッド・書き方をざっくり振り返ります。

push vs concat

• push
  • 元の配列を直接変える
  • 複数要素を追加可能
  • 戻り値は変更後の配列長
• concat
  • 新しい配列を返す
  • 複数の配列を繋げるのが得意
  • 元の配列をそのまま残す

push vs スプレッド演算子

• push
  • 直接配列をいじりたい場合に向いている
  • 単純明快な書き方
• スプレッド演算子
  • 配列を展開して新たな配列を生成する際に便利
  • 元の配列を変更したくない場合に使う

このように「破壊的か非破壊的か」で大きく違ってくるので、要件に合わせて選択することが大切です。

pushメソッドを使う際のベストプラクティス

使いどころを明確にする

pushメソッドは直接配列を変更するため、変更がどこで起きるかを予期しやすい小さなスコープや機能に限定して使うのがおすすめです。
大規模なアプリケーションでは、あちこちでpushを呼び出していると追跡が難しくなることもあります。
そういった場合は、配列操作を行う専用のモジュールや関数を設けて、pushを含む様々な操作をそこに集約すると管理が楽になるでしょう。

適切なネーミングとコメント

実際のコードには、pushで何を配列に追加しているのか分かりやすい名前をつけたり、適度にコメントを書いたりすると良いです。
例えば addUserNameToList() のように、関数名から「ユーザー名をリストへ追加する」という意味が伝わると可読性が高まります。
pushのようなシンプルなメソッドでも、チーム開発では「何が追加されているのか」がひと目でわからないと混乱することがあるのです。

テストコードでの検証

pushメソッドの動作そのものはシンプルですが、上で述べたように参照渡しなどで思わぬ不具合が起こることがあります。
実務ではテストコードを用意して、pushする前後で配列がどう変化したかなどを細かく検証しておくと安心です。
手動で動かすだけでなく、自動テストの仕組みに組み込んでおけば、思わぬ改修の影響で配列操作が壊れるリスクを減らせます。

pushメソッドに関するよくある勘違い

pushを呼ぶと配列の中身ごと全部帰ってくると思う

pushの戻り値は、あくまで変更後の配列の長さです。
配列そのものが戻るわけではないため、これを誤解していると意図した値が取得できずに困ることがあります。
もしpush実行後の配列自体を変数に格納したい場合は、配列の参照を改めて取得するか、push呼び出し前後で同じ配列を使うようにしましょう。

pushした要素が重複しないと勘違いする

pushは単純に末尾に要素を追加するだけなので、重複チェックなどは行いません。
全く同じ要素が複数回pushされると、配列の中に重複するデータが並びます。
もし重複を避けたい場合は、push前に includes() や indexOf() で確認するといった工夫が必要です。

pushメソッドを活用した簡単なサンプルプロジェクト例

以下のようなコードは、フォームから入力されたテキストをpushで配列に追加し、ボタンを押すたびにリスト表示を更新するようなイメージのものです。

コピー
const messages = [];
const inputEl = document.getElementById("messageInput");
const listEl = document.getElementById("messageList");
const buttonEl = document.getElementById("addButton");

buttonEl.addEventListener("click", () => {
  const text = inputEl.value;
  if (text) {
    messages.push(text);
    // リストを再描画
    listEl.innerHTML = "";
    for (let i = 0; i < messages.length; i++) {
      const li = document.createElement("li");
      li.textContent = messages[i];
      listEl.appendChild(li);
    }
    inputEl.value = "";
  }
});

このように、ボタンを押すたびに messages 配列へ新しいテキストがpushされ、リストとして表示されます。
とても基本的なサンプルですが、pushメソッドの「配列末尾に要素を足す」という挙動がわかりやすく確認できるでしょう。
実際の開発でも、ユーザーの操作をトリガーにしてpushを活用する場面は多々あります。

pushメソッドと非同期処理

JavaScriptでは、非同期的に取得したデータをpushで配列にどんどん蓄えていくような実装もよくあります。
例えば、サーバーから段階的に受け取ったデータを、一つずつpushしながら表示していく場合などです。
この場合、データを受け取るタイミングや順序が不確実でも、pushなら順番通りに末尾へ追加していけるという利点があります。

一方で、非同期処理の途中で配列の状態を参照すると、push前かpush後かによって取得される内容が異なるので注意が必要です。
そのため、非同期のタイミングを正しく把握しながらpushを扱えるようにしておくと、混乱を防ぐのに役立ちます。

チーム開発でpushを扱うときのポイント

チーム開発では、配列を共有して複数の箇所で操作することが多くなります。
pushで配列が変わると、それに依存したロジックも動作が変わるかもしれません。
以下のようなポイントを意識しておくと良いでしょう。

操作範囲を限定する

配列の操作を行うモジュールやクラスを設け、そこでのみpushなどの破壊的操作をするようにすると、予期せぬ変更が起きにくくなります。

バージョン管理やテストの徹底

pushによる変更が重大な不具合を生まないように、自動テストやコードレビューなどのプロセスを強化しておくと安心です。

状態管理ライブラリの利用 (必要に応じて)

Reactなどのフレームワークを使う場合は、ReduxやVuexなど状態管理ライブラリを導入すると「どこで配列を変更しているか」が追いやすくなります。

pushメソッドの実行時間やパフォーマンス

pushメソッド自体は、配列の末尾に要素を追加するため、JavaScriptの内部処理的にも比較的効率が良いとされています。
配列の先頭に要素を追加する unshift() の方が、要素の移動が必要になるため、通常はpushより処理コストが高いといわれます。
大量の要素を追加する場面でも、pushのほうが低負荷になりやすいです。

ただし、非常に大きな配列に頻繁にpushする場合は、メモリ消費との兼ね合いがあります。
その点はpushだけの問題ではなく、アプリ全体の設計によるので、一概にpushが遅いといった話ではありません。

pushメソッド以外で配列を拡張する手法

もし配列を直接変更したくないなら、以下のような方法があります。

• concat() で新たな配列を作る
• スプレッド演算子 (...) を使って新しい配列を作る
• .map() や .filter() などの配列メソッドで再生成する

例えば非破壊的な配列操作を好むプログラミングスタイル（関数型プログラミングに近い考え方）では、pushよりもこれらの手法を使うことが多いです。
一方、シンプルに末尾追加だけを繰り返すケースなら、pushのほうが効率的かもしれません。

pushメソッドの学習をさらに深めるためのヒント

pushメソッド自体は簡単ですが、実際に使い込むと「どこで配列を変えるか」を設計レベルで考えるきっかけになります。
同じ配列への操作でも、pushするタイミングを変えるだけでアプリの動きが大きく変わる場合があります。
こういった点に着目しながら様々なサンプルコードを書いてみると、より理解が深まるでしょう。

実務では、大量のデータを取り扱う場合や、他のライブラリと組み合わせるケースも多々あります。
pushを軸に配列操作を行うのか、非破壊的なメソッドをメインにするのかを意識できると、コードの保守性が上がり、チーム内での共有もしやすくなります。

まとめ

ここまで、JavaScriptで配列に要素を追加する際に使われるpushメソッドについて、基本的な使い方から実務での応用例、注意点に至るまで幅広く紹介してきました。

pushメソッドは配列の末尾に要素を追加するシンプルなメソッドで、特に小規模な追加操作では非常に扱いやすい存在です。
しかし破壊的メソッドであるため、配列がどこから参照されているかを把握しないまま乱用すると、意図せぬバグにつながることもあります。

複数の要素を一度に追加したり、非同期処理と組み合わせたりするなど、pushメソッドにはさまざまな活用方法が存在します。
実際の開発プロジェクトでは、pushによるシンプルなアプローチが十分有効な場面も多いですし、一方で配列を直接変更したくない場面では別の手段を採る方が適切な場合もあります。

ぜひ、この記事を参考にしながらpushメソッドの使い方をマスターしてみてください。
配列操作に対する理解を深めることは、JavaScriptの学習全般においても大きなメリットとなるはずです。
あなたのプロジェクトでpushメソッドを活用し、便利な配列操作を実現していきましょう。