1. 導入：なぜunshiftを知っておくべきか
実務におけるフロントエンド開発では、APIから取得したデータのリストの先頭に、ユーザーの新しいアクションや通知を動的に追加するシーンが頻繁に発生します。JavaScriptで配列の先頭に要素を追加する際、最も直感的で多用されるのが「unshift」メソッドです。しかし、このメソッドは単に要素を追加するだけでなく、配列のインデックスを再計算するというコストが発生します。本記事では、unshiftの基本的な使い方と、大規模データを扱う際のパフォーマンスへの配慮について解説します。
2. 基礎知識：unshiftとは何か
unshiftメソッドは、配列の先頭に1つ以上の要素を追加し、配列の新しい長さを返します。この際、既存の要素はすべて右側にシフトされます。
重要なのは、unshiftは元の配列自体を直接変更する（破壊的メソッド）という点です。Reactなどの状態管理ライブラリを使用している場合、直接的な変更は避けるべきですが、一時的なデータ加工や、非React環境でのDOM操作を伴うロジックでは非常に有効なツールとなります。
3. 実装・解決策
unshiftを使用する際は、引数に複数の値を渡すことが可能です。これにより、一度の処理で複数のデータを先頭に挿入できます。
実装手順：
1. 対象となる配列を用意する。
2. unshiftメソッドを呼び出し、追加したい要素を引数に渡す。
3. 必要であれば、戻り値として返される「新しい配列の長さ」を受け取る。
4. サンプルプログラム
以下は、通知リストの先頭に新しいメッセージを追加する実用的なコード例です。
// 通知リストの初期状態 const notifications = ['古い通知', '過去のイベント']; // 新しい通知を先頭に追加する const newNotification = '最新のお知らせ'; // unshiftで配列の先頭に要素を追加 // 戻り値には、処理後の配列の長さが返ります const newLength = notifications.unshift(newNotification); console.log(notifications); // 出力: ['最新のお知らせ', '古い通知', '過去のイベント'] console.log(newLength); // 出力: 3
5. 応用・注意点：現場で陥りやすい罠
実務でunshiftを使用する際に最も注意すべきは、「パフォーマンス」と「イミュータビリティ」の2点です。
パフォーマンスの観点:
unshiftは、配列の全要素をメモリ上で後ろにずらす必要があるため、配列の要素数が数万件単位になると処理時間が長くなります。もし大量のデータを頻繁に先頭に追加するようなUXが必要な場合は、連結リスト（Linked List）のようなデータ構造を検討するか、あるいは配列を反転させてpush（末尾追加）を使うなどの最適化を検討してください。
イミュータビリティ（不変性）の観点:
ReactやReduxなど、データの不変性を重視するフレームワークでは、unshiftによる配列の直接変更はバグの温床になります。その場合は、以下のようにスプレッド構文を使用して新しい配列を作成するのが定石です。
// React等で安全に先頭に追加する方法 const updatedList = [newNotification, ...notifications];
この方法であれば元の配列を破壊することなく、安全に状態を更新できます。状況に応じて、破壊的メソッド（unshift）と非破壊的なアプローチを使い分けることが、プロフェッショナルな実装への第一歩です。