-
【初心者向け】JavaScriptのforEachで部分和(累積和)の配列を作成する方法
次のような数値の配列があるとします。const arr = [1, 1, 5, 2, -4, 6, 10];ここで作成したいのは、同じサイズの新しい配列を返す関数です。ただし、新しい配列の各要素には、元の配列の先頭からその位置までの全要素の合計が格納されるようにします。つまり、期待される出力は次のとおりです。const output = [1, 2, 7, 9, 5, 11, 21];それでは、partialSum() 関数を実装してみましょう。完全なコードは以下のとおりです。コード例const arr = [1, 1, 5, 2, -4, 6, 10]; const partialSum
-
JavaScriptで2つの配列を合計した新しい配列の値を255に制限する方法
それぞれ3つの要素を持つ2つの配列があると仮定しましょう。各要素は、赤・緑・青(RGB)のカラー値を表す整数です。ここでの課題は、対応する要素同士を加算して新しいRGBカラーの配列を作成することです。さらに、合計値が255を超える場合は、その値を255に制限する必要があります。そこで、2つの配列を引数として受け取り、入力に基づいた新しい配列を返す関数 addColors() を定義してみましょう。コード例const color1 = [45, 125, 216]; const color2 = [89, 180, 78]; const addColors = (color1, color2)
-
JavaScriptのincludes()でネストされた配列を検索する簡単な方法
ネストされた配列(多次元配列)に対して includes() を使用しても、期待どおりに動作しないことはよく知られています。Array.prototype.flat() 関数を使えば配列をフラット化してから検索できますが、ブラウザ対応状況はまだ十分とは言えません。そこで今回は、配列と文字列を受け取り、その文字列が配列内に存在するかどうかに応じて真偽値(boolean)を返す includesMultiDimension() 関数を作成します。この問題にはさまざまな解決策がありますが、その多くは再帰処理や複雑な配列操作、ループなどを必要とします。ここで紹介するのは、ネストされた配列内に特定の文字
-
JavaScriptでオブジェクトの配列を「役割ごとの配列」を持つオブジェクトに変換する方法
チームに関するデータが、以下のように「オブジェクトの配列」として与えられているとします。今回の課題は、このデータを「役割(role)をキー、選手名の配列を値」と持つオブジェクトへ変換することです。いわゆるグループ化処理と呼ばれるもので、実務のデータ整形でも頻繁に登場するテクニックなので、ぜひマスターしておきましょう。 サンプルデータ const team = [{ role: Batsman, player: V Kohli }, { role: W
-
JavaScriptで特定の値を除外したランダム数値配列を生成する方法
本記事では、2つの引数を受け取る関数を作成します。1つ目の引数は返却する配列の長さ(整数)、2つ目の引数は返却される配列に含めてはいけない要素の配列です。 具体的には、0〜100の範囲でランダムな数値の配列を生成しつつ、引数として渡された配列に含まれる値はすべて除外する必要があります。 注意: 生成される配列内に重複した数値が存在してはいけません。 実装の考え方 ここでは、generateRandom()という関数を定義します。処理の流れは以下のとおりです。 Math.random()を使って0〜99のランダムな整数を生成する 生成した数値が除外リスト(absentArray)に含まれてい
-
JavaScriptで指定した範囲内の乱数を生成する方法
本記事では、最小値と最大値の2つの引数を受け取り、その範囲内(最大値は含まない)の擬似乱数を返す関数 createRandom を作成する方法を解説します。コード例const min = 3;const max = 9;const createRandom = (min, max) => { const diff = max - min; const random = Math.random(); return Math.floor((random *
-
JavaScriptでハーシャッド数を判定し、連続する数列の長さを求める方法
ハーシャッド数とは?ハーシャッド数とは、その数の各桁の合計値で割り切れる数のことです。例えば126は、1+2+6=9 という各桁の合計で完全に割り切れるため、ハーシャッド数に該当します。すべての1桁の数(1〜9)はハーシャッド数です。ハーシャッド数は、[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] や [110, 111, 112]、[1010, 1011, 1012] のように、連続したまとまり(クラスター)として存在することがよくあります。今回の課題は、数値を入力として受け取り、それがハーシャッド数かどうかを判定する関数を作成することです。ハーシャッド数でない場合は -1
-
【JavaScript】文字列のn番目の出現箇所を削除・置換するポリフィルの作成方法
今回は、文字列からn番目に出現する部分文字列を削除(置換)できるポリフィル関数 removeStr() を作成してみましょう。この関数は、以下の引数を受け取ります。subStr … 削除対象となる部分文字列num … 何番目の出現箇所を削除するかを指定する数値この関数は、部分文字列の削除に成功すれば新しい文字列を返し、失敗した場合はすべてのケースで -1 を返す仕様です。たとえば、次のような呼び出しを行います。const str = drsfgdrrtdr;console.log(str.removeStr(dr, 3));この場合の期待される出力は以下のとおりです。drsfgdrrtそれでは
-
JavaScriptで文字列から特定の文字を削除する方法|split()とjoin()を活用
文字列から区切り文字を取り除く関数を作る JavaScriptでは、元の文字列と削除したい部分文字列(区切り文字)の2つの引数を受け取り、その区切り文字がすべて取り除かれた新しい文字列を返す関数 shedString() を簡単に実装できます。 たとえば、次のように呼び出した場合: shedString(12/23/2020, /); この関数は以下の結果を返します。 12232020 それでは、実際のコードを見ていきましょう。 実装例 ポイントは、split() で文字列を区切り文字ごとに分割し、その配列をjoin() で空文字を挟んで再結合するという流れです。 const shedStr
-
JavaScriptで指定した数に最も近いギャップフル数を見つける方法
ギャップフル数とは ギャップフル数(Gapful Number)とは、以下の条件を満たす数のことです。 3桁以上の数であること 先頭の桁と末尾の桁をつなげてできる数で割り切れること 具体例 例えば、1053は4桁の数であり、先頭と末尾の桁からなる「13」で割り切れるため、ギャップフル数です。同様に、135も3桁の数であり、「15」で割り切れるため、ギャップフル数といえます。 本記事では、入力として与えられた数に最も近いギャップフル数を返すプログラムを作成します。 例えば、すべての2桁の数に対する答えは100となり、103に対する答えは105となります。 実装のアプローチ この問題は、次の2
-
JavaScriptで文字列を検証する:すべての「a」を「@」に、「i」を「!」に置き換える方法
文字列を唯一の引数として受け取り、その中に含まれるすべての「a」を「@」に、「i」を「!」に置き換えた新しい文字列を返す関数 validate() を作成してみましょう。 これは古典的な for ループの問題の一つです。文字列をインデックスを使って反復処理しながら、条件に応じて文字を置き換え、新しい文字列を構築していくアプローチで解決できます。 関数のコードは以下の通りです。 コード例 const string = Hello, is it raining in Amsterdam?; const validate = (str) => { let validatedStrin
-
【JavaScript】配列の配列で同じキーの値を合計して一意な要素にまとめる方法
はじめにJavaScriptでは、配列の中に配列(二次元配列)が含まれるデータ構造を扱うことがよくあります。各サブ配列が「文字列(名前など)」と「整数(数値)」の2つの要素を持つ場合、同じ名前を持つサブ配列を1つにまとめ、その際に2番目の要素(数値)を合計したいというニーズがあります。本記事では、このような処理を実現する combineArray() 関数の実装方法を、具体例とともに解説します。元のデータと期待される結果まず、例として次のような配列を考えてみましょう。const example = [ [first, 12], [second, 19
-
JavaScriptの「?.(オプショナルチェーニング)」とは?意味と使い方をサンプルコードで解説
JavaScriptのコードでときどき見かける奇妙な構文「?.」。これはオプショナルチェーニング(Optional Chaining)と呼ばれる機能で、ES2020から正式に導入されました。本記事では、具体例を使いながらその意味と使い方をわかりやすく解説します。 「?.」を例で理解しよう まずは、23歳の男性を表す次のようなオブジェクトを考えてみましょう。 const being = { human: { male: { age: 23 } } }; この being オブジェクトから age プロパティにアクセスしたい場
-
JavaScriptの自己実行無名関数で起こる巻き上げ(ホイスティング)の罠とは?
まず、以下のサンプルコードを見てください。このコードを実行したときにどのような出力になるかを予測し、その理由を説明するのが今回の課題です。var name = 'Zakir';(() => { name = 'Rahul'; return; console.log(name); function name(){ &nb
-
JavaScriptのsort()メソッドの落とし穴:片方をソートすると2つの配列が並び変わる問題と解決策
Array.prototype.sort()の特徴 JavaScriptのArray.prototype.sort()メソッドは「破壊的(in-place)」なソートアルゴリズムです。これは、ソート対象の配列のコピーを新たに作成せず、余分なメモリを使用せずに配列そのものを直接並べ替える方式です。この仕組みは効率性とパフォーマンスに優れている反面、思わぬ落とし穴につながることがあります。 問題の例 具体的な例で見てみましょう。文字列が格納されたnames配列があるとします。ここで、元の配列の順序はそのまま保持しつつ、同じ要素をアルファベット順にソートした別の配列を作りたいと考えます。 そこで
-
JavaScript:%演算子が文字列に対して機能するのはなぜ?型強制の仕組みを徹底解説
JavaScriptには、一見すると奇妙に見える動作がいくつか存在します。例えば、モジュロ演算子(%)が文字列に対しても正常に機能すること、また文字列連結の際に予想外の結果が生じることが挙げられます。本記事では、こうした現象がなぜ起こるのかを「型強制」という重要な概念を通じて分かりやすく解説します。 問題となるコード まず、実際のコードを見てみましょう。 const numStr = 127; const result = numStr % 5; const firstName = Armaan; const lastName = Malik; const fullName = firstN
-
JavaScriptでスターパターン(ひし形)をコンソールに出力する最も簡単な方法
本記事では、JavaScriptのコンソールにスターパターン(星形パターン)を出力するシンプルな方法を解説します。重要なポイントとして、今回はHTMLページや出力ウィンドウではなく、開発者ツールのコンソールに表示することを想定しています。まず、完成イメージとなるパターンを見てみましょう。 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 星の数が1個から6個まで増えていき、その後ふたたび1個まで減っていく、いわゆる「ダイヤモンド型(ひし形)」のパターンです。 repeat()メソッドを使ったシン
-
【JavaScript】一意のキー(roll番号)を使ってオブジェクトのプロパティをマージする方法
本記事では、names と marks という2つのプロパティを持つ students オブジェクトを例に、共通する一意のキーを手がかりにデータを統合する方法を解説します。 問題の概要 students オブジェクトは以下のような構造になっています。names は各要素が name と roll プロパティを持つオブジェクトの配列、marks は各要素が mark と roll プロパティを持つオブジェクトの配列です。 今回のタスクは、各オブジェクトが共通して持つ roll プロパティ(出席番号)を照合し、marks と names の情報を1つにまとめることです。 const student
-
【JavaScript】nameプロパティが重複する要素を除外しながら2つのオブジェクト配列を結合する方法
次のようなオブジェクトの配列が2つあるとします。これらを1つの配列に結合し、プロパティ name の値が重複しているオブジェクトは取り除く必要があります。const first = [{ name: Rahul, age: 23}, { name: Ramesh, age: 27}, { name: Vikram, age
-
【JavaScript】配列内の奇数回出現する整数をXOR演算で見つける方法
整数の配列が与えられ、「ある1つの要素を除いて、すべての要素が偶数回出現する」という条件が課せられます。私たちの課題は、その例外となる要素をたった1回の反復処理で見つけ出すことです。 ここでは、次のサンプル配列を使って考えてみましょう。 [1, 4, 3, 4, 2, 3, 2, 7, 8, 8, 9, 7, 9] この配列では、1だけが1回(奇数回)出現し、それ以外の4、3、2、7、8、9はすべて2回(偶数回)出現しています。人間の目で見れば答えはすぐ分かりますが、プログラムで効率よく求めるにはどうすればよいのでしょうか。 XOR(排他的論理和)演算子の基礎知識 この問題を解く鍵となるの