builder Top
スクリプト言語
- OCaml
- Perl
- Haskell
- awk
- grep
- ...

JavaScriptの技法：データ構造を配列で作成する

文：Nick Gibson（Builder AU）
翻訳校正：原井彰弘

2008/01/09 07:00

JavaScriptの配列オブジェクトは、一つの変数に複数のデータを割り当てる機能を強力にサポートしている。しかし、配列を利用すれば、それだけではなくスタックやキューといったデータ構造をアプリケーションで利用することも可能になる。

リストB

<html><head>
<title>JavaScript Queue</title>
<script language="JavaScript">
function queueDemo() {
var i;
var queue = [];
queue.push(1);
queue.push(2);
i = queue.shift();
document.write(i + "<br />");
queue.push(3);
queue.push(4);
i = queue.shift();
document.write(i + "<br />");
}
</script></head><body>
<form name="frmQueue">
<input name="btnQueue" value="Queue" type="button" onClick="queueDemo();" />
</form></body></html>

　このコードを実行すると、以下の出力が生成される。

1
2

　この例は非常に単純だ。まず、pushメソッドを用いて2つの整数値（1と2）を配列に追加している。その次に、shiftメソッドを用いて配列の最初の要素（1）を取得し、続いてさらに2つの値（3と4）を配列に追加している。そして、最後に配列の最初の要素（2）を取得し表示している。

　さて、配列にはunshiftというメソッドも存在する。このメソッドを用いると配列の先頭に一つまたはそれ以上の要素を挿入できる。配列の末尾に追加を行うpushメソッドとは対照的だ。ちなみに、このunshiftメソッドの戻り値は配列の新しい長さになる。リストCでは、先ほどの例をunshiftメソッドを利用するように変更している。

リストC

<html><head>
<title>JavaScript Queue using unshift</title>
<script language="JavaScript">
function queueDemo() {
var queue = [];
queue.unshift(1);
queue.unshift(2);
var i = queue.shift();
document.write(i + "<br />");
queue.unshift(3);
queue.unshift(4);
var i = queue.shift();
document.write(i + "<br />");
}
</script></head><body>
<form name="frmTest">
<input name="btnQueue" value="Queue" type="button" onClick="queueDemo();" />
</form></body></html>

　生成される出力が変化することがお分かりだろう。この例ではすべての値が配列の先頭に追加されるため、ページのボタンを押してスクリプトを動作させると、以下のような値が表示される。

2
4

　キューはデータ構造の最初の要素に対して焦点を合わせて作業を行った。一方、スタックでは最後に追加されたアイテムに注目して作業を行う。

スタック

　スタックはデータを扱う際にLast-in First-out（LIFO）の手法を用いたデータ構造だ。スタックは「プッシュダウンリスト」、つまり新しいアイテムがすでにリストに存在するアイテムを押し下げて挿入されるリストと考えることもできる。この考え方では、最後に追加されたアイテムがリストの最初のアイテムとなる。