JavaScript

はじめにWeb開発では、カテゴリ一覧やフォルダ構成、組織図など、階層構造をもつデータを画面に表示したい場面がよくあります。一方で、データベースやAPIから取得したデータは、idとparentIdを持つフラット（一次元）な配列として渡されることがほとんどです。本記事では、こうしたフラットな配列をもとに、子要素を親オブジェクトへリンクさせたツリー構造を組み立て、ネストされたリスト形式で画面に表示するまでの手順を、HTML・CSSのコード付きでわかりやすく解説します。元データとなるフラットな配列まず、変換対象となるデータを確認しましょう。各オブジェクトは、自身の一意な識別子であるid、表示名のnam

問題の概要 最初の引数に数値の配列、2番目の引数に目標の合計値(target)を受け取るJavaScript関数を作成します。 関数は、配列の中から2つの数値(連続していなくても構いません)を選び、その合計が目標値と一致する組み合わせが存在すれば、該当する2つの要素のインデックスを返します。 重要な条件は、この処理を線形時間 O(n)、つまり1回のループ走査で完了させることです。単純な二重ループによる総当たり(O(n²))ではこの条件を満たせないため、より効率的なアプローチが必要になります。 解法のポイント:Mapを使う理由 鍵となるのはMap(ハッシュマップ)の活用です。配列を先頭から1回だ

問題の概要 次のように、複数の数値配列を値として持つオブジェクトがあるとします。 const obj = { a: [ 15, 23, 36, 49, 104, 211 ], b: [ 9, 12, 23 ], c: [ 11, 17, 18, 23, 38 ], d: [ 13, 21, 23, 27, 40, 85 ] }; このオブジェクトが持つプロパティの数は固定されておらず、いくつあっても構いません。そこで必要になるのは、こうしたオブジェクトを引数として受け取り、すべての配列に共通して含まれる要素だけを集めた配列を返すJavaScript関数です。 上記のオブジェクト

空でない文字列 str と、空でない単語のリストを格納した文字列の配列 arr が与えられます。ここで求められているのは、str を、配列に存在する1つ以上の単語をスペースで区切った並びに分割できるかどうかを判定する関数を作成することです。注意点配列内の同じ単語は、分割の際に何度でも再利用して構いません。配列には重複した単語は含まれていません。例1入力が次の場合を考えてみましょう。const str = applepenapple; const arr = [apple, pen];このときの出力は true になります。その理由は以下の通りです。applepenapple は apple p

本記事では、JavaScriptで大文字と小文字を区別しながら文字列の配列をソートする方法について解説します。単純な sort() では期待通りの順序にならないケースを、カスタム比較関数を使って正確に処理していきます。課題の定義まず、次のような文字列リテラルの配列を例として考えてみましょう。const arr = [1185 Design,3 D Exhibits,44Doors, 4Concepts,ABC Data,acceleration];この配列を受け取り、元の配列自体を書き換える形（in-place）でソートするJavaScript関数を作成します。求められる並べ替えのルールは以下

ここでは、ソート済みのリテラル配列が与えられた状況を想定します。求められているのは、配列内のすべての重複をその場（in-place）で削除し、各要素が一度だけ出現するようにしたうえで、新しい配列の長さを返す関数を作成することです。制約条件この問題には重要な条件があります。それは、別の配列用に余分な領域を確保してはならないという点です。つまり、O(1)の追加メモリしか使わず、入力された配列そのものを直接変更する形で処理を実装する必要があります。コード例実際のコードは以下のようになります。const arr = [1, 3, 3, 6, 7, 7, 9, 11, 13]; const remove

問題の概要 次のように、ユーザー名を格納した文字列の配列と、データ（SOP）を格納した文字列の配列の2つがあるとします。 const users = [Rahul, Dinesh, Rohit]; const data = [SOP1, SOP2, SOP3, SOP4]; ここで求められているのは、このような2つの配列を受け取り、すべての組み合わせを含む新しいオブジェクト配列を返すJavaScript関数を作成することです。 つまり、新しい配列には「users配列の各要素」と「data配列の各要素」の全組み合わせ（直積・デカルト積）に対応するオブジェクトが含まれる必要があります。 したがって

はじめに 本記事では、JavaScriptを使って二分木（バイナリツリー）を反転（ミラーリング）する方法を解説します。木の反転とは、すべてのノードに対して左の子と右の子を入れ替える操作のことで、木全体が鏡写しのようにひっくり返るイメージです。 まず、次のような二分木があると仮定しましょう。       4     /    \    2      7  &n

この記事では、2つの文字列を受け取り、1番目の文字列のうち、2番目の文字列にも含まれている文字だけを残した新しい文字列を返すJavaScript関数の実装方法を解説します。 要件の整理 求められている仕様は以下の通りです。 関数は2つの文字列を引数として受け取る 1番目の文字列から、2番目の文字列に存在しない文字を削除する 返される文字列内の文字の出現順序は、元の1番目の文字列と同じ順序を保つ 実装コード 実際のコードは次のようになります。 const str1 = abcdefgh; const str2 = banana; const deleteSelectively = (str1

JavaScriptでは、任意の深さにネストされた配列を1次元の配列へ平坦化（フラット化）したいケースがよくあります。例えば、次のような入れ子になった数値の配列を考えてみましょう。 const arr = [1, 4, 5, [     5, 6, [        6, 19, 5, [5]     ], [5, 7, 6, [6, 8]], 8 ], 6]; ここで求められているのは、任意の階層にネストされた配列を受け取り、その平坦化した新し

JavaScriptで、文字列リテラルを要素とする次のような配列があったとします。const arr = ["a", "b", "c"];ここで「Hello」という文字列があり、この文字列を配列内のすべての値（各要素）の先頭に追加したいと考えます。そのためには、第1引数に文字列の配列を受け取り、第2引数に単一の文字列を受け取る関数を作成します。この関数は、第2引数で渡された文字列を配列の各要素の先頭に付加します。その際、2つの値の間には区切り文字（ここでは「_」）を挿入することとします。したがって、期待される出力は次のようになります。

はじめに JavaScriptでは、オブジェクトの配列から特定のプロパティをキーとしてデータをグループ化し、数値プロパティの合計を求めたい場面がよくあります。例えば、学生の科目ごとの点数と人数をまとめたデータから、科目ごとの合計を算出するケースを考えてみましょう。 以下のような、学生の点数データを含むオブジェクトの配列があるとします。 const arr = [ { subject: Maths, marks: 40, noOfStudents: 5 }, { subject: Science, marks: 50, noOfStudents: 16 }, { subject: H

まず、次のような数値が与えられているとします。const num = 76;この数値を丸める際、丸める単位によって結果は以下のように変わります。10の位（10の倍数）に丸めた場合、結果は 80 になります100の位（100の倍数）に丸めた場合、結果は 100 になります1000の位（1000の倍数）に丸めた場合、結果は 0 になりますそこで、第1引数に丸めたい対象の数値を、第2引数に丸める単位（ファクター）を受け取るJavaScript関数を作成する必要があります。この関数は、丸め処理を行った結果を返すように実装します。コード例この処理を実装したコードは以下のとおりです。 { cons

ヨセフス問題とは「ヨセフス問題」の名前は、古代ユダヤの歴史家フラウィウス・ヨセフスの人生における最も重要な出来事に由来しています。彼自身の記述によれば、包囲戦の際にヨセフスと40人の兵士はローマ軍によって洞窟に追い詰められたとのことです。敵に降伏することを潔しとしなかった彼らは集団自決を選びましたが、そこに独自のルールがありました。全員で円陣を組み、「3人ごとに1人」を殺していく手順を繰り返し、最後に残った1人が自害して終わるというものです。しかし、最後まで生き残ったのはヨセフスともう1人の2人でした。この逸話の詳細が今日まで伝わっていることを考えれば、お察しのとおり、彼らは当初の約束どおりに

例えば、ユーザー情報を格納した文字列変数「users」があるとします。この文字列では、各ユーザーがセミコロン（;）で区切られ、各ユーザーの属性がカンマ（,）で区切られています。const users = Bob,1234,Bob@example.com;Mark,5678,Mark@example.com;このような文字列を受け取り、以下のような2次元配列に分割するJavaScript関数を作成することを目標とします。const arr = [ [Bob, 1234, Bob@example.com], [Mark, 5678, Mark@example.com] ];解決のア

本記事では、2つの数値を要素とする配列を受け取り、その2つの数値で指定される範囲内のすべての整数の最小公倍数（LCM：Least Common Multiple）を計算して返すJavaScript関数の作成方法を解説します。アプローチ最小公倍数を効率的に求めるには、最大公約数（GCD）を利用するのが定番です。以下の関係式が成り立ちます。LCM(a, b) = a × b ÷ GCD(a, b)最大公約数は「ユークリッドの互除法」と呼ばれる古典的なアルゴリズムで簡単に求められます。この方法を使い、範囲内の各数値に対して順番に最小公倍数を累積的に計算していくことで、最終的な結果を得ることができます

本記事では、BinarySearchTree（二分探索木）データ型のプロトタイプに、引数として渡された値がBST内に存在するかどうかを判定するJavaScript関数 contains を実装する方法を解説します。二分探索木における探索の仕組み二分探索木では、「左の子孫は親ノードより小さく、右の子孫は親ノードより大きい」という性質が成り立ちます。この性質を利用すると、1回の比較ごとに探索対象を左右どちらかに絞り込めるため、平均計算量 O(log n) で効率的に値を検索できます。実装例コードは以下の通りです。// class for a single Node for BST class No

JavaScriptでは、引数として受け取った数値で必ず割り切れる乱数を生成したい場面があります。例えば、グリッド配置や一定間隔の値が必要な処理などが挙げられます。本記事では、数値を1つだけ引数として受け取り、その数値で割り切れるランダムな整数を返す関数の実装方法を解説します。実装コード以下のコードでは、デフォルトの上限値を1000000とし、引数で指定した数値（num）の倍数となる乱数を生成しています。 { // ランダムな数値を取得 const random = Math.random() * limit; // num で割り切れるように四捨五入 cons

JavaScriptでは、文字列の配列を第1引数として受け取り、単一の文字を第2引数として受け取る関数を作成することが求められるケースがあります。この関数は、第2引数で指定された文字で始まる、配列内の最初の要素を見つけ出し、そのインデックスを返す必要があります。該当する要素が存在しない場合は -1 を返すのが一般的です。実装例以下のコードは、forループで配列を先頭から順に走査し、各要素の先頭1文字が指定された文字と一致するかどうかを判定する、最も基本的な実装です。const names = [Naman, Kartik, Anmol, Rajat, Keshav, Harsh, Suresh

本記事では、重複のない整数からなる配列が与えられたとき、その配列に含まれる整数のすべての順列（並び替えの組み合わせ）を返すJavaScriptの実装方法を解説します。問題の概要例えば、次のような入力配列が与えられたとします。const arr = [1, 2, 3];この場合、期待される出力は以下の6通りの順列です。const output = [ [1, 2, 3], [1, 3, 2], [2, 1, 3], [2, 3, 1], [3, 1, 2], [3, 2, 1] ];実装コードこの問題は、再帰を使ったバックトラッキング（探索の巻き戻し）の考え方で解くことが