JavaScriptでネストされた配列の全要素をセミコロン区切りの文字列に結合する方法

問題の概要

JavaScriptでは、入れ子になった（ネストされた）配列のすべての要素を取り出し、1つの文字列として連結したいケースがあります。ここでは、次のような多次元配列を例に考えてみましょう。

const arr = ['zero', ['one', 'two', 'three', ['four', ['five', 'six', ['seven']]]]];

求められているのは、このような配列を受け取って、全要素をセミコロン（;）で連結した文字列を返す関数です。期待される出力は次のとおりです。

const output = 'zero;one;two;three;four;five;six;seven';

再帰処理を使った実装例

配列の要素がさらに配列になっている場合は、Array.isArray()で判定しながら再帰的に処理するのが基本のアプローチです。

const arr = ['zero', ['one', 'two', 'three', ['four', ['five', 'six', ['seven']]]]];

const buildString = (arr = [], res = '') => {
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      // 要素が配列の場合は再帰呼び出しし、その結果を連結する
      res += buildString(arr[i]);
    } else {
      res += `${arr[i]};`;
    }
  }
  return res;
};

// 末尾の余分なセミコロンを削除して出力
console.log(buildString(arr).replace(/;$/, ''));

出力結果

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

zero;one;two;three;four;five;six;seven

コードの解説

この実装のポイントは以下のとおりです。

• Array.isArray()：各要素が配列かどうかを判定します。
• 再帰呼び出し：要素が配列だった場合は自分自身を再度呼び出し、内側の要素も同じルールで処理します。
• 結果の連結：再帰の戻り値を現在の文字列に加えることで、どれだけ深い階層でも要素を取りこぼさずに処理できます。

注意点として、ネストした配列を見つけた時点でreturnしてしまう実装では、その配列より後ろにある要素が処理されず、意図しない結果になることがあります。再帰の結果を連結する形にしておけば、任意の構造を持つ配列に対しても安全に動作します。

flat() を使ったシンプルな代替案

ES2019以降で利用できるArray.prototype.flat()にInfinityを指定すると、任意の深さにネストされた配列を一度にフラット化できます。これをjoin()と組み合わせれば、わずか1行で同じ結果が得られます。

const arr = ['zero', ['one', 'two', 'three', ['four', ['five', 'six', ['seven']]]]];
const output = arr.flat(Infinity).join(';');
console.log(output); // zero;one;two;three;four;five;six;seven

実行環境や対応ブラウザに制約がなければ、flat()を使う方が簡潔で可読性の高いコードになります。用途に応じて、再帰による柔軟な実装と使い分けるのがおすすめです。