Javascript でスマートに最大値を見つける：Math.max、reduce、Lodash、自作ソートの比較

2024-05-10

JavaScript で JSON 配列オブジェクトの最大値を見つける方法

このチュートリアルでは、JavaScript で JSON 配列オブジェクト内の特定のプロパティの最大値を見つける方法を説明します。複数の方法がありますが、それぞれ異なる利点と欠点があります。代表的な方法として、以下の 3 つが挙げられます。

Math.max を使用する
Array.prototype.reduce を使用する
_.max を使用する（Lodash ライブラリを使用する場合）

各方法の詳細と比較、そしてそれぞれのユースケースを見ていきましょう。

最もシンプルで分かりやすい方法は、Math.max 関数を使用する方法です。 Math.max は、渡された引数の中で最大の値を返します。以下は、JSON 配列オブジェクトの "price" プロパティの最大値を見つける例です。

const data = [
  { "name": "Product A", "price": 100 },
  { "name": "Product B", "price": 200 },
  { "name": "Product C", "price": 300 }
];

const maxPrice = Math.max(...data.map(item => item.price));
console.log(maxPrice); // 300を出力

このコードは、まず data 配列をイテレーションし、各オブジェクトの "price" プロパティを新しい配列にマップします。そして、Math.max 関数を使って、新しい配列内のすべての要素を比較し、最大の値を取得します。

利点:

シンプルで分かりやすい
コードが短い

比較的非効率（配列の要素数が非常に多い場合）
特定のプロパティ名に依存するため、柔軟性に欠ける

Array.prototype.reduce メソッドは、配列の要素を累積的に処理するために使用できます。この方法は、Math.max よりも効率的で、柔軟性も高くなります。以下は、"price" プロパティの最大値を見つけるために reduce メソッドを使用する例です。

const data = [
  { "name": "Product A", "price": 100 },
  { "name": "Product B", "price": 200 },
  { "name": "Product C", "price": 300 }
];

const maxPrice = data.reduce((max, item) => Math.max(max, item.price), 0);
console.log(maxPrice); // 300を出力

このコードでは、reduce メソッドに初期値 0 と、2 つの引数を持つアキュムレータ関数を渡します。アキュムレータ関数は、現在の最大値 (max) とループ中のアイテム (item) を受け取り、それらを比較して大きい方を返します。

Math.max よりも効率的
初期値を指定することで、デフォルト値を設定できる
処理をカスタマイズしやすい

Lodash は、JavaScript でよく使用されるユーティリティライブラリです。 Lodash には、_.max という便利なヘルパー関数があり、これを使って簡単に JSON 配列オブジェクトの最大値を見つけることができます。以下は、Lodash を使って "price" プロパティの最大値を見つける例です。

const data = [
  { "name": "Product A", "price": 100 },
  { "name": "Product B", "price": 200 },
  { "name": "Product C", "price": 300 }
];

const maxPrice = _.max(data, 'price');
console.log(maxPrice); // 300を出力

このコードは、_.max 関数に data 配列と、最大値を求めるプロパティ名 "price" を渡します。

コードが簡潔で読みやすい
Lodash を使用することで、その他の便利なヘルパー関数を利用できる

Lodash ライブラリを別途インポートする必要がある

シンプルで分かりやすい方法 を求める場合は、Math.max がおすすめです。
効率と柔軟性を重視 する場合は、

JavaScript で JSON 配列オブジェクトの最大値を見つける：サンプルコード

このチュートリアルでは、JavaScript で JSON 配列オブジェクトの最大値を見つける 3 つの方法について説明しました。以下に、それぞれの方法のサンプルコードを示します。

const data = [
  { "name": "Product A", "price": 100 },
  { "name": "Product B", "price": 200 },
  { "name": "Product C", "price": 300 }
];

const maxPrice = Math.max(...data.map(item => item.price));
console.log(maxPrice); // 300を出力

const data = [
  { "name": "Product A", "price": 100 },
  { "name": "Product B", "price": 200 },
  { "name": "Product C", "price": 300 }
];

const maxPrice = data.reduce((max, item) => Math.max(max, item.price), 0);
console.log(maxPrice); // 300を出力

const data = [
  { "name": "Product A", "price": 100 },
  { "name": "Product B", "price": 200 },
  { "name": "Product C", "price": 300 }
];

const maxPrice = _.max(data, 'price');
console.log(maxPrice); // 300を出力

説明

上記のコードは、それぞれ data という JSON 配列オブジェクトを定義します。この配列は、3 つの製品とその価格情報を含むオブジェクトで構成されています。
各コード例では、maxPrice 変数に JSON 配列オブジェクト内の "price" プロパティの最大値を格納します。
それぞれの方法で、異なるアプローチを使用して最大値を求めています。

補足

これらの例は、"price" プロパティの最大値を見つけることに特化しています。他のプロパティの最大値を見つけるには、コードを適宜変更する必要があります。
実際のコードでは、エラー処理や追加の検証ロジックを実装する必要がある場合があります。

JavaScript で JSON 配列オブジェクトの最大値を見つける：その他の方法

前述の 3 つの方法に加えて、JavaScript で JSON 配列オブジェクトの最大値を見つけるには、他にもいくつかの方法があります。以下に、2 つの追加方法をご紹介します。

forループを使用する

古典的な for ループを使用して、JSON 配列オブジェクトをイテレーションし、現在の最大値を追跡することができます。以下は、"price" プロパティの最大値を見つける例です。

const data = [
  { "name": "Product A", "price": 100 },
  { "name": "Product B", "price": 200 },
  { "name": "Product C", "price": 300 }
];

let maxPrice = 0;
for (const item of data) {
  if (item.price > maxPrice) {
    maxPrice = item.price;
  }
}
console.log(maxPrice); // 300を出力

Math.max や Array.prototype.reduce よりも非効率

フォートソートアルゴリズムを使用する

より高度な方法として、JSON 配列オブジェクトを "price" プロパティで降順にソートし、最初の要素の "price" プロパティを最大値として返すこともできます。以下は、ソートアルゴリズムを使用して "price" プロパティの最大値を見つける例です。

const data = [
  { "name": "Product A", "price": 100 },
  { "name": "Product B", "price": 200 },
  { "name": "Product C", "price": 300 }
];

data.sort((a, b) => b.price - a.price);
const maxPrice = data[0].price;
console.log(maxPrice); // 300を出力