2回目であるこの記事では、主にキューについて解説します。
そもそもスタックやキューとは何なのか、スタックとは何なのかに関しては前回の記事を参照してください。

キューはデータを保存された場合、両端があいた箱の中にデータを入れていくように保存します。この事をenqueue（エンキュー）といいます。
図1の右側にある入り口と出口が空いている筒のようなものがキューです。

図1 キューのイメージ

キューの中に青色のデータを保存すると、図2のようになります。

図2 青色のデータを保存

次に緑色のデータを保存すると、図4のようになります。

図3 緑色のデータを保存

最後にピンク色のデータを保存すると、図4のようになります。

図4 ピンク色のデータを保存

キューの取り出し方(dequeue)

データを取り出すとき、キューはデータを保存した口とは別の口から順番に取り出します。このことをdequeueといいます。

図5 キュー　取り出し方のイメージ

先ほどの図4の状態のキューからデータを取り出すと、図6のようになります。

図6 1回目の取り出しのイメージ

図6の状態で取り出すと、図7に、図7の状態で取り出すと図8のようになります。

図7 ２回目の取り出しのイメージ

図8 ３回目の取り出しのイメージ

ちなみにキューはビリヤードで使う棒が由来のようです。

FirstInFirstOut(FIFO)

上記の例より、キューはデータを取り出しとき一番最初に保存したデータから取り出すことが分かったと思います。
このようなデータの取り出し方をFirstInFirstOut(FIFO)といいます。
文字通り、一番初めに保存したデータ(FirstIn)を一番最初に取り出す(FirstOut)という意味です。

JavaScriptでキューを実装

ここまでキューの考え方について解説しました。ここからは実際にキューを使ってみます。
今回は配列を使って、キューを実装していきます。以下、実装例です。

console.log('------キューの実装------');
console.log('キューのエンキューを実装');

// スタック用の配列を用意
const queue = [];
console.log('最初のqueueの中身', queue);

// データを保存
queue.push('青色のデータ');
console.log('1回目enqueueされたqueueの中身', queue);

queue.push('緑色のデータ');
console.log('2回目enqueueされたqueueの中身', queue);

queue.push('ピンク色のデータ');
console.log('3回目enqueueされたqueueの中身', queue);

console.log('------------------------------------');
console.log('キューのデキューを実装');

// データを取り出す
queue.shift();
console.log('1回目dequeueされたqueueの中身', queue);

queue.shift();
console.log('2回目dequeueされたqueueの中身', queue);

queue.shift();
console.log('3回目dequeueされたqueueの中身', queue);

上記のコードを実行結果は以下の画像のようになります。

参考にしたサイト一覧

この記事を書くにあたって参考にしたサイト一覧です。
算数から高度な数学まで、網羅的に解説したサイト
：キューだけでなく、スタックについても分かりやすく説明されています。

まとめ

今回は以下の内容について解説しました。

　+ スタックやキューとは
　+ キューの保存の仕方
　+ キューの取り出し方
　+ キューはFirstInFirstOut
　+ JavaScriptでキューを実装する

スタックとキューについて〜キュー編〜(JavaScript)

目次

キューの保存(enqueue)の仕方

キューの取り出し方(dequeue)

FirstInFirstOut(FIFO)

JavaScriptでキューを実装

参考にしたサイト一覧

まとめ