【JavaScript】連想配列から完全一致したデータを取り除く方法（Lodash）

2024年1月29日 11:24

はじめに

こんにちは、SHIFT の IT ソリューション部に所属している Tanaka です。
前回は、二次元配列（多次元配列）を連想配列に変換する方法を記事にしました。
これで、一次元配列 → 二次元配列 → 連想配列と順番に変換ができるようになりました。
今回は Lodash を使って、連想配列から、keyとvalueの両方が完全一致するデータを取り除く方法を紹介しようと思います。

すぐ使える！重複削除用フォーマット

すぐ使える重複削除用のコードを載せておきます。皆さん使ってみてくださいね！

事前準備

npm を使ってインストール
npm install --save lodash
yarn を使ってインストール
yarn add lodash
インポートして使用

import lodash from "lodash";
// 公式ドキュメント等ではimport _ from "lodash";とするのが一般的ですが、本記事内では分かりやすいようにlodashにしています。

完全一致するデータを重複削除するフォーマット

const 削除後の変数名 = lodash.uniqBy(
  削除前の変数名,
  (v) => `${v.キー1}${v.キー2}`
);
//3つ以上キーがある場合は、${v.キーn}を追加して使ってください。

Lodash とは何か、なぜ使うのか

Lodash とは、配列、数値、オブジェクト、文字列などを扱う関数をまとめて提供しているライブラリです。自力で実装するのが大変な処理を、メソッドとしてひとまとまりにしてくれているので大変便利なライブラリです。Lodash 公式サイト

JavaScriptでプログラミングを行う際、特定の処理を自力で実装するには複数行のコードが必要になることがよくあります。
しかし、なるべくコードが長く、読みにくくなることは避けたいです。

そこでLodash（に限らずライブラリ全般）の出番です。Lodashはコードが複雑化しがちな処理を一つのメソッドで実現します。

自分で複雑な処理を考えなくていいため、自分で実装するより実装コストが低く済みます。

これがLodashなどのライブラリを使う理由です。

ライブラリを使わないとどうなるのか

Lodashなどのライブラリを使わないとどうなるのかを見てみましょう。
例えば、連想配列からkeyとvalueの両方が完全一致するデータを取り除く処理を自力で実装する場合、以下のようなコードが必要になります。

const fruits = [
  { name: "Apple", color: "Red" },
  { name: "Apple", color: "Red" },
  { name: "Orange", color: "Orange" },
  { name: "Grape", color: "Purple" },
  { name: "Strawberry", color: "Red" },
];

const uniqueData = [];
const keys = [];

for (const fruit of fruits) {
  const key = `${fruit.name}${fruit.color}`;
  if (!keys.includes(key)) {
    uniqueData.push(fruit);
    keys.push(key);
  }
}

console.log(uniqueData);

このコードでは、まず空の配列uniqueDataとkeysを用意します。そして、fruitsの各要素をループしながら、nameとcolorの値を連結した文字列を作成し、既にkeysに存在するかどうかを確認します。存在しない場合は、uniqueDataとkeysに要素を追加します。

このように、Lodashを使わない場合、ループ処理や配列の操作を自力で実装する必要があります。実装が億劫な上、コードが長くなり可読性が落ちるだけでなく、コードの保守性も下がります。

Lodashを使うとどうなるか

一方、Lodashを使って実装するとどうでしょうか。

import lodash from "lodash";

const fruits = [
  { name: "Apple", color: "Red" },
  { name: "Apple", color: "Red" },
  { name: "Orange", color: "Orange" },
  { name: "Grape", color: "Purple" },
  { name: "Strawberry", color: "Red" },
];

const uniqueData = lodash.uniqBy(fruits, (v) => `${v.name}${v.color}`);

console.log(uniqueData);

/*
出力結果は
[
  { name: 'Apple', color: 'Red' },
  { name: 'Orange', color: 'Orange' },
  { name: 'Grape', color: 'Purple' },
  { name: 'Strawberry', color: 'Red' }
]
*/

とてもシンプルな実装になりましたね。
このようにLodashなどのライブラリを使うと、実装コストが低くて済みます。

コード解説

1 行ずつコードを解説します。

import lodash from "lodash";

Lodash をインポートします。

const fruits = [
  { name: "Apple", color: "Red" },
  { name: "Apple", color: "Red" },
  { name: "Orange", color: "Orange" },
  { name: "Grape", color: "Purple" },
  { name: "Strawberry", color: "Red" },
];

fruits という変数に、果物の情報を格納したオブジェクトの配列を代入します。

const uniqueData = lodash.uniqBy(fruits, (v) => `${v.name}${v.color}`);

lodash.uniqBy メソッドを使用して、fruits 配列から重複した要素を削除し、結果を uniqueData という変数に格納します。

lodash.uniqBy メソッドの第一引数には、重複を削除したい配列（fruits）を指定しています。第二引数には、重複を判定するための基準を指定する関数を渡しています。

この関数では、fruits の各要素を v に入れて、 name プロパティと color プロパティの各値を、テンプレートリテラルで連結した文字列を返しています。
つまり、 "AppleRed", "OrangeOrange" といった文字列が返され、それが重複判定の基準となります。

console.log(uniqueData);

最後に、 uniqueData の値をコンソールに出力しています。これにより、重複が削除された結果の配列が表示されます。

Lodashを使う実装コスト以外のメリット

Lodashを使うと実装コストを低くできますが、メリットはそれだけでしょうか？
実は他にもメリットがあります。

その1
メジャーなメソッドは他のエンジニアも知っている可能性が高く、知らなくてもナレッジの共有がしやすいため、実装の意図を他のエンジニアが汲みやすくなります。

その2
多くの開発者が使われるということは、自作メソッドに比べて圧倒的に再利用されており、それだけ品質が高い（バグが潰されている、フィードバックを受けて改良されている）ことが期待できます。

つまり、他の開発者も理解しやすく、使うだけでコード品質向上につながります。

これがLodashなどのライブラリを使う実装コスト以外のメリットです。

おわりに

今回の記事では、lodash を使って連想配列から重複したデータを取り除く方法と、ライブラリ利用のメリットを紹介しました。
この記事が読者の皆様の助けになれば幸いです。

もっと知りたい方はこちら

筆者の過去の記事

執筆者プロフィール: Atsuhito Tanaka
株式会社SHIFT ITソリューション部所属。現在は、サービス改革部で、テックブーストプロジェクトに参画中。

お問合せはお気軽に

SHIFTのサービスについて（サービスサイト）

SHIFTの導入事例
https://service.shiftinc.jp/case/

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら

PHOTO：UnsplashのGabriel Heinzer

最後まで読んでくださり、ありがとうございます！

御社サービスのご相談はお気軽に。

ソフトウェア品質のプロがお伺いします。