JavaScript

キュー（Queue）データ構造の基本キュー（Queue）は、スタックと似た性質を持つ抽象的なデータ構造です。しかし、両者には重要な違いがあります。スタックが片側だけ開いているのに対し、キューは両端が開いた構造を持っている点です。キューでは、一方の端から常にデータを挿入し（エンキュー：enqueue）、もう一方の端からデータを取り出します（デキュー：dequeue）。先入れ先出し（FIFO）方式キューは「First-In-First-Out（先入れ先出し）」という方式に従います。これは、最初に格納されたデータ項目ほど最初にアクセスされることを意味します。データの処理順序を厳密に保ちたい場面で、キ

JavaScriptの配列（Array）はキューに必要な機能をすべて備えていますが、ここでは独自のQueueクラスを実装してみましょう。今回作成するクラスには、以下のメソッドを持たせます。enqueue(element)：キューの末尾に要素を追加するメソッドdequeue()：キューの先頭から要素を取り除くメソッドpeek()：キューの先頭にある要素を参照するメソッドisFull()：キューが最大容量に達しているかどうかを判定するメソッドisEmpty()：キューが空かどうかを判定するメソッドclear()：すべての要素を削除するメソッドdisplay()：キューの中身をすべて表示するメソッド

キューへの要素追加（エンキュー）とは キューに要素を追加すること（エンキュー）とは、コンテナ配列の末尾に新しい要素を加える操作です。本記事では、配列の末尾をキューの「尾部（tail）」として扱い、すべての挿入操作をこの末尾に対して行います。つまり、先入れ先出し（FIFO）の構造において、新しく入ってくる要素は常に列の最後尾へ並ぶことになります。 この考え方に基づけば、enqueue 関数は次のようにシンプルに実装できます。 実装例：enqueue関数 enqueue(element) { // キューが満杯かどうかをチェック if (this.isFull()) {

キューから要素をデキュー(dequeue)するととは、キューの先頭(ヘッド)から要素を取り除くことを意味します。本記事では、コンテナ配列の先頭をキューのヘッドとして扱い、すべての操作をこれを基準に行います。dequeue関数の実装キューの先頭から要素を取り出すpop処理は、以下のように実装できます。dequeue() { // キューが空かどうかをチェック if (this.isEmpty()) { console.log(Queue Underflow!); return; } return this.container.shi

キューのpeek操作とはキューにおける「ピーク（peek）」とは、キューの先頭（ヘッド）にある値を取得する操作のことです。重要なポイントは、要素を取り出すdequeueと異なり、先頭の値を参照するだけではキューから削除されないという点です。このpeek機能を実装すると、次のようになります。peek関数の実装例peek() {     if (isEmpty()) {         console.log(Queue Underflow!);   &nbs

JavaScriptには、配列を並べ替えるための強力な組み込みメソッドが用意されています。その中でも最もよく使われるのが sort() メソッドです。ただし、デフォルトの動作では要素が「文字列」として辞書順（アルファベット順）にソートされるという点に注意が必要です。まずは文字列の配列を並べ替えてみましょう。例：文字列配列のソートlet arr1 = [Zebra, Bear, Tiger]; arr1.sort(); console.log(arr1);出力結果[ Bear, Tiger, Zebra ]文字列の場合は期待通りにアルファベット順に並びました。次に、数値の配列を同じように並べ替え

JavaScriptには、配列から要素を検索するための便利なメソッドが多数用意されています。この記事では、基本的なindexOfから、条件を指定して検索できるfind()やfindIndex()まで、実例を交えながらわかりやすく解説します。 indexOf()：最も基本的な検索メソッド indexOfは、配列全体を先頭から順に走査し、指定した要素が見つかればそのインデックス（位置）を返します。見つからなかった場合は -1 を返します。 サンプルコード let people = [Harry, Martha, John, Sam]; console.log(people.indexOf(John

JavaScriptにおいて、多次元配列は「配列の中にさらに配列を格納したい場合」に使われるデータ構造です。まずは具体的な例を見てみましょう。 たとえば、平日の気温を6時間ごとに記録したいとします。各曜日ごとに個別の配列を作ると、次のようになります。 let monday = [35, 28, 29, 31]; let tuesday = [33, 24, 25, 29]; // ...以下同様 このように複数の配列を別々に管理するのは非効率です。そこで活躍するのが多次元配列です。多次元配列とは、その名の通り「配列の配列」にすぎません。先ほどの例を多次元配列で書き直すと、1行が1日を表し、行内

forループとはまずは最も基本的な繰り返し処理であるforループから見ていきましょう。JavaScriptには主に2種類のforループが用意されています。1つ目は「初期化式・条件式・更新式」で構成される標準的なforループです。この形式では、最初に初期化ステートメントが一度だけ実行され、その後は各反復処理のたびに更新式が実行され、条件式が評価されます。forループの基本構文for (初期化式; 条件式; 更新式) { // 繰り返し実行する処理 }初期化式： ループ開始前に一度だけ実行されます（カウンタ変数の宣言など）。条件式： 各反復の前に評価され、trueの場合のみループ内の処理が実行

whileループは、指定した条件式がtrue（真）である限り、特定の文やコードブロックを繰り返し実行するための制御構造です。条件式がfalse（偽）に評価された瞬間に、ループは終了し、その後の処理へと進みます。 whileループの基本構文 while (条件式) { // 繰り返し実行したい処理 } whileループは、まず最初に条件式を評価します。条件がtrueであればブロック内の処理を実行し、再び条件式に戻って評価を行います。この流れを図にすると以下のようになります。 サンプルコード 実際に簡単な例を見てみましょう。変数 i をカウンターとして使い、5回「Hello」を出力するプ

do…whileループとはJavaScriptのdo...whileループは、whileループとよく似ていますが、決定的な違いがひとつあります。それは、条件判定がループ処理の後（末尾）で行われるという点です。この仕組みにより、条件式が最初からfalseであったとしても、ループ内の処理は必ず最低1回は実行されます。「少なくとも1回は処理を行いたい」というケースに適した制御構文です。whileとの違いを整理すると通常のwhileループは「まず条件を評価し、trueなら処理を実行する」という順序です。そのため条件がfalseの場合、処理は一度も実行されません。一方、do...whileループは「まず

JavaScriptには、明示的なループ処理(for文など)以外にも、配列を効率的に反復処理するための便利なイテレータ関数が多数用意されています。これらの関数を使いこなせるようになると、コードがより簡潔で読みやすくなります。ここでは、特によく使われる代表的なイテレータ関数をいくつか紹介します。 forEach関数 forEach関数は、配列内の各要素に対して、引数として渡した関数を実行します。戻り値は返さないため、単純に各要素に対して何らかの処理を行いたい場合に適しています。 使用例 console.log(person.toUpperCase())); 実行結果 HARRY MART

スタック（Stack）は、ほとんどのプログラミング言語で利用される抽象データ型（ADT：Abstract Data Type）の一つです。トランプのカードの山や皿の積み重ねのように、現実世界の「積み重ね」と同じように振る舞うことから、この名前が付けられました。 スタックの特徴：LIFO（後入れ先出し）構造 スタックの最大の特徴は、操作できるのが片方の端だけであるという点です。この特性により、スタックは LIFO（Last-In-First-Out：後入れ先出し） 型のデータ構造として動作します。つまり、最後に追加された要素が最初に取り出されます。 スタックの用語では、要素を挿入する操作を P

スタックは「後入れ先出し（LIFO：Last In First Out）」と呼ばれるデータ構造で、最後に追加した要素が最初に取り出される仕組みです。JavaScriptの配列（Array）は実はスタックに必要な機能をすべて備えていますが、今回は学習を兼ねて、独自のStackクラスをゼロから実装してみましょう。今回作成するクラスには、次のメソッドを持たせます。push(element)：スタックの先頭に要素を追加するpop()：先頭の要素を取り除き、その要素を返すpeek()：スタックの先頭にある要素を参照するisFull()：スタックが要素数の上限に達しているかを判定するisEmpty()：ス

Bootstrapでは、panel-collapseクラスとlist-groupクラスを組み合わせることで、クリック時に開閉できる「折りたたみ可能なリストグループ」を簡単に実装できます。パネルの見出し部分をクリックすると、非表示になっていたリストがスムーズに展開される仕組みです。使用する主なクラスpanel-group: 折りたたみパネル全体をまとめるコンテナpanel / panel-default: パネル本体とデフォルトのスタイルpanel-heading / panel-title: クリック可能な見出し部分panel-collapse collapse: 開閉の対象となる折りたたみ領

配列（Array）とは、固定数の要素を格納できるコンテナであり、格納される要素はすべて同じ型である必要があります。つまり、配列は「同じ型の要素を固定サイズで順番に並べて保存する」データ構造です。複数のデータをまとめて扱うために使われますが、実務では「同じ型を持つ複数の変数の集合」として捉えると、その利便性がより理解しやすくなります。 なぜ配列が必要なのか？ 例として、1週間の日ごとの平均気温を記録したい場面を考えてみましょう。変数を個別に用意すると、次のように書くことになります。 let avgTempMon = 35; let avgTempTue = 33; let avgTempWed

JavaScriptで配列を作成する方法 JavaScriptには配列（Array）を作成する方法がいくつかあります。まずは、空の配列を2つの方法で作成するやり方を見てみましょう。 let myArr = []; let myArr = new Array(); 上記のどちらのコードも空の配列を作成します。ただし、JavaScriptコミュニティでは1つ目の「配列リテラル」を使う方法が推奨されています。読みやすく入力の手間も少なく、2つ目の new Array() とまったく同じ結果になるためです。 作成時に要素を初期化する 配列の作成時に初期値を設定したい場合は、以下の2つの記法のいずれかを

JavaScriptで配列の末尾（最後）に新しい要素を追加したい場合は、pushメソッドを使用します。このメソッドは、指定した要素を配列の最後に追加し、追加後の配列の長さを返します。基本的な使い方まずは、配列に1つの要素を追加するシンプルな例を見てみましょう。let veggies = [Onion, Raddish]; veggies.push(Cabbage); console.log(veggies);このコードを実行すると、以下のような出力が得られます。[Onion, Raddish, Cabbage]元の配列「veggies」に「Cabbage」が末尾に追加されていることが確認できま

JavaScriptで配列の先頭に要素を追加したい場合は、unshift()メソッドを使用します。このメソッドを使うと、既存の要素を後ろにずらしながら、新しい要素を配列の先頭に挿入できます。 基本的な使い方 まずは、1つの要素を先頭に追加する基本例を見てみましょう。 let veggies = [Onion, Raddish]; veggies.unshift(Cabbage); console.log(veggies); 実行結果は以下の通りです。「Cabbage」が配列の先頭に追加されていることがわかります。 [Cabbage, Onion, Raddish] 複数の要素を一度に追加する

配列内の指定した位置に要素を追加したい場面はよくあります。しかし、JavaScriptにはそのための機能が標準では用意されていません。そこで、独自の関数を作成する必要があります。この関数をArray.prototypeに追加すれば、すべての配列オブジェクトから直接呼び出せるようになります。 insertメソッドを自作する Array.prototype.insert = function(data, position) { if (position >= this.length) { this.push(data); // 配列の長さ以上なら末尾に追加 }