【JavaScript】filterとindexOfで配列の重複を削除する方法

配列に同じ値が何度も入ってしまい、整理したいと思ったことはありませんか？
JavaScriptでは、filter と indexOf を組み合わせることで、重複した要素を簡単に取り除くことができます。
この記事では、その基本的な書き方をわかりやすいコード例とともに解説します。

コード

const animals = ['いぬ', 'ねこ', 'うま', 'うさぎ', 'いぬ', 'きつね', 'くま', 'ねこ', 'ひつじ'];

const uniqueAnimals = animals.filter((item, index) => {
  return animals.indexOf(item) === index;
});

console.log(uniqueAnimals);

解説

1. 配列の用意

const animals = ['いぬ', 'ねこ', 'うま', 'うさぎ', 'いぬ', 'きつね', 'くま', 'ねこ', 'ひつじ'];

ここで、動物の名前を配列に入れています。
ただし「いぬ」「ねこ」が 重複 しています。

---

2. filter を使う

const uniqueAnimals = animals.filter((item, index) => {
  return animals.indexOf(item) === index;
});

filter は配列を順番にチェックして、条件に合う要素だけ残すメソッドです。

この場合の条件は：

animals.indexOf(item) === index

---

3. indexOf の役割

• indexOf(item) は、配列の中で その要素が最初に出てくる位置（インデックス番号） を返します。
  • 例：animals.indexOf('いぬ') → 0 （最初の「いぬ」の位置）

---

4. 条件式の意味

• animals.indexOf(item) === index
  → 「今見ている要素が、その要素の 最初の出現位置 と同じなら残す」

つまり：

• 最初に出てきた「いぬ」 → indexOf('いぬ') = 0 と index = 0 が一致するので残す
• 2回目に出てきた「いぬ」 → indexOf('いぬ') = 0 と index = 4 が違うので削除

---

5. 結果

console.log(uniqueAnimals);
// ['いぬ', 'ねこ', 'うま', 'うさぎ', 'きつね', 'くま', 'ひつじ']

重複していた「いぬ」と「ねこ」が整理され、ユニークな要素だけの配列になります。

---

まとめ

• filter → 条件に合う要素だけ残す
• indexOf → 最初に出てきた位置を返す
• indexOf(item) === index → 最初の要素だけ残し、2回目以降は除外

---

このコードは、配列から重複を削除する基本的な書き方としてよく使われます。

includes を使った書き方

includes を使っても配列から重複を削除することができます。

const animals = ['いぬ', 'ねこ', 'うま', 'うさぎ', 'いぬ', 'きつね', 'くま', 'ねこ', 'ひつじ'];

const uniqueAnimals = [];
animals.forEach((animal) => {
  if (!uniqueAnimals.includes(animal)) {
    uniqueAnimals.push(animal);
  }
});

console.log(uniqueAnimals);

1. 配列の用意

const animals = ['いぬ', 'ねこ', 'うま', 'うさぎ', 'いぬ', 'きつね', 'くま', 'ねこ', 'ひつじ'];

動物の名前を並べた配列です。ここにも「いぬ」「ねこ」が重複しています。

---

2. 結果を入れる新しい配列を用意

const uniqueAnimals = [];

ここに 重複のない要素だけ を順番に入れていきます。

---

3. forEach で順番にチェック

animals.forEach((animal) => {
  if (!uniqueAnimals.includes(animal)) {
    uniqueAnimals.push(animal);
  }
});

• forEach → 配列 animals を順番に取り出して処理
• uniqueAnimals.includes(animal) → すでにその要素が入っているかどうか調べる
• !uniqueAnimals.includes(animal) → まだ入っていなければ true
• uniqueAnimals.push(animal) → 新しい配列に追加

---

4. 結果

console.log(uniqueAnimals);
// ['いぬ', 'ねこ', 'うま', 'うさぎ', 'きつね', 'くま', 'ひつじ']

重複が消えて、1つずつだけ残りました。

---

まとめ

• この方法は「もしまだ入っていなければ追加する」という考え方
• filter + indexOf よりコードは少し長いですが、処理の流れが直感的でわかりやすい

---

• 短く書きたいなら filter + indexOf
• 処理の流れをわかりやすく書きたいなら forEach + includes

という使い分けができます。

Web制作を学ぶならUdemy

私は動画学習プラットフォームのUdemyでプログラミングを学習しています。
HTML・CSS・JavaScriptの基本から本格的なWebアプリ制作まで学べます。

興味がある方はUdemyの講座をチェックしてください。

実際に私が受講した講座はこちら👇

Udemyでは頻繁にセールをやっていて、90％オフになることも！
気になる講座はセール時に購入するのがおすすめです。