JavaScriptで2つの配列の差分（共通しない要素）を見つける方法

はじめに

JavaScriptでは、2つの配列を比較して「片方にしか存在しない要素」を取り出したい場面がよくあります。例えば、以下のような2つの数値配列があったとします。

const arr1 = [12, 54, 2, 4, 6, 34, 3];
const arr2 = [54, 2, 5, 12, 4, 1, 3, 34];

この2つの配列には、両方に含まれる共通の要素（12、54、2、4、3、34）があります。一方で、arr1 にだけある要素は「6」、arr2 にだけある要素は「5」と「1」です。

今回は、2つの配列を受け取って、どちらか一方にのみ存在する要素をすべて返す関数を作成します。

実装コード

以下がその実装例です。

const arr1 = [12, 54, 2, 4, 6, 34, 3];
const arr2 = [54, 2, 5, 12, 4, 1, 3, 34];

const difference = (first, second) => {
   const res = [];
   // first 側で、second に存在しない要素を追加
   for(let i = 0; i < first.length; i++){
      if(second.indexOf(first[i]) === -1){
         res.push(first[i]);
      }
   };
   // second 側で、first に存在しない要素を追加
   for(let j = 0; j < second.length; j++){
      if(first.indexOf(second[j]) === -1){
         res.push(second[j]);
      };
   };
   return res;
};

console.log(difference(arr1, arr2));

コードの解説

処理の流れはシンプルです。

• まず結果を格納する空の配列 res を用意します。
• 1つ目のループでは、first の各要素に対して indexOf() を使い、second に存在しない場合（戻り値が -1 の場合）のみ res に追加します。
• 2つ目のループでは逆に、second の各要素が first に存在しない場合のみ追加します。
• 最終的に、両方のループで集めた「差分の要素」をまとめて返します。

実行結果

コンソールには次のように出力されます。

[ 6, 5, 1 ]

ご覧のとおり、両方の配列に共通して存在する要素は除外され、片方にしかない要素だけが抽出されています。

補足：より簡潔な書き方

filter() と includes() を組み合わせると、同じ処理をもっと簡潔に書くこともできます。

const difference = (first, second) => [
   ...first.filter(el => !second.includes(el)),
   ...second.filter(el => !first.includes(el))
];

こちらの書き方は可読性が高く、モダンなJavaScriptらしい実装と言えるでしょう。

まとめ

2つの配列の差分を求める基本的な考え方は、「相手側の配列に存在するかどうかを1つずつ確認し、存在しないものだけを集める」というものです。indexOf() や includes()、filter() を活用することで、短いコードで効率的に差分を抽出できます。