-
JavaScriptで多次元配列を並べ替える方法|特定の文字だけをソートする
問題の概要 次のように、配列の中にさらに配列が格納された「配列の配列(多次元配列)」があるとします。 const arr = [ [A,F,A,H,F,F], [F,A,A,F,F,H] ]; 求められているのは、このような配列を引数として受け取り、各サブ配列を次のルールに従って並べ替えるJavaScript関数を作成することです。 要素が「A」でも「F」でもない場合(例えば「H」)は、元の位置を維持する 要素が「A」または「F」である場合は、アルファベット順(「A」が先、「F」が後)に並べ替える 期待される出力 上記の配列に対してこの関数を実行すると、最終的な出力は次のようになり
-
JavaScriptで複数の配列を列ごとにマージしてオブジェクト配列を作成する方法
はじめにJavaScriptでは、複数の配列の同じインデックスにある要素を組み合わせて、1つのオブジェクト配列を作成したい場面があります。本記事では、3つの数値配列を列ごと(同じインデックス同士)にマージし、オブジェクトの配列を生成する方法を解説します。問題の概要たとえば、次のような3つの数値配列があるとします。const code = [123, 456, 789];const year = [2013, 2014, 2015];const period = [3, 4, 5];ここで、これら3つの配列を引数として受け取り、各配列の同じ位置の要素を1つのオブジェクトにまとめた、次のようなオブ
-
JavaScriptでオブジェクト配列を再帰的にツリー構造へ変換する方法
JavaScriptでは、parent と child の関係を持つフラットなオブジェクト配列を、階層的なツリー構造のJSONへ変換したいケースがよくあります。例えば、組織図、カテゴリーメニュー、ファイルシステムのようなデータを扱う場合などが該当します。本記事では、再帰処理を使ってこうした配列をツリー構造に変換する実装方法を、サンプルコード付きでわかりやすく解説します。元データとなるオブジェクト配列まず、次のようなオブジェクトの配列があると仮定しましょう。const arr = [ { parentIndex: 0 , childIndex: 3 ,
-
JavaScriptでネストされた配列を処理し、階層レベルに応じて数値を表示する方法
JavaScriptでは、多次元(ネストされた)配列の各要素を、その階層の深さに応じてインデント付きで画面に出力したいケースがあります。本記事では、reduce()メソッドと再帰処理を組み合わせて、ネストされた配列を美しく整形して表示する実装方法を解説します。 問題の概要 まず、以下のようなネストされた数値の配列を考えてみましょう。 const arr = [23, 6, [2,[6,2,1,2], 2], 5, 2]; この配列の各要素(数値)を画面に出力するプログラムを作成する必要があります。重要なのは、数値がネストされている階層の深さに応じて、出力の順序とインデント(字下げ)が決まるとい
-
JavaScriptでオブジェクト配列の中から最高値を持つオブジェクトを見つける方法
問題の概要複数の student(学生)オブジェクトを格納した配列があるとします。各 student オブジェクトはいくつかのプロパティを持ち、そのうちの1つに grades(成績)という名前の配列が含まれています。const arr = [ { name: Student 1, grades: [65, 61, 67, 70] }, { name: Student 2, grades: [50, 51, 53, 90] }, { name: Student 3, grades: [0, 20, 40, 60] } ];こ
-
JavaScriptでキーごとにサイズの異なる2つのオブジェクト配列をマージする方法
JavaScriptでは、共通するキー(idなど)を基準にして、要素数が異なる複数のオブジェクト配列を1つの配列に統合したいケースがよくあります。本記事では、そのようなマージ処理を実現する方法を具体的なコード例とともに解説します。問題の定義まず、次のようなオブジェクトがあると仮定します。const obj = { part1: [{id: 1, a: 50},{id: 2, a: 55},{id: 4, a: 100}], part2:[{id: 1, b: 40}, {id: 3, b: 45}, {id: 4, b: 110}] };このオブジェクトには part1 と p
-
JavaScriptで時刻オブジェクトの配列を数値ペアの配列に変換する方法
この記事では、時刻情報を持つオブジェクトの配列を、より扱いやすい数値ペアの配列へと変換するJavaScriptの実装方法を解説します。 前提となるデータ まず、次のようなオブジェクトの配列が与えられていると仮定します。 const arr = [ {time:18:00:00}, {time:10:00:00}, {time:16:30:00} ]; この配列を引数として受け取り、以下の処理を行うJavaScript関数を作成する必要があります。 各オブジェクトから時刻文字列を抽出する(例:18:00:00、10:00:00、16:30:00) 時刻を「[18,0]」
-
JavaScriptでネストされたJSONオブジェクトを再帰的に検索する方法
```html まず、次のような入れ子構造(ネスト)を持つJSONオブジェクトを用意します。オブジェクトの中にさらにオブジェクトや配列が含まれ、目的のデータがどこにあるのか一目では分からない——こうしたケースは実際の開発でもよく遭遇します。const obj = { id: 1, title: hello world, child: { id: null, title: foobar, child: { id: null, title: i should be in resu
-
JavaScriptの再帰関数でJSONをlabel・children形式のツリー構造に変換する方法
変換前のJSONオブジェクトまず、次のような入れ子(ネスト)構造を持つJSONオブジェクトを例として見てみましょう。const obj = { context: { device: { localeCountryCode: AX, datetime: 3047-09-29T07:09:52.498Z }, currentLocation: { country: KM, lon: -78789486 } } };目指す変換
-
JavaScriptで別の配列を基準に配列を並べ替える方法
たとえば、次のような2つの配列があるとします。 const input = [S-1,S-2,S-3,S-4,S-5,S-6,S-7,S-8]; const sortingArray = [S-1, S-5, S-2, S-6, S-3, S-7, S-4, S-8]; このように「並べ替えたい配列」と「基準となる順序を持った配列」が別々に存在するケースは、実際の開発でもよくあります。そこで今回は、1つ目の配列の要素を、2つ目の配列内での位置(インデックス)に従って並べ替えるJavaScript関数を作成してみましょう。 具体的には、2つの配列を第1引数・第2引数として受け取り、1つ目の配列を
-
JavaScriptで配列内の最長連続繰り返し数列を見つけてその長さを返す方法
本記事では、重複する要素を含む可能性のある数値の配列を受け取り、その中で最も長く連続して繰り返されている数値シーケンスの長さを返すJavaScript関数を作成します。例として、次のような入力配列が与えられたとします。const arr = [2, 1, 1, 2, 3, 3, 2, 2, 2, 1];この場合、期待される出力は 3 です。これは、数値「2」が配列の末尾近くで3回連続して現れており、これが配列全体の中で最も長い連続繰り返しとなっているためです。実装アプローチここでは、reduce() メソッドを2段階に分けて活用します。ステップ1:連続する同じ数値をグループ化最初の reduc
-
JavaScriptで複数の座標が同一直線上にあるかどうかを判定する方法
はじめに本記事では、配列の中に配列(二次元配列)を受け取り、そこに含まれる座標がすべて同一直線上にあるかどうかを判定するJavaScript関数を作成します。各サブ配列は必ず2つの要素、つまりx座標とy座標を保持するものとします。関数の役割は、与えられた座標群が一本の直線を形成しているか否かをチェックすることです。たとえば、次のような入力があった場合:[[4, 5], [5, 6]] → true を返すなお、入力配列には最低でも2つのサブ配列が含まれることが保証されています。実装コード実際のコードは以下の通りです。 { if(coordinates.length === 0) ret
-
【JavaScript】文字列に含まれる最長の同一文字連続(文字列の「力」)を求める方法
文字列の「力」とは? 文字列の「力(power)」とは、たった1種類の文字だけで構成された、空でない部分文字列のうち最も長いものの長さとして定義されます。 つまり今回の課題は、任意の文字列を引数として受け取り、その文字列の力を返すJavaScript関数を実装することです。 例 たとえば、次のような文字列を考えてみましょう。 const str = "abbcccddddeeeeedcba" この場合、期待される出力は 5 になります。 その理由は、文字 e だけで構成された部分文字列 "eeeee" の長さがちょうど5であり、条件を満たす部分文字列の中
-
JavaScriptで日付(年・月・日)から曜日を求める方法
本記事では、日・月・年の3つの引数を受け取り、その日付が何曜日であるかを返すJavaScript関数の実装方法を詳しく解説します。たとえば、次のような入力が与えられた場合を考えてみましょう。day = 15, month = 8, year = 1993出力この場合、関数の出力は次のようになります。const output = Sundayサンプルコード実際のコードは以下のとおりです。= 1970) { days += daysInYear(year - 1);
-
【JavaScript】オブジェクトの配列を任意のキーでグループ化する方法
JavaScriptでデータを扱っていると、オブジェクトの配列を特定のプロパティ(キー)を基準にグループ化したい場面は非常によくあります。例えば、車の情報が入った配列を「メーカー」ごとにまとめたい場合などです。 本記事では、reduce()メソッドを使った基本的な実装方法を中心に、実際のコード例とともにわかりやすく解説します。あわせて、より新しいObject.groupBy()を使ったモダンな書き方についても紹介します。 元データの例 まず、以下のような複数の車の情報を持つオブジェクトの配列を想定します。 const arr = [ { make: audi, model: r8,
-
JavaScriptで配列から重複を除外し、ユニークなnameプロパティを抽出する方法
問題の概要次のような、オブジェクトを要素として持つ配列があると仮定しましょう。const arr = [ {id:123, value:value1, name:Name1}, {id:124, value:value2, name:Name1}, {id:125, value:value3, name:Name2}, {id:126, value:value4, name:Name2} ];この配列の中には、name プロパティの値が重複しているオブジェクトが含まれています。今回の課題は、このようなオブジェクトの配列を受け取り、重複を取り除いたユニークな na
-
【JavaScript】オブジェクト配列を任意のプロパティの値でフィルタリングする方法
はじめにJavaScriptでは、オブジェクトの配列から特定のキーワードに一致する要素だけを抽出したいケースがよくあります。たとえば、検索機能を実装する際、オブジェクトが持つすべてのプロパティを対象に文字列検索を行い、一致するオブジェクトだけを返す方法が必要になります。本記事では、filter()メソッドと正規表現(RegExp)を組み合わせて、この処理を実現する方法を解説します。サンプルデータまず、次のようなオブジェクトの配列を用意します。const arr = [{ name: Paul, country: Canada, }, { name: Lea, c
-
JavaScriptのreduceで配列内の連続する重複要素をまとめる方法
はじめにJavaScriptでは、reduce() メソッドを活用することで、配列内の連続する重複要素を効率的に1つの要素へと結合できます。本記事では、その具体的な実装方法をサンプルコード付きで解説します。課題の内容まず、次のように重複した文字列を含む配列があると仮定しましょう。const arr = [blue, blue, green, blue, yellow, yellow, green];ここで求められているのは、この配列を受け取り、隣り合う重複要素同士を結合して1つにまとめるJavaScript関数を作成することです。ポイントは、離れた位置にある同じ値(例:先頭付近の blue と
-
【JavaScript】ユーザーが入力した文字列が配列に含まれているかチェックする方法
本記事では、ユーザーに文字列を入力してもらうための入力欄を備えたJavaScriptプログラムを作成します。 プログラムは、入力された値が、あらかじめコード内で定義しておいた配列の要素と一致するかどうかを判定します。入力された文字列が配列内に存在すれば画面に「true」を、存在しなければ「false」を表示します。 実装例 この動作を実現するコードは以下のとおりです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &nb
-
JavaScriptでオブジェクト配列内の一意なキーをカウントする方法
はじめに JavaScriptでは、オブジェクトの配列から特定のプロパティ(キー)がそれぞれ何回出現するかを集計したい場面がよくあります。本記事では、reduce()メソッドを使って、オブジェクト配列内に存在する一意な「ユーザー」ごとの出現回数をカウントする方法を、サンプルコード付きで解説します。 対象となるデータ構造 例として、次のようなオブジェクトの配列を想定します。各オブジェクトはassigned_user(担当ユーザー)とdoc_status(ドキュメントの状態)というプロパティを持っています。 const arr = [ { assigned_user: {