【JavaScript】unshiftとは？配列の先頭に要素を追加する方法を初心者向けに解説

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

はじめに

JavaScriptで配列を扱うとき、特定の位置に要素を挿入したり削除したりする操作はよくあります。
とくに「配列の先頭」に要素を追加したいケースは、ユーザーが最新のデータを先に目にするUIを作成するときや、取得したデータを時系列で管理したいときなど、多くの場面で求められます。

このような場面で役立つのが、unshiftメソッドです。
unshiftは、配列の先頭に要素を1つ以上まとめて追加し、その新しい配列の要素数を返してくれる便利なメソッドとなっています。
ただ、unshiftを使うときには特有の注意点や、他のメソッド（pushやshiftなど）との違いを把握しておくと、意図しない動作やパフォーマンスの低下を避けやすくなるでしょう。

この記事では、JavaScript初心者の皆さんでも理解しやすいように、unshiftの基本から実務での使い方、パフォーマンス面の考慮点までを順を追って解説します。
配列操作の基礎を身につけると、データを柔軟に扱えるようになり、コードの可読性や保守性も高まります。
ぜひ本記事を通じてunshiftを習得し、配列を思い通りに扱えるスキルを身につけてみてください。

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

unshiftメソッドの基本的な使い方と文法
pushやshiftなど他の配列操作メソッドとの違い
実務でunshiftを使う場面と注意点
パフォーマンス上の考慮点やトラブルシューティング

unshiftの概要

unshiftメソッドは、JavaScriptにおける配列に対して「先頭」へ要素を追加するためのメソッドです。
構文はごくシンプルで、array.unshift(要素1, 要素2, ...)のように書きます。

このとき返される値は、要素が追加されたあとの配列の要素数です。
たとえば、もともと3つの要素を持つ配列に2つの要素をunshiftした場合、配列が5要素となり、戻り値は5となります。

また、unshiftは複数の要素を同時に先頭へ追加できるので、同じ配列に対して繰り返しunshiftを呼び出さなくても、まとめて要素を先頭へ挿入できるのが特徴です。
これは配列のデータを時系列で並べ替えるようなときに役立ちます。

なぜunshiftが重要なのか

JavaScriptでは、配列の末尾に要素を追加するpushの方がよく使われます。
しかし、逆に先頭に要素を追加するunshiftは、知っておくと多様な表現が可能になるメソッドです。
たとえば、直近のイベントを冒頭に表示したり、ユーザーが新たに入力した内容を先頭へ積み重ねていく仕組みを作成したり、配列の順序をリアルタイムに変更したい場合などに便利です。

イベントのログを管理するシステムや、チャットのメッセージログなど、最新の情報を順番に前へ追加するほうが便利なUIの場合は、unshiftを活用するとコードがシンプルになります。
初心者の方はまず「配列の先頭を操作するときにはunshiftがある」ということを覚えておくと、開発で迷わずに済むでしょう。

unshiftの基本的な使い方

基本的な構文と戻り値

unshiftの基本構文は以下のとおりです。


const array = ["Apple", "Banana", "Cherry"];
const newLength = array.unshift("Orange", "Mango");

console.log(array);     // ["Orange", "Mango", "Apple", "Banana", "Cherry"]
console.log(newLength); // 5

すでに"Apple", "Banana", "Cherry"の3要素が入った配列arrayを定義しています。
array.unshift("Orange", "Mango")を呼び出すと、先頭に"Orange", "Mango"が追加されます。
unshiftが返す値は、要素追加後の配列の長さである5です。

この例から分かるように、unshiftメソッドを呼んだ時点で元の配列が破壊的に変更されるという点に注意してください。
JavaScriptの配列操作メソッドには、元の配列を変更しない非破壊的なものと、元の配列を直接変更する破壊的なものがあります。
unshiftは後者の破壊的メソッドです。

破壊的操作を行う理由

一般的に、元の配列を直接変更するとバグが発生しやすくなることもあるので、開発環境によっては破壊的操作を避けるケースがあります。
しかし、unshiftやpushなどはコード量が少なく簡潔に書けるため、リアルタイムの更新が必要な場面ではよく利用されます。

もし、元の配列を変更したくない場合は、スプレッド構文やconcatメソッドなど別の手段を検討することが多いです。
ただ、初心者の皆さんはまずunshiftが配列を直接書き換えるメソッドだという点を覚え、必要に応じて使い分けられるようになるとよいでしょう。

unshiftと他の配列操作メソッドの違い

pushとの比較

pushは配列の末尾へ要素を追加するメソッドで、戻り値も同じく要素数です。
実際のコードは以下のようになります。


const array = [1, 2, 3];
array.push(4);
console.log(array); // [1, 2, 3, 4]

一方でunshiftは配列の先頭に要素を追加します。
そのため、同じ“要素を追加する”操作でも、要素の挿入先がまったく異なる点が大きな違いです。
また、pushの場合は追加処理が最後尾に行われるため、内部的にも大きなオーバーヘッドは発生しにくいです。
unshiftは先頭に要素を追加する都合上、要素の再配置が必要になる可能性があるので、配列が非常に大きくなるほどパフォーマンス面で考慮が必要になってくることがあります。

shiftやpopとの比較

shiftは配列の先頭から要素を1つ取り除くメソッドで、取り除かれた要素を戻り値として返します。
popは配列の末尾から要素を1つ取り除くメソッドで、同じく戻り値としてその要素を返します。
要素を取り除く対象が「先頭か末尾か」という点でunshiftやpushと鏡のような関係になっています。

push: 末尾に追加
pop: 末尾から削除
unshift: 先頭に追加
shift: 先頭から削除

この4つをセットで覚えておくと、配列の先頭と末尾を自由に扱えるようになり、さまざまなロジックに対応しやすくなります。

spliceや他のメソッドとの比較

JavaScriptの配列操作では、指定した任意の位置に要素を挿入したり削除したりできるspliceというメソッドも存在します。
しかし、unshiftのように「必ず先頭に入れる」用途が多い場合には、余計な引数指定が必要ない分、unshiftの方が簡潔に書けます。

また、スプレッド構文を使って、以下のように要素を先頭に追加した新しい配列を返す書き方も可能です。


const original = [2, 3, 4];
const newArray = [1, ...original];
console.log(newArray); // [1, 2, 3, 4]

ただしこの場合は、originalは変更されず、新たな配列を生成する形になります。
用途に応じて破壊的/非破壊的な操作を使い分けられると、コードの可読性と信頼性を高めることができます。

unshiftを実務で活用するシーン

リアルタイムログの管理

アプリケーションの動作ログやエラーログなどをリアルタイムにモニタリングするときにも、unshiftは便利です。
新たなイベントが発生するたびに配列の先頭へ追加すれば、ログを上から順に最新の状態で確認できます。
この仕組みをフロントエンド上で可視化しておけば、エラートラッキングや動作解析の際に、最も新しい情報を素早く把握できます。

たとえば、フロントエンドでWebSocketを使ってサーバーからリアルタイム通知を受け取る場合、受信するたびにunshiftを使ってログ配列の先頭に情報を格納する、という構造です。
こうしておくと、画面をリロードしなくても、新着通知やログをすぐに反映できます。

unshiftのパフォーマンスと考慮点

なぜパフォーマンスに影響があるのか

JavaScriptの配列は、単純な連続領域の配列構造とは少し異なりますが、要素の先頭にデータを挿入する操作は内部的に他の要素を移動させる可能性が高まります。
要素数が増えるほど移動のコストがかさんでしまい、大きな配列で頻繁にunshiftを呼び出すと、パフォーマンスの低下が起こり得ます。

もし非常に多くのデータを扱うアプリケーションで、配列の先頭に要素を追加し続ける操作を大量に行う予定がある場合には、単純にunshiftするよりもデータ構造自体を別のものに変えた方がスムーズかもしれません。
ただし、小規模の配列や、処理回数が限定的な場合は、unshiftによる影響はあまり気にならないでしょう。

大量データを扱う代替手段

大量の要素を管理し、かつ先頭や末尾に要素を頻繁に追加・削除する場合、LinkedListのようなデータ構造を使う選択肢があります。
ただし、JavaScriptの標準ライブラリにはLinkedListは用意されていないため、自前で実装するか、ライブラリに頼るかの検討が必要です。

また、すでに紹介したように、要素を先頭に追加するだけであればスプレッド構文で新たな配列を生成する方法もあります。
作りたい機能や対象データの規模に応じて、unshiftを使うかどうかを適切に判断しましょう。

エラーやトラブルシューティング

思わぬ配列の変更に注意

unshiftは「破壊的」メソッドなので、同じ配列を別の変数でも参照している場合には注意が必要です。
たとえば、以下のように同じ配列を参照していると、unshiftで挿入を行った結果、意図しない変数も変更を受けます。


const original = [10, 20, 30];
const anotherRef = original; // 同じ配列を参照
original.unshift(5);
console.log(anotherRef); // [5, 10, 20, 30]

このようにanotherRefも同じ配列を指しているため、originalをunshiftした時点でanotherRefの中身も書き換えられます。
こうした挙動が混乱を生む可能性があるので、複雑なアプリケーションではどこで元の配列を変更しているかをきちんと把握しておきましょう。

複数の要素を追加するときの不備

unshiftは複数の引数を取れますが、引数を正しくカンマ区切りで指定していないと、意図しない動作をする可能性があります。
特に、一度にまとめて配列を追加したいのか、個別の要素を複数追加したいのかを混同してしまうことがあります。


const numbers = [3, 4, 5];
// 配列[1,2]を一つの要素として先頭に挿入
numbers.unshift([1,2]);
console.log(numbers); // [[1,2], 3, 4, 5]

上記のようにnumbers.unshift([1,2])と書くと、先頭に「要素としての配列」が追加される形になります。
もし、1と2を個別に追加したいなら、numbers.unshift(1, 2)と書く必要があります。

複数の要素を追加するときは、配列の中身を展開すべきか、そのまま配列として追加するのかをはっきりさせておきましょう。

unshiftを活用する上級テクニック

関数型プログラミングでの応用

関数型プログラミングを重視するプロジェクトでは、配列を破壊的に操作するunshiftやpushをあまり使わないことがあります。
しかし、あえてunshiftを使い、必要があればシャローコピー（スプレッド構文など）を作成し直すという方法も、一部のプロジェクトでは許容されています。
実際の要件に応じて、配列を破壊的に操作したほうがスッキリ書けるのか、非破壊的に扱ったほうが安全性が高いのかを検討するケースもあるでしょう。

メソッドチェーンの活用

unshiftが返すのは「新しい配列の要素数」です。
そのため、戻り値を利用してすぐに他の操作をチェーンするのは難しいかもしれません。
もしメソッドチェーンのような書き方を好むなら、unshiftのあとの処理を続けて書くのではなく、一度unshiftを呼び出したうえで配列に対する別のメソッドを適用するというスタイルを取ります。


const arr = [2, 3];
arr.unshift(1);
// 戻り値は配列の長さ
arr.filter(num => num > 1).map(num => num * 2);

ここでは、arr.unshift(1)の戻り値は3ですが、続けてfilterやmapを呼びたいときはarr自体に対してチェーンする必要があるため、一段階変数を挟むか、unshiftを呼び出したあとに別のステップを踏んでください。

まとめ

unshiftメソッドは、配列の先頭に要素を追加したいときに真っ先に思い浮かべると便利なメソッドです。
pushやpop、shiftと同様、破壊的に配列を操作するため、配列の参照が複数箇所で共有されている場合は影響範囲を把握しましょう。

また、大量の要素を扱う場面ではパフォーマンス上の懸念もあるため、配列のサイズや操作回数を考慮し、場合によってはほかのデータ構造を検討することが必要です。
それでも、実装の手軽さやコードの簡潔さを優先するなら、unshiftは大いに活用する価値があります。

本記事を通して、unshiftの基本から実務での応用、ほかのメソッドとの違いや注意点、パフォーマンスの側面まで一通り理解できたのではないでしょうか。
配列をうまく扱えるようになると、JavaScriptでの開発がずっと楽になります。

ぜひ皆さんのプロジェクトで、unshiftを上手に活用してみてください。