JavaScriptのshift()とunshift()メソッド徹底解説：配列の先頭を操作する方法

はじめに

JavaScriptのshift()メソッドは、配列の先頭にある要素を取り除き、残りの要素を一つずつ前にずらします。一方、unshift()メソッドはその逆の動作を行い、配列の先頭に新しい要素を追加して、既存の要素を後ろへずらします。

リストの先頭に項目を追加したり削除したりしたい場面はよくあります。たとえば、今月のトップセールス担当者のランキングを作成するなら、1位の担当者をリストの先頭に配置したいはずです。

そんなときに役立つのが、shift()とunshift()です。これらはpush()やpop()と似たメソッドですが、push()とpop()が配列の末尾を操作するのに対し、shift()とunshift()は配列の先頭のみを対象とする点が異なります。

本記事では、shift()とunshift()を使って配列の先頭の要素を追加・削除する方法を解説し、それぞれの具体的なコード例も紹介します。

JavaScriptのshift()メソッドとは

shift()は、配列の先頭（インデックス0）の要素を削除するための組み込みメソッドです。このメソッドは元の配列を直接変更し、削除された要素を戻り値として返します。

shift()を実行すると、インデックス0の要素が取り除かれ、それ以降の要素のインデックスがすべて1つずつ前へずれます。覚え方のコツとしては、「shift()は配列内のインデックス値を1つずつずらす（shiftする）」と理解するとよいでしょう。

なお、空の配列に対してshift()を使用した場合は、undefinedが返されます。

shift()の構文

array_name.shift()

shift()メソッドは引数を受け取りません。これは、shift()の機能が「先頭の要素を1つ削除する」ことに限定されているためです。もし任意の位置の要素を削除できるようにするなら、位置を指定する引数が必要になるはずです。

shift()の使用例

ここで、shift()メソッドの実際の動作を見てみましょう。

あなたは製薬会社の営業チームのマネージャーだとします。今月のトップセールス担当者のリストを作成しようとしています。現在、先月のトップセールス担当者のリストを持っていますが、Markは2週間休暇を取っていたため、今月のリストから除外したいと考えています。

このような場合、shift()メソッドを使ってリストの先頭からMarkの名前を削除できます。以下がそのコード例です。

let top_salespeople = ['Mark', 'Lucy', 'Graham', 'Carol', 'Ann'];
top_salespeople.shift();

console.log(top_salespeople);

このコードを実行すると、コンソールには次のように出力されます。

['Lucy', 'Graham', 'Carol', 'Ann']

コードの内容を順番に見ていきましょう。まず最初の行で、営業チームのトップセールス担当者を格納する「top_salespeople」という配列を宣言しています。次に、shift()メソッドを呼び出してリストの先頭の要素を削除します。最後に、console.log()を使って更新後のリストをコンソールに出力しています。

ご覧のとおり、先頭にあったMarkがリストから削除されました。

重要なポイントとして、top_salespeople配列自体が変更されている点に注意してください。shift()メソッドは元の配列を直接変更するため、変更を反映した新しい配列が作成されるわけではありません。

JavaScriptのunshift()メソッドとは

unshift()メソッドは、配列の先頭に1つ以上の要素を追加します。このメソッドも元の配列を変更し、戻り値として変更後の配列の長さ（要素数）を返します。

unshift()の構文

array_name.unshift(item_one, item_two, ...)

unshift()メソッドは、指定した数だけ引数を受け取ることができ、それらの引数はすべて配列の先頭に追加されます。

unshift()の使用例

次に、unshift()メソッドの動作を具体例で確認しましょう。

営業チームのHannahは今月素晴らしい成績を収め、トップセールス担当者リストの1位に躍り出ました。そこで、top_salespeople配列の先頭にHannahを追加することにします。以下のコードでこの処理を実現できます。

let top_salespeople = ['Lucy', 'Graham', 'Carol', 'Ann'];
top_salespeople.unshift('Hannah');

console.log(top_salespeople);

このコードを実行すると、コンソールには次の結果が出力されます。

['Hannah', 'Lucy', 'Graham', 'Carol', 'Ann']

Hannahの名前がリストの先頭に追加されました。unshift()メソッドはshift()メソッドとよく似ていますが、2つの点が異なります。それは、unshift()がリストの先頭に要素を「追加」するということと、追加する要素を引数として受け取るという点です。

さらに、営業チームは拡大を続けており、入社1か月目にして売上上位に食い込んだ新入社員が2名いました。この2名をtop_salespeopleリストに追加しましょう。Geoffを1番目に、Peterを2番目に表示したいとします。

以下のコードでトップセールス担当者のリストを更新できます。

let top_salespeople = ['Hannah', 'Lucy', 'Graham', 'Carol', 'Ann'];
top_salespeople.unshift('Geoff', 'Peter');

console.log(top_salespeople);

このコードを実行すると、次の結果が返されます。

['Geoff', 'Peter', 'Hannah', 'Lucy', 'Graham', 'Carol', 'Ann']

この2つ目の例は、最初の例とほぼ同じ仕組みで動作します。違いは、unshift()メソッドに渡す引数が1つではなく2つになっている点だけです。

ご覧のとおり、指定した順序どおりに要素がリストの先頭へ追加されています。Geoffが1番目に、Peterが2番目に表示されていますね。

まとめ

shift()メソッドを使うと、配列の先頭から要素を削除できます。一方、unshift()メソッドを使うと、配列の先頭に1つ以上の要素を追加できます。

本記事では、JavaScriptで配列を操作するためのshift()とunshift()の使い方を解説し、それぞれのメソッドの具体的なコード例を紹介しました。両メソッドをマスターすれば、配列の先頭を柔軟に操作できるようになり、キュー（待ち行列）のようなデータ構造の実装にも応用できます。