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

プログラミング言語•2025/2/15

はじめに

JavaScriptで開発を進めるうえで、配列は欠かせない存在です。
文字列や数値、オブジェクトなど、あらゆるデータを順序立てて管理できるため、小規模から大規模なプログラムまで幅広く活用されます。
本記事では、配列へ要素を追加する様々な方法について解説します。

配列へ要素を追加するときのメソッドには、代表的なものとして push や unshift、 splice、 concat などがあります。
さらに、配列リテラルを活用するスプレッド演算子も便利な選択肢です。

これらの方法は単に配列の末尾に要素を加えるだけでなく、先頭へ追加したり、配列の途中へ挿入するなど、ニーズに応じて使い分けが可能です。
それぞれの特徴や実務での活用シーン、注意点などを詳しく紹介しながら、初心者でもわかりやすい形でコード例と合わせて説明していきます。

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

JavaScriptにおける配列の基本的な仕組み
push、unshift、splice、concat、スプレッド演算子による要素追加の具体的な使い方
各メソッドが持つ特徴と、実務での具体的な活用シーン
配列操作時のパフォーマンスや注意点
複数要素を同時に追加する方法
サンプルコードを通じた実践例

JavaScript配列の基本

配列とは何か

配列とは、一連のデータを順序立てて格納するためのデータ構造です。
JavaScriptの配列は、要素として数値・文字列・オブジェクトなど、さまざまな型を混在させることもできます。
また、長さ（要素数）を途中で変更することも柔軟にできます。

プログラムが大きくなると、データ管理が煩雑になります。
そのとき、配列を使うと複数のデータをまとめて扱えるため、コードの管理がしやすくなります。

配列が使われるシーン

プログラミングの現場では、配列を使って以下のような処理を行うケースがよくあります。

会員情報の一覧をまとめて管理する
タスク一覧や商品一覧を管理する
ユーザーから入力された複数のデータを一時的に蓄積する

このように、列挙したいデータを順序立てて保持したいときに役立つのが配列です。

配列の宣言と初期化

JavaScriptで配列を作る代表的な方法は以下の2種類です。

1. リテラル表記


const fruits = ["apple", "banana", "cherry"];

中括弧 [...] で要素を並べていきます。

2. Arrayコンストラクタ


const fruits = new Array("apple", "banana", "cherry");

このようにコンストラクタを使う方法もありますが、リテラル表記のほうが簡潔です。

どちらを使っても機能的には大きな違いはありません。
しかし、多くの場合はリテラル表記がわかりやすいため、よく利用されます。

要素を追加するための代表的な方法

pushメソッド

push は、配列の末尾に要素を追加するためのメソッドです。


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

「すでにあるリストの最後に新しいデータを加えたい」という場面で、最も直感的に使えるのが push です。

unshiftメソッド

unshift は、配列の先頭に要素を追加するためのメソッドです。


const fruits = ["apple", "banana", "cherry"];
fruits.unshift("orange");
console.log(fruits);
// ["orange", "apple", "banana", "cherry"]

末尾ではなく、先頭に追加したい場合は unshift を使います。
例えば、新しく受け取った重要な情報を最初に持ってきたいときなどに便利です。

spliceメソッド

splice は、配列の途中にある要素を追加・削除・置き換えなど、柔軟に操作できるメソッドです。
要素を追加したい場合は以下のようにします。


const fruits = ["apple", "banana", "cherry"];
fruits.splice(1, 0, "orange");
console.log(fruits);
// ["apple", "orange", "banana", "cherry"]

最初の引数は操作を開始する位置、次の引数は削除する要素数です。
そして、追加したい要素を後ろに並べることで、好きな位置に挿入できます。

concatメソッド

concat は、複数の配列を結合して、新しい配列を作るメソッドです。
ただし、1要素でも配列として扱えば、配列に要素を追加したのと同様の働きをさせることができます。


const fruits = ["apple", "banana", "cherry"];
const moreFruits = ["orange"];
const result = fruits.concat(moreFruits);
console.log(result);
// ["apple", "banana", "cherry", "orange"]

元の配列 fruits は変更されず、新しい配列 result が作られるので、immutable（元データを変更しない）な操作をしたい場合に便利です。

スプレッド演算子

スプレッド演算子 ... を使うことで、配列を展開して要素を取り出すことができます。
要素を追加した新しい配列を簡潔に作りたい場合は、以下のように書けます。


const fruits = ["apple", "banana", "cherry"];
const result = [...fruits, "orange"];
console.log(result);
// ["apple", "banana", "cherry", "orange"]

結合したい複数の配列をスプレッド演算子で展開すれば、concat と同じような処理ができます。
こちらも元の配列を変更しないため、安全に扱えるというメリットがあります。

それぞれのメソッドの実務利用シーン

pushメソッドの実務例

例えば、タスク管理システムで新しいタスクを追加するときに push を使うことがあります。
ユーザーから入力を受け取ったタスクを、すでにあるタスクリストの末尾に加えるだけなので、実装がシンプルです。


const tasks = ["洗濯", "買い物"];
function addTask(taskName) {
  tasks.push(taskName);
  // 更新されたtasksを表示したり、UIを再描画したりする
}

このように、末尾へ次々と要素を加えるときには push が最適です。

unshiftメソッドの実務例

重要度の高い情報を先頭に配置して、すぐにユーザーの目につくようにしたいケースがあります。
例えば、緊急のお知らせやユーザーからのメッセージを先頭に積み上げる実装は unshift で実現できます。


const messages = ["既存メッセージ1", "既存メッセージ2"];
function addImportantMessage(msg) {
  messages.unshift(msg);
  // 最新メッセージを先頭で表示するUIを再描画
}

データの先頭に要素を加えていくときにとても便利です。

spliceメソッドの実務例

順序を維持しつつ、中間に新しいデータを挿入しなければならないときは splice が選択肢に入ります。
たとえば、商品リストに対して特定の位置に割引対象商品を挿入するケースなどが考えられます。


const products = ["Tシャツ", "ズボン", "ジャケット"];
// ズボンの直後にセール対象の新商品を挿入
products.splice(2, 0, "セール品(薄手パーカー)");
console.log(products);
// ["Tシャツ", "ズボン", "セール品(薄手パーカー)", "ジャケット"]

削除や置き換えも可能なので、一部の要素を入れ替えたいときにも対応できる柔軟なメソッドです。

concatメソッドの実務例

リストを複数まとめたり、元の配列を変えずに追加した配列を作成したいときに concat は有力です。
ショッピングカートの例を挙げると、既存のカートアイテムに新着のアイテムをまとめて追加し、新しいカートとして扱いたい場合があります。
そんなときに concat を使うと、元のカートの状態を保持しながら、新しいカートも作れます。


const cart = ["商品A", "商品B"];
const newItems = ["商品C", "商品D"];
const updatedCart = cart.concat(newItems);

既存の cart はそのままで、updatedCart にすべてのアイテムが入ります。

スプレッド演算子の実務例

Reactなどのフロントエンドフレームワークで、状態管理を行う際にスプレッド演算子をよく使います。
状態を直接変更するのではなく、新しい配列を生成してUIの更新トリガーにする方法が一般的だからです。


const [cart, setCart] = useState(["商品A", "商品B"]);

function addNewItem(item) {
  setCart([...cart, item]); 
}

この例のように、状態管理において元の配列を更新するのではなく、新しい配列を作るスタイルが好まれる現場では、スプレッド演算子が重宝されます。

パフォーマンスや注意点

pushとunshiftのパフォーマンス

push は末尾に要素を追加するため、既存の要素をずらす必要がありません。
一方、 unshift は先頭に要素を挿入するため、全要素のインデックスをシフトする必要があります。

要素数が多い配列で頻繁に先頭追加を行うと、パフォーマンスに影響が出る可能性があります。
もちろん、小規模なアプリケーションではあまり気にする必要はありませんが、大量のデータを扱うなら念頭に置いておくべきポイントです。

spliceの柔軟性と罠

splice は挿入だけでなく削除や置換も行えるため、とても便利です。
ただし、操作対象の範囲や挿入位置が複雑になると、可読性が落ちることがあります。
長い配列で何度も splice を行うと、配列全体の構造が把握しにくくなる場合もあります。

意図しない位置に追加や削除を行ってしまう可能性があるので、メンテナンス時には慎重に扱うことが大事です。

concatとスプレッド演算子の比較

concat もスプレッド演算子も、どちらも元の配列を破壊しないという大きなメリットを持っています。
コードの書き方や好みによって選ぶことが多いですが、一部の環境ではスプレッド演算子が使えないケースもあるかもしれません。
ただし、現在は一般的に広くサポートされるようになっているため、対応状況を確認しながら好きな方を使うケースが増えています。

スプレッド演算子のほうがコードが短くなる場合が多いので、可読性を優先するならスプレッド演算子を選ぶという考え方もあります。

複数要素の同時追加

pushを用いた複数要素追加

push では、カンマ区切りで複数の要素を連続して追加できます。


const fruits = ["apple"];
fruits.push("banana", "cherry");
console.log(fruits);
// ["apple", "banana", "cherry"]

複数の要素を一気に末尾へ追加したい場合には便利です。

spliceを用いた複数要素追加

splice も同様に、複数の新しい要素を挿入できます。


const fruits = ["apple", "banana"];
fruits.splice(1, 0, "cherry", "orange");
console.log(fruits);
// ["apple", "cherry", "orange", "banana"]

先頭から1番目と2番目の間に、2つの要素を同時に挿入しています。
要素数が多くなるほど、インデックス指定を間違えないように注意してください。

concatやスプレッド演算子を利用する方法

すでに1つの配列にまとめられた複数の要素を追加したい場合、concat やスプレッド演算子が役立ちます。
例えば、以下のように2つの配列を1つにまとめるケースです。


const fruits = ["apple", "banana"];
const newFruits = ["cherry", "orange"];
// concat
const combined1 = fruits.concat(newFruits);
// spread
const combined2 = [...fruits, ...newFruits];

どちらも同じ結果を返しますが、スプレッド演算子だと短い記述で済むことが多いです。

実践的なサンプルコード

タスク管理アプリ例

タスク管理アプリでは、新しいタスクを追加する処理が頻繁に行われます。
以下のサンプルコードでは、入力フォームから受け取ったタスク名を、既存のタスクリストに追加する仕組みを実装しています。


let tasks = ["部屋の掃除", "郵便物を出す"];

function addNewTask(taskName) {
  tasks.push(taskName);
  console.log(tasks);
  // ["部屋の掃除", "郵便物を出す", "新しいタスク"]
}

// 新しいタスクを追加
addNewTask("新しいタスク");

配列 tasks をグローバルや状態管理の中で管理し、 push を使って新タスクを末尾に追加している簡単な例です。

ショッピングカート例

ショッピングカートでは、既存のカートアイテムに新たに選択されたアイテムを追加する場合があります。
ユーザーが「カートに入れる」ボタンを押すごとに push するやり方もありますが、すでに複数アイテムをまとめた配列を追加するなら concat も有用です。


let cart = ["商品A", "商品B"];

function addToCart(newItems) {
  // newItemsが配列の場合、concatでまとめて追加
  cart = cart.concat(newItems);
  console.log(cart);
}

// 複数アイテムを同時に追加する
addToCart(["商品C", "商品D"]);

concat を使うことで元の配列をそのまま保持しつつ、新しい配列で cart を置き換えることができます。

配列を活用した機能拡張

mapやfilterを組み合わせる例

要素を追加するだけでなく、追加したあとの配列に対して一括で処理を行いたいケースがあります。
例えば、価格情報をまとめた配列に消費税を上乗せして表示する場合など、 map を使うと簡単に処理できます。


const prices = [100, 200];
const newPrices = [300, 400];

// 配列にまとめて追加
const allPrices = [...prices, ...newPrices];
const taxed = allPrices.map(price => price * 1.1);
console.log(taxed);
// [110, 220, 330, 440]

このように、スプレッド演算子を使って要素を追加し、その結果に対して map を呼び出すという流れは、とても読みやすい構成です。

spread構文での要素追加とコピー

スプレッド演算子を使うと、コピーや部分的な差し替えがしやすいという利点があります。
例えば、既存の配列をコピーしながら、一部の値だけを変えたいときなどに利用できます。


const userProfile = {
  name: "太郎",
  tags: ["初心者", "JavaScript好き"]
};

function addNewTag(profile, newTag) {
  return {
    ...profile,
    tags: [...profile.tags, newTag]
  };
}

const updatedProfile = addNewTag(userProfile, "新しいタグ");
console.log(updatedProfile);
// { name: "太郎", tags: ["初心者", "JavaScript好き", "新しいタグ"] }

この例では、オブジェクトにもスプレッド演算子を適用していますが、配列でも同様に活用できます。

mutableとimmutableの考え方

なぜ重要なのか

JavaScriptの配列メソッドには、元の配列を直接変更するものと、新しい配列を返すものがあります。
大規模なプロジェクトでは、直接変更（mutable操作）を多用するとバグの原因になりやすい傾向があります。
配列の状態がどこで書き換わっているのか追いかけにくくなるためです。

immutableな操作を意識してコードを書けば、どこでデータが変更されたかがわかりやすくなります。
そのため、バグを減らし保守性を高める効果も期待できます。

mutable操作とimmutable操作

mutable操作の例: push, unshift, splice
これらは元の配列そのものを変更します。
immutable操作の例: concat, スプレッド演算子
これらは元の配列を変更せず、新しい配列を生成します。

複雑な状態管理が必要ない小規模なスクリプトでは、mutable操作で十分シンプルに実装できるでしょう。
一方、大規模開発やフロントエンドフレームワークを使うケースでは、バグ回避や状態管理の効率化を考えて、immutable操作を好むことが多いです。

大きなプロジェクトではコードの可読性と安全性を重視し、新しい配列を返すメソッドを積極的に使う考え方が増えています。

まとめ

配列の操作は、プログラムの中でも特に頻繁に行われる内容です。
要素を追加する方法だけでも、 push や unshift、 splice、 concat、スプレッド演算子など、多彩な選択肢があります。

末尾追加のpush はシンプルで、多くの場面で使いやすい
先頭追加のunshift は重要情報を前に持ってくる際に便利
途中挿入のsplice は柔軟だが、扱う位置を間違えないように注意が必要
concat やスプレッド演算子 は元の配列を変更せずに、新しい配列を生成するため、大規模開発ではバグを減らしやすい

実務ではこれらをうまく使い分けることで、データ処理を効率よく行えるようになります。
まずは自分が実装したい挙動に合ったメソッドを選び、コードを整理しながら書いてみると、よりスムーズに開発を進められるでしょう。

追加の方法だけでなく、「配列を破壊的に変更するか」「新しい配列を生成するか」を意識して書くと、あとからコードを読む人も理解しやすくなります。