JavaScriptのshift()の使い方を徹底解説

shift()とは何か

JavaScriptのshift()は、配列の先頭の要素を取り出して削除するメソッドです。
取り出した要素は戻り値として返され、元の配列は変更されます。

const arr = [1, 2, 3];

const result = arr.shift();

console.log(result); // 1
console.log(arr);    // [2, 3]

このように、先頭の要素が削除され、残りの要素が前に詰められます。

基本的な使い方

配列の先頭要素を取得する

shift()は、配列の最初の要素を取り出す場面で使われます。

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

const first = fruits.shift();

console.log(first);  // apple
console.log(fruits); // ["banana", "orange"]

空の配列に対して使った場合

配列が空の場合、shift()はundefinedを返します。

const arr = [];

const result = arr.shift();

console.log(result); // undefined
console.log(arr);    // []

shift()の特徴

配列を直接変更する（破壊的メソッド）

shift()は元の配列を書き換えます。

const numbers = [10, 20, 30];

numbers.shift();

console.log(numbers); // [20, 30]

この点は、配列をコピーして扱うメソッドとは異なる重要なポイントです。

要素が前に詰められる

shift()を使うと、削除された後にすべての要素が前に移動します。

const arr = ["a", "b", "c"];

arr.shift();

console.log(arr); // ["b", "c"]

内部的にはインデックスがすべて再調整されます。

shift()とunshift()の違い

shift()とよく比較されるのが、配列の先頭に要素を追加する**unshift()**です。

shift()とunshift()の関係

const arr = [2, 3];

arr.unshift(1);
console.log(arr); // [1, 2, 3]

arr.shift();
console.log(arr); // [2, 3]

unshift()については、以下の記事で詳しく解説されています。
JavaScriptのunshift()の使い方解説

shift()とpop()の違い

配列から要素を削除するメソッドとして、**pop()**もあります。

const arr = [1, 2, 3];

arr.pop();
console.log(arr); // [1, 2]

arr.shift();
console.log(arr); // [2]

pop()については、以下の記事で詳しく解説されています。
JavaScriptのpop()の使い方解説

shift()を使う場面

キュー（FIFO）処理

shift()は、**先に入れたものを先に取り出す処理（FIFO）**に適しています。

const queue = ["A", "B", "C"];

while (queue.length > 0) {
  const item = queue.shift();
  console.log(item);
}

実行結果

A
B
C

順番にデータを処理する

APIレスポンスやタスク処理など、順番に処理したい場合に便利です。

const tasks = ["task1", "task2", "task3"];

function processTask() {
  if (tasks.length === 0) return;

  const task = tasks.shift();
  console.log("処理中:", task);
}

processTask();
processTask();

shift()使用時の注意点

配列が変更されることに注意

元の配列が変わるため、再利用する場合は注意が必要です。

const original = [1, 2, 3];

const copy = [...original];
copy.shift();

console.log(original); // [1, 2, 3]
console.log(copy);     // [2, 3]

パフォーマンスに注意

shift()は先頭を削除するため、すべての要素を前に詰める処理が発生します。
そのため、大量データではパフォーマンスに影響が出ることがあります。

大量データを扱う場合は、インデックス管理など別の方法も検討されます。

他の配列メソッドとの組み合わせ

slice()で非破壊的に先頭を除く

配列を変更せずに先頭を除きたい場合は、slice()が使えます。

const arr = [1, 2, 3];

const newArr = arr.slice(1);

console.log(arr);    // [1, 2, 3]
console.log(newArr); // [2, 3]

slice()については、以下の記事で詳しく解説されています。
JavaScriptのslice()の使い方解説

まとめ

• shift()は配列の先頭要素を取り出して削除するメソッド
• 戻り値として削除した要素を返す
• 元の配列を変更する（破壊的メソッド）
• FIFO（キュー処理）に適している
• 大量データではパフォーマンスに注意

関連記事

• JavaScriptの配列操作まとめ（map・filter・reduce）
• JavaScriptのunshift()の使い方解説
• JavaScriptのslice()の使い方解説
• JavaScriptのpop()の使い方解説