-
JavaScriptで再帰関数を使って配列内の各文字列の先頭単語を大文字にする方法
JavaScriptで、文字列リテラルの配列を受け取る関数を作成することを考えます。この関数は、次の2つの条件を満たす必要があります。 再帰的なアプローチを使用すること 各文字列要素の先頭の単語を大文字にすること さらに、別の配列を保存するための余分な領域を使わずに、元の配列を直接書き換える(in-placeで処理する)方式で実装する必要があります。 例 たとえば、入力配列が以下の場合: const arr = [apple, banana, orange, grapes]; この配列は次のように変換されるべきです: const output = [Apple, Banana, Oran
-
JavaScriptで配列内の定義済み要素だけを数える方法
JavaScriptでは、配列に含まれる要素を数える際、undefined のような未定義の値が混在していることがあります。このような配列から、実際に値が定義されている要素のみを正確にカウントする関数を作成する方法を解説します。問題の概要要素の配列を受け取るJavaScript関数を作成する必要があります。この配列には、いくつかの undefined 値が含まれている可能性があります。作成する関数は、配列の長さをカウントしますが、そのカウントには定義済みの要素のみを含める必要があります。解決策:filterメソッドを使った実装Array.prototype.filter() メソッドを使用する
-
JavaScriptでネストされた配列をtypeごとにグループ化する方法
問題の概要 まず、次のようなネストされた構造を持つ配列を考えてみましょう。各要素は、数値の配列 value1 と、type プロパティを持つオブジェクトの配列 value2 から構成されています。 const arr = [ { value1: [1, 2], value2: [{ type: A }, { type: B }] }, { value1: [3, 5], value2: [{ type: B }, { type: B }] } ]; 求められているのは、このような配列を受け取り、各オブジェクトの type プロパティを基準にデー
-
JavaScriptの画像データを含む配列から重複する値を削除する方法
JavaScriptでは、オブジェクトの配列から特定のプロパティの値が重複している要素を取り除きたい場面がよくあります。特に画像データを扱う際には、同じ画像ファイルへの参照が配列内に何度も現れることがあります。 問題の概要 以下のような、画像に関するデータを持つ配列があるとします。 const arr = [{ image: jv2bcutaxrms4i_img.png, gallery_image: true }, { image: abs.png, gallery_image: true }, { image: acd.png, galler
-
JavaScriptでオブジェクトの配列を別の配列を使ってフィルタリングする方法
課題の概要まず、次のようなオブジェクトを要素にもつ配列が与えられたとします。const arr = [ {area: NY, name: Bla, ads: true}, {area: DF, name: SFS, ads: false}, {area: TT, name: SDSD, ads: true}, {area: SD, name: Engine, ads: false}, {area: NSK, name: Toyota, ads: false}, ];今回求められるのは、第1引数にこのようなオブジェクトの配列を、第2引数に文字列リテラルの配
-
JavaScriptで16進カラーコードから補色を求める関数を実装する方法
はじめに本記事では、16進数カラーコード(HEXカラー)を唯一の引数として受け取り、その色の補色(complementary color)を計算して返すJavaScript関数の実装方法を解説します。補色とは、色相環において対象の色と正反対の位置にある色のことです。デザインやUI開発において、コントラストの高い配色を自動生成したい場合などに活用できる便利な処理です。期待する動作作成する関数 getComplementaryColor() は、以下のように入力と出力が対応します。getComplementaryColor(#142814) = #ebd7eb; getComplementaryC
-
JavaScriptでオブジェクトの配列を組み合わせる方法|reduce()によるデータ変換テクニック
はじめに本記事では、JavaScriptを使って「オブジェクトの配列」を、プロパティ(キー)ごとに値をまとめた1つのオブジェクトへ変換する方法を解説します。APIレスポンスやフォームデータの整形など、日常的な開発で役立つテクニックです。問題設定例として、学生のデータを格納した次のようなオブジェクトの配列があるとします。const arr = [{ name: 'A', idNo: 1, marks: { math: 98, sc
-
JavaScriptで配列内の重複要素をすべて削除する方法
リテラル値を要素とする配列を受け取り、重複している値をすべて削除するJavaScript関数を作成する必要があります。 配列には同じ値が複数回含まれている場合があります。この関数では、そのような繰り返しの値を配列からすべて取り除きます。つまり、重複している要素のインスタンスは1つ残らず削除しなければなりません。 アプローチ この問題は、filter()メソッドとindexOf()・lastIndexOf()メソッドを組み合わせることで解決できます。 ある要素について、indexOf()が返す「最初の出現位置」と、lastIndexOf()が返す「最後の出現位置」が一致していれば、その要素は配列
-
JavaScriptで配列から最大のn個の値を取得する方法
JavaScriptでは、数値の配列を第一引数として、数値 n を第二引数として受け取る関数を作成する場面があります。この関数は、配列の中から最大の n 個の数値を選び出し、それらの数値からなる新しい配列を返す必要があります。実装例コードは以下の通りです。const arr = [3, 4, 12, 1, 0, 5, 22, 20, 18, 30, 52]; { arr.length){ return []; }; b - a; &n
-
JavaScriptで文字列をバイナリ(2進数)表現に変換する方法
本記事では、JavaScriptを使って文字列をバイナリ(2進数)表現に変換する方法を解説します。具体的には、文字列を唯一の引数として受け取り、そのバイナリ表現を構築して返す関数を作成します。 実装のポイント 文字列を1文字ずつ処理し、各文字のUnicodeコードポイント(UTF-16コードユニット)を取得して、それを2進数の文字列に変換します。JavaScriptでは以下のメソッドを組み合わせることで簡単に実現できます。 String.prototype.split():文字列を1文字ずつ配列に分解する String.prototype.charCodeAt():指定位置の文字のコード値
-
JavaScriptでバイナリ文字列を元のテキストに変換する方法
はじめに本記事では、バイナリコードを表す文字列を受け取り、それを対応するアルファベットの文字列に変換して返すJavaScript関数の作成方法を解説します。例えば、次のようなバイナリ入力文字列があったとします。const str = 1001000 1100101 1101100 1101100 1101111 100000 1010111 1101111 1110010 1101100 1100100;この場合、期待される出力は次のとおりです。const output = Hello World;変換の仕組みバイナリから文字への変換は、以下の流れで行います。split( )を使って、スペース
-
JavaScriptで文字列から空白を除去し、カンマ区切りで分割して配列を作成する方法
文字列のトリミングと分割による配列の生成たとえば、次のように空白を含むカンマ区切りの文字列があったとします。const str = a, b, c, d , e;ここで求められているのは、このような文字列を受け取って、含まれるすべての空白文字(ホワイトスペース)を除去し、その後カンマを区切り文字として文字列を分割して、リテラルの配列を作成して返すJavaScript関数です。実装例コードは以下のようになります。 { let res = ; for(let i = 0; i < str.length; i++){ const el =
-
【JavaScript】オブジェクトの配列を配列の配列に変換する方法
はじめに JavaScriptでは、データ処理やグラフ描画ライブラリへのデータ受け渡しなどの場面で、「オブジェクトの配列」を「配列の配列(2次元配列)」に変換したいことがあります。 例えば、次のようなオブジェクトの配列があったとします。 const arr = [ {Date:2014,Amount1:90,Amount2:800}, {Date:2015,Amount1:110,Amount2:300}, {Date:2016,Amount1:3000,Amount2:500} ]; この配列を受け取り、各オブジェクトを配列に変換して、次のような「配列の中に配列が入っ
-
JavaScriptでソート済み配列を連続範囲のシーケンス文字列に変換する方法
はじめにJavaScriptでは、ソート済みの数値配列から、連続する数値を「開始-終了」の形式で圧縮したシーケンス文字列を作成したいケースがあります。本記事では、そのような変換を行う関数の実装方法を解説します。問題の定義次のような、連続する数値を含むソート済み配列を考えてみましょう。const arr = [1, 2, 3, 5, 7, 8, 9, 11];この配列を受け取り、シーケンス形式の文字列を生成するJavaScript関数を作成します。ルールは以下の通りです。連続している要素(例:1, 2, 3)は、最初と最後の数字だけを残し、間をハイフン(-)でつなぐ連続していない単独の数字(例:
-
JavaScriptでidをキーに2つのオブジェクト配列を結合する方法
はじめに 次のような、子(child)と親(parent)の2つのJSONオブジェクト配列があったとします。 const child = [{ id: 1, name: somename, parent: { id: 2 }, }, { id: 2, name: some child name, parent: { id: 4 } }]; const parent = [{ id: 1, parentName: The first, child: {} }, { id
-
【JavaScript】配列をアルファベット順にソートし、指定した要素を常に先頭に配置する方法
本記事では、リテラル値の配列を第一引数に、文字列を第二引数として受け取るJavaScript関数の実装方法を解説します。 この関数には、次のような要件があります。 配列をアルファベット順にソートする ただし、第二引数で渡された文字列が配列内に存在する場合は、その文字列の内容に関わらず常に先頭の要素として配置する 実装コード 以下が実際のコードです。 const arr = [Apple, Orange, Grapes, Pineapple, None, Dates]; const sortKeepingConstants = (arr = [], text = ) => { &nb
-
JavaScriptでオブジェクト配列から条件に合うプロパティ値を選択的に抽出する方法
はじめに JavaScriptでは、オブジェクトが格納された配列の中から、特定の条件を満たす要素だけを抜き出して、そのプロパティ値を取得したい場面がよくあります。本記事では、isActive プロパティが true のオブジェクトのみを対象に、id プロパティの値を配列として返す関数の実装方法を解説します。 サンプルデータ まず、次のようなオブジェクトの配列を用意します。 const arr = [ { id : 23, name : Item 1, isActive : true}, { id : 25, name : Item 2, isActive : false},
-
JavaScriptでネストされた配列の全要素をセミコロン区切りの文字列に結合する方法
問題の概要JavaScriptでは、入れ子になった(ネストされた)配列のすべての要素を取り出し、1つの文字列として連結したいケースがあります。ここでは、次のような多次元配列を例に考えてみましょう。const arr = [zero, [one, two, three, [four, [five, six, [seven]]]]];求められているのは、このような配列を受け取って、全要素をセミコロン(;)で連結した文字列を返す関数です。期待される出力は次のとおりです。const output = zero;one;two;three;four;five;six;seven;再帰処理を使った実装例配
-
JavaScriptでインデックスを指定してネストされた配列から要素を削除する方法
はじめにJavaScriptでは、オブジェクトが入れ子になった配列(ネストされた配列)を扱う場面がよくあります。本記事では、指定したインデックスのパスに従って、ネストされた配列から特定の要素を削除する方法を解説します。例として、次のようなネストされたオブジェクト配列を考えてみましょう。const arr = [ { value: some value }, { array: [ { value: some value }, { array: [ { value: some
-
JavaScriptで2つの配列の対応する要素を組み合わせる方法
問題の概要ここでは、同じ長さを持つ2つの配列を受け取るJavaScript関数を作成します。この関数は、両方の配列から対応する位置にある要素を取り出してペア(サブ配列)を作り、それらをまとめた新しい配列を返す必要があります。たとえば、次のような2つの配列が与えられた場合を考えてみましょう。const arr1 = [a, b, c]; const arr2 = [1, 2, 3];このとき、期待される出力は以下のとおりです。const output = [ [a, 1], [b, 2], [c, 3] ];forループを使った実装例まずは基本的なforループを使った実装