トップ JavaScriptに関する質問複数の配列データを一つにまとめる方法について

編集履歴

回答編集履歴

テキスト修正

2019/07/14 02:33

投稿

jun68ykt

スコア9058

test CHANGED Viewed

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

テキスト修正

2019/07/14 02:33

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -218,7 +218,7 @@
-この回答の冒頭に、入力データの様々な可能性について書きましたが、これらに対応して、上記の関数 `makeCSVData` は以下のような入力にも対応します。
+この回答の冒頭に、入力データの様々な可能性について書きましたが、上記の関数 `makeCSVData`はそれらに対応しており、 以下のような入力でも適切に処理してCSV用のデータを生成します。
@@ -276,4 +276,4 @@
-ご質問で提示された与件の範囲をかなり超えた大袈裟なものになっているかもしれませんが、汎用化を進めると、こういうコードになるという一例として参考にして頂ければと思います。
+関数 `makeCSVData`は、ご質問で提示された与件の範囲をかなり超えた大袈裟なものになってしまいましたが、先の様々な入力の拡張に対応させようとすると、こういうコードになるという一例として参考にして頂ければと思います。

テキスト修正

2019/07/14 02:22

投稿

jun68ykt

スコア9058

test CHANGED Viewed

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

テキスト修正

2019/07/13 22:28

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -2,7 +2,7 @@
-この回答では、まず、ご質問に挙げられている、オブジェクトの配列 `var data`と同じ内容の配列を作るためのコードを挙げます。その後、追記にて、よりＣＳＶに近い配列を作るコードを示します。
+この回答では、まず、ご質問に挙げられている、オブジェクトの配列 `var data`と同じ内容の配列を作るためのコードを挙げます。その後、追記にて、よりCSVに近い配列を作るコードを示します。
@@ -22,7 +22,7 @@
-上記のような可能性が考えられますが、これらのうち、今後、何が変わるかもしれないのか（または、変わらないのか）がはっきりしていると、リファクタの方向性も決まってきます。
+上記のような可能性が考えられますが、これらのうち、今後、何が変わるかもしれないのか（または、変わらないのか）がはっきりしていると、リファクタの方向性が決まります。

テキスト修正

2019/07/13 22:13

投稿

jun68ykt

スコア9058

test CHANGED Viewed

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

テキスト修正

2019/07/13 21:50

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -18,7 +18,7 @@
 - `data1`および`data2`の要素は、どれも長さが２の配列であるが、今後、3以上になるかもしれない。(つまり、 `num`, `alpha` の次のサフィックスが追加されるかもしれない）
-- `data1`および`data2`の要素である配列は、どれも長さが２で同じ長さであるが、今後、そうでない場合があるかもしれない。
+- `data1`および`data2`の要素である配列は、どれも長さが２で同じ長さであるが、常にすべてが同じ長さとは限らない。

テキスト修正

2019/07/13 21:49

投稿

jun68ykt

スコア9058

test CHANGED Viewed

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

テキスト修正

2019/07/13 21:47

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -218,7 +218,7 @@
-以下のような入力にも対応します。
+この回答の冒頭に、入力データの様々な可能性について書きましたが、これらに対応して、上記の関数 `makeCSVData` は以下のような入力にも対応します。

テキスト修正

2019/07/13 20:10

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -124,7 +124,7 @@
-ですので、上記のような配列を得るためのコードを考え、以下のような関数を作成しました。
+そこで、上記のような配列を得るための、以下のような関数を作成しました。
@@ -276,4 +276,4 @@
-ご質問で提示された与件の範囲をかなり超えてしまっているかもしれませんが、汎用化を進めると、こういうコードになるという一例として参考にして頂ければと思います。
+ご質問で提示された与件の範囲をかなり超えた大袈裟なものになっているかもしれませんが、汎用化を進めると、こういうコードになるという一例として参考にして頂ければと思います。

テキスト修正

2019/07/13 15:20

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -2,23 +2,7 @@
-この回答では、まず、ご質問に挙げられている、オブジェクトの配列 `data`
-```
-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]},
-];
-```
-と同じ内容の配列 `data` を作ることを目的としたコードを回答し、追記にて、よりＣＳＶに近い配列を作るコードを示します。
+この回答では、まず、ご質問に挙げられている、オブジェクトの配列 `var data`と同じ内容の配列を作ることを目的としたコードを回答します。その後、追記にて、よりＣＳＶに近い配列を作るコードを示します。

テキスト修正

2019/07/13 15:17

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -118,7 +118,7 @@
-ご質問のコードにある `data` とは違う内容の配列になりますが、CSV を作るためにより適した配列ということでいえば、以下のような配列のほうが、より目的とするＣＳＶに近いと思います。
+CSV を作るためにより適した配列ということでいえば、ご質問のコードにある `data` とは違う配列になりますが、以下のような配列のほうがよりCSVに近いと思います。

テキスト修正

2019/07/13 15:06

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -234,7 +234,7 @@
-関数 makeCSVData は以下のような入力にも対応します。
+以下のような入力にも対応します。

テキスト修正

2019/07/13 14:46

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -2,7 +2,7 @@
-この回答では、ご質問に挙げられている、オブジェクトの配列 `data`
+この回答では、まず、ご質問に挙げられている、オブジェクトの配列 `data`
 ```
@@ -18,7 +18,7 @@
 ```
-と同じ内容の配列 `data` を作ることを目的としたコードを回答します。
+と同じ内容の配列 `data` を作ることを目的としたコードを回答し、追記にて、よりＣＳＶに近い配列を作るコードを示します。

テキスト修正

2019/07/13 14:44

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -111,3 +111,185 @@
 以上、参考になれば幸いです。
+### 追記
+ご質問のコードにある `data` とは違う内容の配列になりますが、CSV を作るためにより適した配列ということでいえば、以下のような配列のほうが、より目的とするＣＳＶに近いと思います。
+```javascript
+[
+  ["data1-num", "data1-alpha", "data2-num" ,"data2-alpha"],
+  [1,"A",4,"D"],
+  [2,"B",5,"E"],
+  [3,"C",6,"F"]
+]
+```
+ですので、上記のような配列を得るためのコードを考え、以下のような関数を作成しました。
+```javascript
+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` は以下のように使います。
+```javascript
+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/](https://jsfiddle.net/jun68ykt/c0u1vp87/11/)
+関数 makeCSVData は以下のような入力にも対応します。
+```javascript
+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/](https://jsfiddle.net/jun68ykt/c0u1vp87/10/)
+ご質問で提示された与件の範囲をかなり超えてしまっているかもしれませんが、汎用化を進めると、こういうコードになるという一例として参考にして頂ければと思います。

テキスト修正

2019/07/13 14:43

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -2,7 +2,7 @@
-この回答では、ご質問に挙げられているコードにあるオブジェクトの配列
+この回答では、ご質問に挙げられている、オブジェクトの配列 `data`
 ```
@@ -18,7 +18,7 @@
 ```
-と同じ内容の配列を作ることを目的としたコードを回答します。
+と同じ内容の配列 `data` を作ることを目的としたコードを回答します。
@@ -82,19 +82,21 @@
-const data = { data1, data2 };
+const dataObj = { data1, data2 };
-const tmp = Object.entries(data).map(([k, ary]) => ary.map(e => toObj(e, k)));
+const tmp = Object.entries(dataObj).map(([k, ary]) => ary.map(e => toObj(e, k)));
-const result = tmp[0].map((e,i) => ({...e, ...tmp[1][i]}));
+const data = tmp[0].map((e,i) => ({...e, ...tmp[1][i]}));
-console.log(result);
+console.log(data);
@@ -102,7 +104,7 @@
-- **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/3w4je19o/3](https://jsfiddle.net/jun68ykt/3w4je19o/3)
+- **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/3w4je19o/4](https://jsfiddle.net/jun68ykt/3w4je19o/4)

テキスト修正

2019/07/13 11:52

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -2,7 +2,7 @@
-この回答は、ご質問に挙げられているコードにある
+この回答では、ご質問に挙げられているコードにあるオブジェクトの配列
 ```
@@ -18,7 +18,7 @@
 ```
-によって作られる、オブジェクトの配列`data` と同じ内容の配列を作ることを目的としたコードを回答します。
+と同じ内容の配列を作ることを目的としたコードを回答します。

テキスト修正

2019/07/13 09:38

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -1,4 +1,24 @@
-こんにちは
+こんにちは。
+この回答は、ご質問に挙げられているコードにある
+```
+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]},
+];
+```
+によって作られる、オブジェクトの配列`data` と同じ内容の配列を作ることを目的としたコードを回答します。

テキスト修正

2019/07/13 09:36

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -66,7 +66,7 @@
-const tmp = Object.keys(data).map(k => data[k].map(e => toObj(e, k)));
+const tmp = Object.entries(data).map(([k, ary]) => ary.map(e => toObj(e, k)));
@@ -82,7 +82,7 @@
-- **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/3w4je19o/2](https://jsfiddle.net/jun68ykt/3w4je19o/2)
+- **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/3w4je19o/3](https://jsfiddle.net/jun68ykt/3w4je19o/3)

テキスト修正

2019/07/13 08:27

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -6,7 +6,7 @@
-ご質問に挙げられてるコードでは、
+ご質問に挙げられているコードでは、
 - `data1` と `data2` しかないが、`data3`, `data4` ... と増える可能性がある。

テキスト修正

2019/07/13 08:15

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -2,21 +2,23 @@
-ご質問の要件のうち、今後、何が変わる可能性があるのか？によって、書くコードが変わってくると思います。ご質問に挙げられている与件から、今後どうなる可能性があるのかを思いつくままに挙げてみると、
+ご質問の要件のうち、今後、何が変わる可能性があるのか？によって、書くコードが変わってくると思います。ご質問に挙げられている与件から、今後どうなる可能性があるのかを思いつくままに挙げてみると、以下が思いつきます。
-- 質問には、`data1` と `data2` しかないが、`data3`, `data4` ... と増える可能性がある。
+ご質問に挙げられてるコードでは、
-- 質問では、`data1` と `data2` はともに要素の数が3で同じだが、いつも同じとは限らない。
+- `data1` と `data2` しかないが、`data3`, `data4` ... と増える可能性がある。
-- 質問では、`data1`および`data2`の要素は、どれも長さが２の配列であるが、今後、3以上になるかもしれない。(つまり、 `num`, `alpha` の次のサフィックスが追加されるかもしれない）
+- `data1` と `data2` はともに要素の数が3で同じだが、いつも同じとは限らない。
+- `data1`および`data2`の要素は、どれも長さが２の配列であるが、今後、3以上になるかもしれない。(つまり、 `num`, `alpha` の次のサフィックスが追加されるかもしれない）
-- 質問では、`data1`および`data2`の要素である配列は、どれも長さが２で同じ長さであるが、今後、そうでない場合があるかもしれない。
+- `data1`および`data2`の要素である配列は、どれも長さが２で同じ長さであるが、今後、そうでない場合があるかもしれない。
-といったことが考えられますが、このうち、今後、何が変わるかもしれないのか（または、変わらないのか）がはっきりしていると、リファクタの方向性も決まってきます。
+上記のような可能性が考えられますが、このうち、今後、何が変わるかもしれないのか（または、変わらないのか）がはっきりしていると、リファクタの方向性も決まってきます。

テキスト修正

2019/07/13 07:55

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -12,7 +12,7 @@
 - 質問では、`data1`および`data2`の要素は、どれも長さが２の配列であるが、今後、3以上になるかもしれない。(つまり、 `num`, `alpha` の次のサフィックスが追加されるかもしれない）
-- 質問では、`data1`および`data2`の要素は、どれも長さが２で同じ長さであるが、今後、そうでない場合があるかもしれない。
+- 質問では、`data1`および`data2`の要素である配列は、どれも長さが２で同じ長さであるが、今後、そうでない場合があるかもしれない。

テキスト修正

2019/07/13 06:54

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -2,7 +2,7 @@
-ご質問の要件のうち、今後、何が変わる可能性があるのか？によって、書くコードが変わってくると思います。ご質問に挙げられている与件から、今後どうなる可能性があるのか、という想定を思いつくままに挙げてみると、
+ご質問の要件のうち、今後、何が変わる可能性があるのか？によって、書くコードが変わってくると思います。ご質問に挙げられている与件から、今後どうなる可能性があるのかを思いつくままに挙げてみると、
@@ -68,7 +68,7 @@
-var result = tmp[0].map((e,i) => ({...e, ...tmp[1][i]}));
+const result = tmp[0].map((e,i) => ({...e, ...tmp[1][i]}));
@@ -80,7 +80,7 @@
-- **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/3w4je19o/1](https://jsfiddle.net/jun68ykt/3w4je19o/1)
+- **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/3w4je19o/2](https://jsfiddle.net/jun68ykt/3w4je19o/2)