JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでキュー（Queue）を実装する方法を徹底解説

キュー（Queue）とは？

キューは先入れ先出し（FIFO：First In First Out）というルールに従うデータ構造です。最初に追加した要素が最初に取り出される仕組みで、レジの待ち行列のように「並んだ順番どおりに処理したい」場面でよく使われます。

JavaScriptでは、配列とクラス（またはプロトタイプ）を組み合わせることで、簡単にキューを実装できます。キューの基本的な操作は次の3つです。

  • enqueue（エンキュー）：キューの末尾に要素を追加する
  • dequeue（デキュー）：キューの先頭から要素を取り出す
  • display（表示）：キューの中身をすべて画面に表示する

以下は、HTMLとJavaScriptを組み合わせてキューを実装したサンプルコードです。テキストボックスに値を入力し、ボタンをクリックすることで、それぞれの操作をブラウザ上で実際に試せるようになっています。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScriptでのキューの実装</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: blueviolet;
    }
    button {
        padding: 6px;
        margin: 4px;
    }
</style>
</head>
<body>
<h1>JavaScriptによるキューの実装</h1>
<div class="result"></div>
<br />
<input type="text" class="enqueueVal" /><button class="enqueueBtn">
エンキュー
</button>
<button class="dequeueBtn">デキュー</button>
<button class="Btn">表示</button>
<h3>上のボタンをクリックしてキューの操作を試してみてください</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let enqueueBtnEle = document.querySelector(".enqueueBtn");
    let dequeueBtnEle = document.querySelector(".dequeueBtn");
    class Queue {
        constructor() {
            this.items = [];
            this.length = 0;
        }
    }
    Queue.prototype.enqueue = function (ele) {
        this.items[this.length] = ele;
        this.length += 1;
    };
    Queue.prototype.dequeue = function () {
        if (this.length === 0) {
            return "アンダーフロー：削除できる要素がありません";
        }
        const removedEle = this.items.shift();
        this.length -= 1;
        return removedEle;
    };
    Queue.prototype.display = function () {
        if (this.length === 0) {
            return "キューは空です";
        }
        for (let i = 0; i < this.length; i++) {
            resEle.innerHTML += this.items[i] + " , ";
        }
    };
    let queue1 = new Queue();
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = "";
        queue1.display();
    });
    enqueueBtnEle.addEventListener("click", () => {
        let ele = document.querySelector(".enqueueVal").value;
        resEle.innerHTML = ele + " をキューの末尾に追加しました";
        queue1.enqueue(ele);
    });
    dequeueBtnEle.addEventListener("click", () => {
        resEle.innerHTML =
        queue1.dequeue() + " をキューの先頭から取り除きました";
    });
</script>
</body>
</html>

コードのポイント

  • constructor()で、要素を格納するための配列itemsと、現在の要素数を表すlengthを初期化しています。
  • enqueue()は、引数として受け取った値を配列の末尾に追加し、lengthを1つ増やします。
  • dequeue()は、キューが空の場合にはアンダーフロー（取り出す要素がない状態）のメッセージを返し、要素が存在する場合には先頭の要素を取り除いて返します。
  • display()は、キュー内の全要素を先頭から順番に画面へ出力します。

実行結果

ページを開いた直後の初期画面は次のとおりです。

JavaScriptでキュー（Queue）を実装する方法を徹底解説

テキストボックスに値を入力して「エンキュー」ボタンをクリックすると、その値がキューの末尾に追加されます。

JavaScriptでキュー（Queue）を実装する方法を徹底解説

「デキュー」ボタンをクリックすると、キューの先頭にある要素が取り除かれます。

JavaScriptでキュー（Queue）を実装する方法を徹底解説

キューに要素が残っている状態で「表示」ボタンをクリックすると、現在キューに入っている全要素を確認できます。

JavaScriptでキュー（Queue）を実装する方法を徹底解説

  1. JavaScriptのPromise（プロミス）とは？非同期処理の基本と使い方を解説

    JavaScriptのPromise（プロミス）は、作成された時点ではまだ値が確定していない非同期処理を扱うためのオブジェクトです。APIリクエストやファイルの読み込みなど、完了まで時間がかかる処理について、「いずれ結果を受け取る」という約束を表現します。Promiseは、以下の3つの状態を持ちます。pending（保留中）：処理がまだ完了しておらず、成功も失敗も確定していない初期状態fulfilled（履行済み）：処理が正常に完了し、結果の値が利用できる状態rejected（拒否済み）：処理が失敗し、エラーの理由が利用できる状態一度fulfilledまたはrejectedに遷移したPromi

  2. JavaScriptでスタックを実装する方法【サンプルコード付きで解説】

    スタック（Stack）は、最後に追加した要素が最初に取り出される「LIFO（Last In, First Out）」方式の基本的なデータ構造です。本記事では、JavaScriptを使ってスタックを実装する方法を、ブラウザ上で実際に動作するサンプルコードとともにわかりやすく解説します。 スタックの基本操作 push：スタックの一番上に新しい要素を追加します。 pop：スタックの一番上から要素を取り出して削除します。要素がない場合はアンダーフローとして扱います。 display：スタック内に格納されているすべての要素を表示します。 サンプルコード 以下は、JavaScriptでスタックを実装し