複数の配列データを一つにまとめる方法について

Question

• **前提・実現したいこと **

JavaScriptで、複数の配列データを一つのデータにまとめ、CSVに出力するコードを書いています。
CSVに出力するためのコードは、JavaScript のデータを CSV で保存する内容 を参考にしています。
今回、自分が出力したい配列データは以下の通りです。

var data1 = [
  [1,'A'],
  [2,'B'],
  [3,'C']
];

var data2 = [
  [4,'D'],
  [5,'E'],
  [6,'F']
];

• 実現したい表（CSV形式）

data1-num	data1-alpha	data2-num	data2-alpha
1	"A"	4	"D"
2	"B"	5	"E"
3	"C"	6	"F"

• 改善したい点

上記の二つの配列データを一つのデータにまとめるにあたり、以下のコードを書いたのですが、配列の要素数が多くなっても対応できるような、もっと簡潔な書き方はないでしょうか。

var data = [
  {'data1-num': data1[0][0],'data1-alpha': data1[0][1],'data2-num': data2[0][0],'data2-alpha': data2[0][1]},
  {'data1-num': data1[1][0],'data1-alpha': data1[1][1],'data2-num': data2[1][0],'data2-alpha': data2[1][1]},
  {'data1-num': data1[2][0],'data1-alpha': data1[2][1],'data2-num': data2[2][0],'data2-alpha': data2[2][1]},
];

プログラミング初心者なもので非常に効率の悪いコードしか書けず、大変お恥ずかしいのですが、ご教授いただければ幸いです。

• みなさま、ご回答ありがとうございました！

どの方の回答も発見と驚きの連続で、ベストアンサーを決めるのが大変難しかったです。初心者のわたくしに、真摯に対応してくださり、大変感動しております。ありがとうございました。

Comments

[gentaro]

「実現はできているけど、コードに問題があると思っている」という意味でしょうか？
であれば、「改善したい点」を質問文に書いて下さい。

[morohey]

ご指摘ありがとうございます。わかりにくくてすみません。質問を編集いたしました。「実現はできているけど、もっと簡潔な書き方をご教授いただきたい」ということです。

Answer 1

こんにちは。

この回答では、まず、ご質問に挙げられている、オブジェクトの配列 var dataと同じ内容の配列を作るためのコードを挙げます。その後、追記にて、よりCSVに近い配列を作るコードを示します。

ご質問の要件のうち、今後、何が変わる可能性があるのか？によって、書くコードが変わってくると思います。ご質問に挙げられている与件から、今後どうなる可能性があるのかを思いつくままに挙げてみると、以下が思いつきます。

ご質問に挙げられているコードでは、

• data1 と data2 しかないが、data3, data4 ... と増える可能性がある。
• data1 と data2 はともに要素の数が3で同じだが、いつも同じとは限らない。
• data1およびdata2の要素は、どれも長さが２の配列であるが、今後、3以上になるかもしれない。(つまり、 num, alpha の次のサフィックスが追加されるかもしれない）
• data1およびdata2の要素である配列は、どれも長さが２で同じ長さであるが、常にすべてが同じ長さとは限らない。

上記のような可能性が考えられますが、これらのうち、今後、何が変わるかもしれないのか（または、変わらないのか）がはっきりしていると、リファクタの方向性が決まります。

以下は、上記の可能性のどれであっても、修正すべき箇所がなるべく分かりやすいように、という考え方で作成したコードです。このコードで作られる data は、ご質問にある data と同じ内容の配列になります。

const data1 = [
  [1,'A'],
  [2,'B'],
  [3,'C']
];

const data2 = [
  [4,'D'],
  [5,'E'],
  [6,'F']
];

const toObj = (ary, prefix) => ({
  [`${prefix}-num`]: ary[0],
  [`${prefix}-alpha`]: ary[1]
});

const dataObj = { data1, data2 };

const tmp = Object.entries(dataObj).map(([k, ary]) => ary.map(e => toObj(e, k)));

const data = tmp[0].map((e,i) => ({...e, ...tmp[1][i]}));

console.log(data);

• 動作確認用のサンプル： https://jsfiddle.net/jun68ykt/3w4je19o/4

以上、参考になれば幸いです。

追記

CSV を作るためにより適した配列ということでいえば、ご質問のコードにある data とは違う配列になりますが、以下のような配列のほうがよりCSVに近いと思います。

[
  ["data1-num", "data1-alpha", "data2-num" ,"data2-alpha"],
  [1,"A",4,"D"],
  [2,"B",5,"E"],
  [3,"C",6,"F"]
]

そこで、上記のような配列を得るための、以下のような関数を作成しました。

function makeCSVData(dataObj, columns) {
  const keys = Object.keys(dataObj).sort();  
  
  const lengths = keys.reduce((m, k) => m.set(k, Math.max(...dataObj[k].map(ary => ary.length))), new Map());

  const header = keys.reduce((ary, k) => 
    ary.concat([...Array(lengths.get(k))].map((_, i) => `${k}-${columns[i]}`)), []);
  
  const numRows = Math.max(...Object.values(dataObj).map(ary => ary.length));
  
  const data = [...Array(numRows)].reduce((ary, _, i) => {
      ary.push(keys.reduce((a, k) => 
        a.concat(
          dataObj[k][i] ?
            [...dataObj[k][i], ...Array(lengths.get(k) - dataObj[k][i].length ) ] :
            [...Array(lengths.get(k))]
        ) ,[]));
      return ary;
    },
    [header]);
    
  return data;
}

上記の関数 makeCSVData は以下のように使います。

const data1 = [
  [1,'A'],
  [2,'B'],
  [3,'C']
];

const data2 = [
  [4,'D'],
  [5,'E'],
  [6,'F']
];

const data = makeCSVData({ data1, data2 }, ['num', 'alpha']);

• 上記の動作確認用のサンプル： https://jsfiddle.net/jun68ykt/c0u1vp87/11/

この回答の冒頭に、入力データの様々な拡張性について書きましたが、上記の関数 makeCSVDataはそれらに対応しており、 以下のような入力でも適切に処理してCSV用のデータを生成します。

const d1 = [
  [1,'A'],
  [2,'B'],
  [3,'C'],
  [-1,'a']
];

const d2 = [
  [4,'D', true],
  [5,'E'],
  [6,'F', false, 100]
];

const d3 = [
  [7,'X'],
  [8,'Y'],
  [9,'Z'],
  [-7, 'x'],
  [-8, 'y']  
];

const data = makeCSVData({ d1, d2, d3 }, ['num', 'alpha', 'beta', 'gamma']);

• 上記の動作確認用のサンプル： https://jsfiddle.net/jun68ykt/c0u1vp87/10/

関数 makeCSVDataは、ご質問で提示された与件の範囲をかなり超えた大袈裟なものになってしまいましたが、先の様々な入力の拡張に対応させようとすると、こういうコードになるという一例として参考にして頂ければと思います。

Comments

[morohey]

jun68ykt様、ご回答ありがとうございます。
丁寧で良質なご回答に、ただただ感激しております。わたくしがあげたデータに対し、様々な可能性を提示してくださり、自分自身、データについての捉え方が画一的であったことに気がつきました。よりＣＳＶに近い配列を作るコードも大変参考になりました。本当にありがとうございました。

[jun68ykt]

どういたしまして。解決されたようでよかったです????

Answer 2

reduceを使用すればもっと簡潔に書けます。
下記のコードであれば記述が明快なので
moroheyさんが見たときにわかりやすいかと。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

var data1 = [
  [1,'A'],
  [2,'B'],
  [3,'C']
];

var data2 = [
  [4,'D'],
  [5,'E'],
  [6,'F']
];

var data = data1.reduce((a, c, i) => {
  a.push({
    'data1-num': c[0],
    'data1-alpha': c[1],
    'data2-num': data2[i][0],
    'data2-alpha': data2[i][1]
  });
  return a;
}, []);

console.log(data);
// 0: {data1-num: 1, data1-alpha: "A", data2-num: 4, data2-alpha: "D"}
// 1: {data1-num: 2, data1-alpha: "B", data2-num: 5, data2-alpha: "E"}
// 2: {data1-num: 3, data1-alpha: "C", data2-num: 6, data2-alpha: "F"}

Comments

[morohey]

yasutomi様、ご回答ありがとうございます。
非常に明快なコードに感動しております。reduceについては知らなかったので、大変勉強になりました。ありがとうございました！

Answer 3

なんとなくリンク先をみて配列でもできそうだと思ったので形式が違いますが、こういうのを考えました

var data1 = [
    [1,'A'],
    [2,'B'],
    [3,'C']
];

var data2 = [
    [4,'D'],
    [5,'E'],
    [6,'F']
];
const zipped = data1.map((e,i)=> e.concat(data2[i]));
const header = [zipped[0].map((e,i) => `data${(Math.floor(i /2) + 1)}-${(i%2?"alpha":"num")}`)];
console.log(header.concat(zipped));

Comments

[morohey]

papinianus様、ご回答ありがとうございます。
形式は違えど、大変参考になりました！感謝いたします。

Answer 4

var data1 = [
  [1,'A'],
  [2,'B'],
  [3,'C']
];

var data2 = [
  [4,'D'],
  [5,'E'],
  [6,'F']
];

var result = [], key, func = ( v, i ) => {
	if ( !result[ i ] ) result[ i ] = {};
	result[ i ][ key + '-num'   ] = v[ 0 ];
	result[ i ][ key + '-alpha' ] = v[ 1 ];
};

key = 'data1';
data1.forEach( func );
key = 'data2';
data2.forEach( func );

console.dir( result );
```**動くサンプル：**[https://jsfiddle.net/kscu5yhf/](https://jsfiddle.net/kscu5yhf/)

---

【Array.prototype.forEach() - JavaScript | MDN】
[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)

Comments

[morohey]

kei344様、回答ありがとうございます。
初心者でもわかりやすく、かつ簡潔なコードに感動致しました。おかげさまで、思い通りのコードを書くことができました。

Answer 5

二次元配列

• JavaScript のデータを CSV で保存する - 無駄と文化

こちらのコードは二次元配列をサポートしているようです。
二次元配列は可搬性が高く、CSV形式とも親和性の高い形式です。

'use strict';
function arraysToArray (...arrayList) {
  const results = [];

  for (let array of arrayList) {
    for (let j = 0, len = array.length; j < len; ++j) {
      const cells = results[j] || (results[j] = []);
      cells.push(...array[j]);
    }
  }

  return results;
}

var data1 = [
  [1,'A'],
  [2,'B'],
  [3,'C']
];

var data2 = [
  [4,'D'],
  [5,'E'],
  [6,'F']
];

data1.unshift(['data1-num','data1-alpha']);
data2.unshift(['data2-num','data2-alpha']);

const array = arraysToArray(data1, data2);

console.table(array);

ヘッダ行

前コードでは、tableのヘッダ行を unshift で付け足していますが、本来、データと紐づくべき情報なので、予め、dataに入れておくか、別オブジェクトで関連付けを作る仕組みがあると良いと思います。

Re: morohey さん

Comments

[morohey]

think49様、ご回答ありがとうございます。
リンク先の情報も踏まえた上で、非常にわかりやすく、簡潔なコードを考えてくださり、感激です。ありがとうごさいました。