配列データの処理において、重複した値を取り除く作業はよく必要になります。今回では、TypeScriptやJavaScriptを使用して配列内の重複データを簡単かつ効率的に取り除く方法を説明します。

なぜ重複除去が必要か

重複データを持つ配列を処理する場合、パフォーマンスや正確なデータ分析に悪影響を与えることがあります。例えば、APIから取得したデータやユーザー入力を扱う際に、意図せず重複が発生することがあります。そのため、データのクリーンアップを行うことが重要です。

Setを使った重複除去

最もシンプルで効率的な方法は、Setオブジェクトを使用することです。Setは一意の値のみを保持するコレクションで、重複する値を自動的に除外します。

例

const array = ['A', 'B', 'A', 'C', 'B'];
const uniqueArray = Array.from(new Set(array));

console.log(uniqueArray); // 結果: ['A', 'B', 'C']

配列がプリミティブ型（文字列や数値など）の値を持つ場合に非常に有効です。Setは重複を自動的に削除するので、シンプルかつパフォーマンスも高いです。

filter() と indexOf() を使った方法

filter()メソッドとindexOf()を組み合わせて、重複データを除去することも可能です。この方法は、カスタムロジックを追加したい場合やSetを使えない場合に有効です。

例

    const array = ['A', 'B', 'A', 'C', 'B'];
    const uniqueArray = array.filter((value, index, self) => {
      return self.indexOf(value) === index;
    });

    console.log(uniqueArray); // 結果: ['A', 'B', 'C']

indexOf()は配列内の特定の要素が最初に出現するインデックスを返します。filter()と組み合わせることで、最初に出現した要素だけを保持し、重複を取り除きます。

オブジェクト配列の重複データを除去する

オブジェクトを含む配列の重複除去には、少し異なるアプローチが必要です。オブジェクト同士の比較は、プリミティブ型とは異なり、Setでは直接扱えないため、カスタムロジックを使ってユニークな値を抽出する必要があります。

例

const data = [
  { name: 'D', description: 'D' },
  { name: 'A', description: 'A' },
  { name: 'E', description: 'E' },
  { name: 'E', description: 'E' }
];

const uniqueData = data.filter((item, index, self) => 
  index === self.findIndex((t) => t.name === item.name && t.description === item.description)
);

console.log(uniqueData);
// 結果: [{ name: 'D', description: 'D' }, { name: 'A', description: 'A' }, { name: 'E', description: 'E' }]

このコードでは、findIndex()を使って、配列の中で最初に出現したオブジェクトのみを保持し、同じnameとdescriptionを持つオブジェクトの重複を排除しています。この方法を使えば、オブジェクト内のプロパティを基準にして重複を除去することができます。

TypeScriptでの型安全な重複除去

TypeScriptでは、上記の方法を型安全に実装することで、より堅牢なコードを書くことができます。型を使って、扱うデータの構造を定義することが推奨されます。

例

interface Item {
  name: string;
  description: string;
}

const data: Item[] = [
  { name: 'D', description: 'D' },
  { name: 'A', description: 'A' },
  { name: 'E', description: 'E' },
  { name: 'E', description: 'E' }
];

const uniqueData = data.filter((item, index, self) => 
  index === self.findIndex((t) => t.name === item.name && t.description === item.description)
);

console.log(uniqueData);

TypeScriptでは、Itemインターフェースを使用してデータの構造を明示的に定義しています。これにより、コードの可読性が向上し、型エラーを防止できる。

最後

重複データを除去する際、配列のサイズが大きくなると、パフォーマンスが問題になることがあります。一般的に、Setを使った方法は高速ですが、filter()やfindIndex()を使った方法は配列が大きくなるほど処理時間が増加する。

特に、オブジェクトの比較では、filter()＋findIndex()の方法が計算量が大きくなる可能性があります。大規模なデータセットを扱う場合は、Mapを使った方法なども検討するとよいでしょう。