初めに
JavaScript で配列を扱っていると、重複要素を取り除いて「ユニーク」な配列を得たい場面がたびたびあります。
たとえば、タグ一覧の整理やフォーム入力値の精査、API レスポンスの前処理などです。
本記事では元の並び順を保ちながら重複を除去する関数 removeDuplicates() を実装し、その考え方を初心者の方にもわかりやすく解説します。
問題文
数値または文字列の配列 arr を受け取り、重複を除去した新しい配列を返す関数 removeDuplicates(arr) を作成してください。
ポイントは元の順番を壊さないことです。
// 期待される実行例
console.log(removeDuplicates([1, 2, 2, 2, 3, 8, 9, 7, 4, 1]));
// 出力 → [1, 2, 3, 8, 9, 7, 4]必要な関数・構文（かんたん例付き）
| 構文・メソッド | 用途 | ミニ例 |
|---|---|---|
Set |
重複しないコレクションを作る | new Set([1,1,2]) // → Set {1,2} |
Array.prototype.filter() |
条件を満たす要素だけ抜き出す | [1,2,3].filter(n => n > 1) // → [2,3] |
スプレッド構文 ... |
配列や Set を展開してコピー | [...new Set([1,1,2])] // → [1,2] |
解くためのヒント・考え方
- 重複検知に
Setを活用する。Set は同じ値を 2 度格納しません。 filter()で配列を頭から走査し、
まだ出現していない要素だけ結果に残す。- この時、
sort()を使わないことで順序を保持できます。
正解コード
/**
* 配列から重複要素を取り除き、元の順序を保った新しい配列を返す
* @param {Array<number|string>} arr
* @returns {Array<number|string>}
*/
function removeDuplicates(arr) {
const seen = new Set(); // すでに出現した値を記録
return arr.filter(item => {
if (seen.has(item)) return false; // 2回目以降はスキップ
seen.add(item); // 初出なら記録して残す
return true;
});
}
// 動作確認
console.log(removeDuplicates([1, 2, 2, 2, 3, 8, 9, 7, 4, 1]));
// → [1, 2, 3, 8, 9, 7, 4]
よくある誤り：[...new Set(arr)].sort() では順序が変わる
Set だけでユニーク化し、sort() で並べ替えると順序基準が辞書順／数値順に置き換わります。
そのため元の順序を保つ要件を満たせません。filter パターンを覚えましょう。
まとめ ＋ 将来どういった場面で応用が効くか
- filter × Set で「重複排除 ＆ 順序保持」をシンプルに実装できました。
- タグリスト、カテゴリ一覧、入力バリデーションなどのフロントエンド前処理で大活躍。
- さらに発展させて、オブジェクト配列から特定キーだけ抜き出してユニーク化する場合も同じ考え方で応用できます。
ぜひ日々の開発に組み込んで、コードをもっとクリーンに保ちましょう！
// 動作確認 console.log(removeDuplicates([1, 2, 2, 2, 3, 8, 9, 7, 4, 1])); // ⇒ [1, 2, 3, 8, 9, 7, 4]まとめ ＋ 将来の応用シーン
- 本記事では、配列内の重複を取り除きつつ元の順序を保つ方法として、
filterとSetの組み合わせを解説しました。 - ユニークデータの取得は、タグ一覧の整理、フォーム入力チェック、APIから取得したリストの重複排除 など、さまざまな場面で役立ちます。
- さらに発展させると、オブジェクトの配列から特定キーでユニークを取るロジックにも応用可能です。
ぜひ今回のロジックを日々のJavaScript開発に活用してみてください！
コメント