JavaScriptで分数の合計を最も簡単な形(約分した形)で求める関数の実装方法
JavaScriptでは、複数の分数を小数に変換せずに、そのまま分数の形で足し合わせたい場面があります。本記事では、「配列の中に配列が入ったデータ」から各分数を取り出し、その合計を約分された最もシンプルな分数として返す関数の実装方法を解説します。
扱うデータの形式
まず、次のような「配列の配列」を考えてみましょう。
const arr = [[12, 56], [3, 45], [23, 2], [2, 6], [2, 8]];
この配列は任意の数の要素を持てますが、重要なルールが1つあります。それは、各サブ配列には必ず2つの数値が含まれるということです。
サブ配列と分数の対応関係
各サブ配列内の2つの数値は、それぞれ1つの分数を表しています。具体的には以下のように対応します。
- 最初のサブ配列
[12, 56]→ 分数12/56 - 2番目のサブ配列
[3, 45]→ 分数3/45 - 以降も同様に続きます
サブ配列の最初の要素が分子、2番目の要素が分母を表すと考えると分かりやすいでしょう。
実装の要件
私たちが作成するJavaScript関数には、以下の要件があります。
- 上記のような配列を受け取る
- すべてのサブ配列が表す分数の合計を計算する
- 合計は分数のまま計算する(小数への変換は行わない)
- 結果を「分子と分母の2要素からなる配列」として返す
コードの実装例
それでは、実際のコードを見ていきましょう。
const arr = [[12, 56], [3, 45], [23, 2], [2, 6], [2, 8]];
// 最大公約数(GCD)を求める関数
const gcd = (a, b) => {
let num = 2, res = 1;
while(num >= Math.min(a, b)){
if(a % num === 0 && b % num === 0){
res = num;
};
num++;
};
return res;
}
// 2つの分数を加算し、約分して返す関数
const sumFrac = (a, b) => {
const aDenom = a[1], aNumer = a[0];
const bDenom = b[1], bNumer = b[0];
let resDenom = aDenom * bDenom;
let resNumer = (aDenom*bNumer) + (bDenom*aNumer);
const greatestDivisor = gcd(resDenom, resNumer);
return [resNumer/greatestDivisor, resDenom/greatestDivisor];
};
// 配列内の全分数を合計する関数
const sumArrayOfFractions = arr => {
return arr.reduce((acc, val) => sumFrac(acc, val));
};
console.log(sumArrayOfFractions(arr));コードのポイント解説
- gcd関数:2つの数値の最大公約数を求めます。これにより、計算結果の分数を約分できます。
- sumFrac関数:通分のために分母同士を掛け合わせ、分子を調整して加算します。その後、最大公約数で割って約分します。
- sumArrayOfFractions関数:
reduce()メソッドを使い、配列の先頭から順番に分数を累積的に加算していきます。
実行結果
コンソールには次のような出力が表示されます。
[ 1731, 140 ]
これは、配列内のすべての分数 12/56 + 3/45 + 23/2 + 2/6 + 2/8 の合計が 1731/140 であることを意味します。結果は既に約分されているため、これ以上シンプルな形にはなりません。
まとめ
このように、最大公約数を求める関数とreduce()メソッドを組み合わせることで、小数誤差の心配なく分数の合計を正確に計算できます。金額計算や厳密な数値処理が必要な場面で、この手法は非常に役立ちます。
-
【初心者向け】JavaScriptでボタンクリック時に数値を加算するSum関数の作り方
はじめに 本記事では、ボタンをクリックするたびに指定した値を加算していき、結果を画面に表示するシンプルなJavaScriptの「Sum関数」の実装方法を解説します。onclickイベントとparseInt()を組み合わせることで、わずか数行のコードで動的な加算処理を実現できます。 ボタンの準備 まず、以下のようなHTMLボタンを用意します。 <button type=button onclick=addTheValue(10)>Sum</button> このボタンがクリックされると、引数として10を渡して関数 addTheValue(10) が呼び出されます。つま
-
Array.prototypeを拡張するカスタムfind関数の実装方法
課題Arrayクラスのプロトタイプオブジェクト上に定義されるJavaScript関数を書く必要があります。この関数はコールバック関数を引数として受け取り、そのコールバックがtrueを返した最初の要素を返すものとします。また、現在処理中の要素を第1引数、現在のインデックスを第2引数として、コールバック関数に渡す必要があります。コード例以下が実際のコードです。const arr = [4, 67, 24, 87, 15, 78, 3]; Array.prototype.customFind = function(callback){ for(let i = 0; i &l