JavaScriptのunshift()入門｜配列の先頭に要素を追加する

unshift()は、配列の先頭に1つ以上の要素を追加するメソッドです。戻り値は追加後の配列の長さです。元の全要素はインデックスが後方にシフトされます。優先度の高いデータを先頭に追加する場面などで使われます。

基本的な使い方

unshift()は引数に渡した値を配列の先頭に追加し、新しい配列の長さを返します。元の配列を直接変更する破壊的メソッドです。

JavaScript

const fruits = ["バナナ", "みかん"];

// 1つの要素を先頭に追加
const newLength = fruits.unshift("りんご");
console.log(fruits);
console.log("新しい長さ:", newLength);

// 複数の要素を一度に追加
fruits.unshift("いちご", "ぶどう");
console.log(fruits);

実行結果

["りんご", "バナナ", "みかん"]
新しい長さ: 3
["いちご", "ぶどう", "りんご", "バナナ", "みかん"]

複数の要素をunshift()に渡すと、引数の順番通りに先頭に挿入されます。unshift("A", "B")はunshift("A")→unshift("B")と連続で呼ぶのとは結果が異なる点に注意してください。

push()との比較

unshift()は先頭に追加、push()は末尾に追加します。両方とも破壊的メソッドですが、パフォーマンス面で違いがあります。

JavaScript

const arr = [3, 4, 5];

// 先頭に追加 - unshift()
arr.unshift(1, 2);
console.log("unshift後:", arr);

// 末尾に追加 - push()
arr.push(6, 7);
console.log("push後:", arr);

// 複数回のunshiftの順序に注意
const test1 = [3];
test1.unshift(1, 2); // 一度に追加
console.log("一度に:", test1);

const test2 = [3];
test2.unshift(2);
test2.unshift(1); // 2回に分けて追加
console.log("2回に分けて:", test2);

実行結果

unshift後: [1, 2, 3, 4, 5]
push後: [1, 2, 3, 4, 5, 6, 7]
一度に: [1, 2, 3]
2回に分けて: [1, 2, 3]

実践的な活用例

unshift()は通知の新着表示、履歴の先頭追加、優先キューなどに使えます。

JavaScript

// 最新の通知を先頭に追加（最大5件保持）
const notifications = [
  "13:00 会議リマインダー",
  "12:30 メール受信",
  "12:00 システム更新完了"
];

function addNotification(message) {
  const time = new Date().toLocaleTimeString("ja-JP", { hour: "2-digit", minute: "2-digit" });
  notifications.unshift(`${time} ${message}`);
  // 最大5件に制限
  if (notifications.length > 5) {
    notifications.pop();
  }
}

addNotification("新しいコメント");
addNotification("タスク完了");
console.log(notifications);

// イミュータブルな先頭追加（スプレッド演算子）
const original = [2, 3, 4];
const withFirst = [1, ...original];
console.log("元の配列:", original);
console.log("新しい配列:", withFirst);

// デフォルト値を先頭に追加
const userOptions = ["ダークモード", "通知ON"];
const allOptions = ["デフォルト設定", ...userOptions];
console.log(allOptions);

実行結果

["14:30 タスク完了", "14:30 新しいコメント", "13:00 会議リマインダー", "12:30 メール受信", "12:00 システム更新完了"]
元の配列: [2, 3, 4]
新しい配列: [1, 2, 3, 4]
["デフォルト設定", "ダークモード", "通知ON"]

パフォーマンスについて

unshift()は先頭に挿入するため、既存の全要素のインデックスを再割り当てする必要があります。push()（末尾追加）よりもパフォーマンスが低いため、大きな配列で頻繁に使う場合は注意してください。

注意点

unshift()は破壊的メソッドです。Reactなど状態管理でイミュータブルな操作が必要な場合は、[newItem, ...array]を使って新しい配列を作成してください。

まとめ

unshift()は配列の先頭に要素を追加する破壊的メソッド
戻り値は追加後の配列の長さ
複数要素を一度に追加すると引数の順番通りに挿入される
push()より低パフォーマンス（全要素のインデックス再割り当て）
イミュータブルな先頭追加は[item, ...arr]を使う