JavaScript配列のpush・popとshift・unshiftを使ったスタックとキューの仕組み解説
山崎講師こんにちは。ゆうせいです。
今回は、JavaScriptの配列（Array）における「push・pop」「shift・unshift」が、なぜスタックやキューの処理になるのか？について、わかりやすく解説していきます。
新人エンジニアの方がつまずきやすいところでもあるので、できるだけ丁寧に説明しますね！
スタック（Stack）とキュー（Queue）ってなに？
まずは、この2つの基本構造を理解しておきましょう。
スタック（Stack）とは
スタックは「後入れ先出し（LIFO: Last In, First Out）」のデータ構造です。
たとえば、トランプを1枚ずつ積み重ねていくイメージをしてみてください。最後に置いたカードが一番上にありますよね？取り出すときも上からです。
つまり、最後に追加されたデータが、最初に取り出される構造なんです。
キュー（Queue）とは
キューは「先入れ先出し（FIFO: First In, First Out）」のデータ構造です。
これは、レジの順番待ちの列のようなもの。最初に並んだ人が最初に呼ばれ、最後に来た人は一番後ろ。
つまり、最初に追加されたデータが、最初に取り出されるんです。
JavaScript配列とスタック・キューの関係
JavaScriptの配列には次のようなメソッドがあります：
| メソッド | 処理内容 | 構造 |
|---|---|---|
push() | 配列の末尾に要素を追加する | スタック |
pop() | 配列の末尾から要素を取り出す | スタック |
unshift() | 配列の先頭に要素を追加する | キュー |
shift() | 配列の先頭から要素を取り出す | キュー |
スタック処理（push・pop）
let stack = [];
stack.push(1); // [1]
stack.push(2); // [1, 2]
let item = stack.pop(); // item = 2, stack = [1]
最後に追加された「2」が最初に取り出されましたね。まさに**LIFO（後入れ先出し）**です！
キュー処理（unshift・shift）
let queue = [];
queue.push(1); // [1]
queue.push(2); // [1, 2]
let item = queue.shift(); // item = 1, queue = [2]
先に追加した「1」が先に取り出されています。これは**FIFO（先入れ先出し）**の動きです。
どちらを使えばいいのか？
これは処理の目的によります。
- 後から追加したものをすぐ取り出す → スタック処理（
push/pop） - 順番通りに処理したい → キュー処理（
push/shift）
例え話でイメージ！
- スタックは「お弁当箱を積み上げる棚」
- 一番上のお弁当箱しか取れない！
- キューは「ディズニーランドの行列」
- 最初に並んだ人が最初に乗れる！
処理速度の注意点
JavaScriptのshift()とunshift()は配列の先頭を操作するため、内部的にすべての要素をずらす必要があります。そのため、push / pop よりも処理が遅くなる傾向があります。
以下に簡単な性能比較を載せます：
| 操作 | 処理速度（目安） |
|---|---|
push | 高速 |
pop | 高速 |
unshift | やや遅い |
shift | やや遅い |
図解：スタックとキューの違い
スタック（LIFO）
push(1) → [1]
push(2) → [1, 2]
pop() → [1] ← 2が出てくるキュー（FIFO）
push(1) → [1]
push(2) → [1, 2]
shift() → [2] ← 1が出てくるまとめ
| 構造 | 操作方法 | JavaScriptのメソッド |
|---|---|---|
| スタック | 後入れ先出し（LIFO） | push()とpop() |
| キュー | 先入れ先出し（FIFO） | push()とshift() |
「pushとpop」＝ スタック
「pushとshift」＝ キュー
今後の学習の指針
今後は、これらの構造を使ったアルゴリズムに触れてみましょう！
- スタックを使った再帰処理のシミュレーション
- キューを使った幅優先探索（BFS）
- 配列以外の構造（
Set,Map,Queue,Stackのクラス構築）
また、Node.jsの非同期処理（イベントループ）にも、キューの概念が関係しています。深掘りしたくなったら、そちらもぜひ調べてみてください。
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
- 代表取締役
-
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。
