JavaScript

Web開発では、ランダムな色を動的に生成したい場面がよくあります。例えば、デモアプリの配色やプレースホルダー、デザインのプロトタイプなどです。本記事では、呼び出されるたびにランダムな16進（HEX）カラーコードを返すJavaScript関数 randomColor の実装方法を解説します。実装コード16進カラーコードは「#」に続けて6桁の16進数（0〜9、a〜f）で構成されます。そこで、0から15までのランダムな整数を6回生成し、それぞれを16進文字列に変換して連結するアプローチを採用します。 {     let color = #;  &nb

JavaScriptでは、配列から重複する要素をすべて取り除き、その代わりに削除した分と同じ数の空文字列（空文字）を配列の末尾に挿入する関数が必要になるケースがあります。要件の確認たとえば、配列内に4つの重複した値が見つかった場合、それらをすべて削除し、代わりに4つの空文字列を末尾に追加します。つまり「重複を消して、穴を後ろに詰める」イメージです。実装コードこの処理は reduce() メソッドを使うと簡潔に書けます。lastIndexOf() を利用することで、その値が配列内で最後に現れる位置かどうかを判定し、初回出現だけを結果に残す仕組みです。 { let { count,

JavaScriptでは、ある配列から別の配列に含まれている要素を除外したい場面がよくあります。例えば、次のような2つの配列があるとします。const arr1 = [4, 23, 7, 6, 3, 6, 4, 3, 56, 4]; const arr2 = [4, 56, 23];ここで求められているのは、これら2つの配列を受け取り、1つ目の配列から2つ目の配列に存在しない要素だけを残すフィルタリング処理を行う関数を作成することです。そして、その結果の配列を返します。したがって、期待される出力は次のようになります。const output = [7, 6, 3, 6, 3];実装例：filt

ネストされたJSONオブジェクトを文字列から生成する JavaScriptでは、2文字ずつのペアで構成された特殊な形式の文字列から、階層的な（ネストされた）オブジェクトを構築したいケースがあります。例えば、次のような文字列が与えられたとします。 const str = AABBCCDDEE; この文字列をもとに、以下のようなオブジェクトを生成することが目標です。 const obj = { code: AA, sub: { code: BB, sub: { code: CC, sub: {

今回は、2つの配列の中で一致している値の個数を比較する関数を作成する方法を解説します。ここでの比較は順序に依存するものとします。つまり、1つ目の配列の最初の要素は、2つ目の配列の最初の要素と比較し、以降も同じように対応する位置同士で比較していくという意味です。具体例例えば、次のような2つの入力配列があったとします。const arr1 = [4, 7, 4, 3, 3, 3, 7, 6, 5]; const arr2 = [6, 5, 4, 5, 3, 2, 5, 7, 5];この場合、期待される出力は 3 です。実際に一致しているのは、インデックス2（値：4）、インデックス4（値：3）、イン

JavaScriptでは、指定された入力に基づいて多次元配列を作成する関数が必要になることがあります。本記事では、行数・列数・初期値の3つのパラメータを受け取り、2次元配列を動的に生成する関数の実装方法を解説します。 関数の仕様 作成する関数は、以下の3つの引数を受け取ります。 row: 配列に含まれるサブ配列（行）の数 col: 各サブ配列に含まれる要素（列）の数 val: 各要素に設定する値 例えば、入力が「2, 3, 10」だった場合、出力は次のようになります。 const output = [[10, 10, 10], [10, 10, 10]]; それでは、実際のコードを見ていき

はじめにJavaScriptでは、数値を要素とする配列の配列（2次元配列）を、特定の条件に従ってグループ化したい場面があります。本記事では、各サブ配列の「最初の要素」が同じ値であるもの同士をまとめ、その「2番目の要素」だけを集めた新しい配列を作成する方法を解説します。例として、次のような配列を考えてみましょう。const arr = [[1, 45], [1, 34], [1, 49], [2, 34], [4, 78], [2, 67], [4, 65]];ここでは、各サブ配列が必ず厳密に2つの要素を持つものとします。求められているのは、最初の値が同じサブ配列同士について、2番目の要素をひと

はじめに数値（例えば 123）を引数として受け取り、その各桁の位の値を要素とする配列 [100, 20, 3] を出力する関数を作成する方法を紹介します。この関数は、引数として渡された数値に含まれるすべての桁について、その位の値（一の位、十の位、百の位…）を計算し、配列として返すことが期待されます。この問題は、再帰的なアプローチを使うことでシンプルに解決できます。実装コードそれでは、この関数のコードを見てみましょう。 { if(num){ const val = (num % 10) * factor; res.unshift(val);

JavaScriptでは、オブジェクトの「値」から対応する「キー」を逆引きしたい場面があります。本記事では、逆マッピング(リバースマッピング)を使って、値からキーを効率的に取得する方法を解説します。前提となるオブジェクトまず、次のようなオブジェクトを想定します。const products = { Pineapple: 38, Apple: 110, Pear: 109 };このオブジェクトでは、すべてのキーが互いに重複せず、すべての値も互いにユニークであるとします。実現したいことここで、「値を受け取り、その値に対応するキーを返す関数」を作成することを目標とします。仮に

本記事では、文字列と数値が混在した配列を受け取り、その中から回文（パリンドローム）となっている要素だけを集めたサブ配列を返すJavaScript関数の作り方を解説します。やりたいことたとえば、次のような入力配列があったとします。const arr = [carecar, 1344, 12321, did, cannot];この場合、期待される出力は以下のとおりです。const output = [12321, did];carecar や cannot は前後逆に読んでも同じにならないため除外され、数値の 12321 と文字列の did のみが結果に残ります。実装の考え方実装は次の2ステップで

JavaScriptでは、オブジェクトに格納された値を取り出して、昇順（または降順）に並べ替えた配列を作成したい場面がよくあります。本記事では、その具体的な実装方法をわかりやすく解説します。前提となるオブジェクトまず、次のようなオブジェクトを想定します。const obj = { key1: 56, key2: 67, key3: 23, key4: 11, key5: 88 };このオブジェクトを受け取り、各プロパティの値を昇順に並べ替えた次のような配列を返す関数を作成するのが目的です。const arr = [11, 23, 56, 67, 88];

はじめに本記事では、配列を受け取り、その中に2回以上出現する値をすべて除外した新しい配列を返す関数の作成方法を解説します。ここでのポイントは、単に重複を1つ残るようにまとめるのではなく、元の配列で複数回登場した値は新しい配列から完全に取り除くという点です。処理のイメージ例えば、次のような入力が与えられたとします。const arr = [763,55,43,22,32,43,763,43];この場合、763は2回、43は3回出現しているため、これらをすべて排除し、期待される出力は次のようになります。const output = [55, 22, 32];使用するメソッドこの問題を解決するために

はじめにJavaScriptでは、ネスト（入れ子）構造を持つ配列を、階層なしのフラットな一次元配列へ変換したい場面がよくあります。この記事では、false や null のような偽値（falsy value）を含む多次元配列を入力として受け取り、ネストをすべて解消した配列を返す関数を、ループと再帰を組み合わせて実装する方法を解説します。処理の概要たとえば、次のような配列が入力だったとします。const arr = [[1, 2, 3], [4, 5, [5, false, 6, [5, 8, null]]], [6]];この場合、期待される出力は以下のとおりです。const output =

問題の概要JavaScriptでは、同じ値が重複して含まれる数値配列から、同一の要素ごとにサブ配列へまとめた新しい配列を作りたい場面があります。本記事では、そのような「同一要素のグループ化」を行う関数の実装方法をわかりやすく解説します。例えば、入力配列が次のような場合を考えてみましょう。const arr = [234, 65, 65, 2, 2, 234];このとき、期待される出力は以下のとおりです。const output = [[234, 234], [65, 65], [2, 2]];アプローチ：ハッシュマップで出現位置を管理するこの問題は、ハッシュマップ（プレーンなオブジェクト）を使

本記事では、数値または文字列の配列を受け取り、余分なメモリ領域を使用せずに連続する重複要素をすべて削除する関数の実装方法を解説します。問題の概要例えば、次のような入力配列が与えられたとします。const arr = [17, 17, 17, 12, 12, 354, 354, 1, 1, 1];この場合、期待される出力は以下の通りです。const output = [17, 12, 354, 1];ポイントは、隣り合う要素が同じ値である場合のみ削除対象となることです。離れた位置にある同じ値(例えば先頭と末尾に同じ数値がある場合)は残ります。再帰による実装ここでは、ループの代わりに再帰呼び出しを

配列内で少なくとも2回出現する最初の要素のインデックスを返す関数を作成します。すべての要素が一度しか出現しない場合は -1 を返します。また、追加のメモリを使用しない定数空間（O(1)）で実装する必要があります。それでは、この問題の解決策を見ていきましょう。アプローチここでは、for ループで配列を先頭から順に走査し、Array.prototype.lastIndexOf() メソッドを使って各要素に重複があるかどうかを判定します。lastIndexOf() は、指定した要素が配列内で最後に出現する位置を返します。現在のインデックス i と lastIndexOf() の結果が異なる場合、その

概要本記事では、JavaScriptで任意の階層にネストされた数値の配列を受け取り、その中に存在する最大の数値を返すシンプルな関数を作成する方法を解説します。たとえば、入力として次のような配列が与えられたとしましょう。const arr = [     34, 65, 67,     [        43, 76, 87, 23, 56, 7,        [  

はじめに本記事では、配列を受け取り、その中から重複する値をすべて取り除き、取り除いた数と同じ数の空文字列を配列の末尾に挿入する関数をJavaScriptで実装します。例えば、重複する値が4つ見つかった場合は、それらをすべて削除し、代わりに4つの空文字列を末尾に追加するイメージです。実装の考え方この処理は、Array.prototype.reduce() と Array.prototype.lastIndexOf() を組み合わせることで簡潔に実装できます。各要素について lastIndexOf() の結果と現在のインデックスを比較し、その要素が同じ値の「最後の出現」であれば結果配列に残し、そう

数値の配列が与えられたとき、各要素とその直前の要素（先行する要素）の平均値を格納した新しい配列を返す関数を作成することを考えてみましょう。ただし、最初の要素には先行する要素が存在しないため、その場合は要素自体をそのまま返すものとします。解決のアプローチこの問題は Array.prototype.map() メソッドを使うことで、簡潔かつ読みやすく解決できます。map() は元の配列の各要素を順番に処理し、コールバック関数が返した値から新しい配列を生成してくれるため、このような「対応する位置ごとの変換」に最適です。コード例実際のコードは以下のようになります。 { const fi

JavaScriptでは、配列の中に配列が入った「多次元配列」を扱う場面がよくあります。本記事では、多次元配列の各サブ配列から最大値を取り出し、それらを新しい配列として返す方法を解説します。問題の定義次のような、数値の配列を要素に持つ配列（2次元配列）を考えてみましょう。const arr = [     [1, 16, 34, 48],     [6, 66, 2, 98],     [43, 8, 65, 43],     [32,