JavaScriptでスタックを実装する方法【サンプルコード付きで解説】
スタック（Stack）は、最後に追加した要素が最初に取り出される「LIFO（Last In, First Out）」方式の基本的なデータ構造です。本記事では、JavaScriptを使ってスタックを実装する方法を、ブラウザ上で実際に動作するサンプルコードとともにわかりやすく解説します。
スタックの基本操作
- push：スタックの一番上に新しい要素を追加します。
- pop：スタックの一番上から要素を取り出して削除します。要素がない場合はアンダーフローとして扱います。
- display：スタック内に格納されているすべての要素を表示します。
サンプルコード
以下は、JavaScriptでスタックを実装したコード例です。テキストボックスへの入力とボタン操作によって、push・pop・display の各処理を確認できます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</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>Implementation of Stack in JavaScript.</h1>
<div class="result"></div>
<br />
<input type="text" class="stackPush" /><button class="pushBtn">Push</button>
<button class="popBtn">Pop</button>
<button class="Btn">Display</button>
<h3>Click on the above buttons to perform stack operations</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let pushBtnEle = document.querySelector(".pushBtn");
let popBtnEle = document.querySelector(".popBtn");
class Stack {
constructor() {
this.items = [];
this.top = 0;
}
}
Stack.prototype.push = function (ele) {
this.items[this.top] = ele;
this.top += 1;
};
Stack.prototype.pop = function () {
if (this.top === 0) {
return "Underflow: no more elements to delete";
}
tempNum = this.items[this.top - 1];
this.items.length -= 1;
return tempNum;
};
Stack.prototype.display = function () {
if (this.top == 0) {
return "Stack is empty";
}
for (let i = 0; i < this.top; i++) {
resEle.innerHTML += this.items[i] + " , ";
}
};
let stack1 = new Stack();
BtnEle.addEventListener("click", () => {
resEle.innerHTML = "";
stack1.display();
});
pushBtnEle.addEventListener("click", () => {
let ele = document.querySelector(".stackPush").value;
resEle.innerHTML = ele + " is pushed to the stack";
stack1.push(ele);
});
popBtnEle.addEventListener("click", () => {
resEle.innerHTML = stack1.pop() + " is popped from the stack";
});
</script>
</body>
</html>
コードのポイント
Stackクラスのコンストラクタでは、要素を格納する配列itemsと、スタックの先頭位置を示すtopを初期化しています。push()メソッドはtopの位置に要素を追加し、topを1つ増やします。pop()メソッドはスタックが空の場合に「Underflow」メッセージを返し、それ以外の場合は先頭の要素を取り出して返します。display()メソッドはスタック内の全要素を順番に出力し、空の場合は「Stack is empty」と返します。
実行結果
初期画面が表示されます。
入力フィールドに数値を入力して「Push」ボタンをクリックすると、その値がスタックに追加されます。
「Pop」ボタンをクリックすると、スタックの先頭から要素が取り出され、削除されます。
スタックが空でない状態で「Display」ボタンをクリックすると、現在格納されているすべての要素が表示されます。
まとめ
このように、JavaScriptではクラスとプロトタイプメソッドを組み合わせることで、シンプルなスタックを簡単に実装できます。スタックの仕組みは、undo機能やブラウザの履歴管理など、さまざまな場面で応用される重要な概念なので、ぜひサンプルコードを動かしながら理解を深めてください。
-
JavaScriptのWeakSetとは？特徴と主要メソッド、サンプルコードをわかりやすく解説
JavaScriptのWeakSet（ウィークセット）は、オブジェクトを格納するためのコレクションです。Setと同様に、同じオブジェクトを重複して保存することはできません。WeakSetの主な特徴弱い参照で保持する：WeakSet内のオブジェクトへの参照が他に存在しなくなると、ガベージコレクションによって自動的にメモリから解放されます。そのため、メモリリークを防ぎたい場面で役立ちます。オブジェクトのみ格納可能：数値や文字列などのプリミティブ値は追加できません。列挙できない：Setのようなsizeプロパティや反復処理の仕組みを持たず、格納されている要素の一覧を取得することはできません。WeakS
-
JavaScriptでキュー（Queue）を実装する方法を徹底解説
キュー（Queue）とは？ キューは先入れ先出し（FIFO：First In First Out）というルールに従うデータ構造です。最初に追加した要素が最初に取り出される仕組みで、レジの待ち行列のように「並んだ順番どおりに処理したい」場面でよく使われます。 JavaScriptでは、配列とクラス（またはプロトタイプ）を組み合わせることで、簡単にキューを実装できます。キューの基本的な操作は次の3つです。 enqueue（エンキュー）：キューの末尾に要素を追加する dequeue（デキュー）：キューの先頭から要素を取り出す display（表示）：キューの中身をすべて画面に表示する 以下は、H