reduceで配列を組み替えたいのですが、上手く行きません。

Question

###目的
下記のように①の配列を2件ごとに区切って②の配列のように書き変えたいと思います。
①["aaa","bbb","ccc","ddd"]
②[["aaa","bbb"],["ccc","ddd"]]

###方法
TypeScriptで書いているのですが、下記のように書くと、tableの型がneverになってしまい上手く行きません。

let sku_list = ["aaa","bbb","ccc","ddd"];
let sku_list_per_limit = sku_list.reduce((table, item) => {
  let last :Array<string> = table[table.length - 1];
  console.log(last);
  if((last.length % 2) === 0) {
    table.push([item]);
    return table;
  }
  last.push(item);
  return table;
}, [[]]);

###質問
解決方法がわからず途方にくれています。
① reduceメソッドの 戻り値の累積変数の型を指定方法はありますでしょうか？
上記のコードの末尾 [[]]の事です。

② reduceメソッドを使った方がわかりやすいと聞いて作ってみたのですが、私のコードは非常に見づらくわかりにくいです。わかりやすいように書きたいのですが、ご指摘頂けないでしょうか？

Answer 1

こんにちは

まず、

① reduceメソッドの 戻り値の累積変数の型を指定方法はありますでしょうか？
上記のコードの末尾 [[]]の事です。

については、

sku_list.reduce((table, item) => {

の、reduceに与えている関数の引数 table と item に型指定を追加して

sku_list.reduce((table: string[][], item: string) => {

としてみるといかがでしょうか？次に、

② reduceメソッドを使った方がわかりやすいと聞いて作ってみたのですが、私のコードは非常に見づらくわかりにくいです。わかりやすいように書きたいのですが、ご指摘頂けないでしょうか？

については、以下の６つのコード例を順に挙げます。

1. yuki_90453さんがご質問に挙げられているコードに近いもの(reduceを使用）
2. 上記 1. の reduceに与える関数の、コード行を減らしたもの
3. reduce の替わりに、map と filter を使用する例
4. 文字列を経由して、正規表現によるreplaceおよび split, map を使う例
5. loadsh の _.chunk を使用した例
6. 上記 5. の _.chunk と同様な関数を自作

なお上記のうち、3, 4, 5, 6 は、reduce を使わないコードになっています。

コード例 1

まずはじめに、yuki_90453さんがご質問に挙げられているコードに近いものを挙げます。（なお、以下のコードでは、ご質問のコードでは table という変数を、短い変数名の t にしています。）

type StrAry = string[]

const ary: StrAry = ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff', 'ggg']

const ary2: StrAry[] = ary.reduce((t: StrAry[], str: string, i: number) => {
  if (i % 2 === 0) {
    return [...t, [str]]
  }
  t[t.length - 1].push(str)
  return t
}, [])

console.log(ary2)

• 動作確認用 CodePen: https://codepen.io/jun68ykt/pen/wvvGKQW?editors=0012

私の手元の動作確認ですと、上記にて、型指定のエラー、警告などが出ることなく、意図した結果が得られました。

コード例 2

以下は、先のコード例1の reduce に与える関数本体で、 return を使わないで済ませるようにしたものです。行数は減りましたが、可読性に難アリかもしれません。

type StrAry = string[]

const ary: StrAry = ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff', 'ggg']

const ary2: StrAry[] = ary.reduce((t: StrAry[], str: string, i: number) => 
  i % 2 ? [...t.slice(0, t.length-1), [t[t.length-1][0], str]] : [...t, [str]]
, [])

console.log(ary2)

• 動作確認用 CodePen: https://codepen.io/jun68ykt/pen/XWWdmyq?editors=0012

コード例 3

上記のコード例 2 で、reduce で一度にやろうとしていることを、map と filter の二段階を踏むコードです。

type StrAry = string[]

const ary: StrAry = ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff', 'ggg']

const ary2: StrAry[] = ary.map((str: string, i: number, self: StrAry) =>
                         i % 2 ? null : (i+1 < self.length ? [str, self[i+1]] : [str])   
                       ).filter((a: StrAry | null) => a)

console.log(ary2)

• 動作確認用 CodePen: https://codepen.io/jun68ykt/pen/XWWdXMo?editors=0012

コード例 4

これまでの3つとは異なり、文字列を経由した方法です。joinで要素を # で結合した文字列を作り、正規表現によるreplaceによって、一組になる要素を区切る # を _ に置換してから、 split, map で、望む配列にするコードです。

type StrAry = string[]

const ary: StrAry = ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff', 'ggg']

const ary2: StrAry[] = ary.join('#')
　　　　　　　　　　　　　　 　 .replace(/([^#]+)#([^#]+)/g, '$1_$2')
                          .split('#')
                          .map((s: string) => s.split('_'))

console.log(ary2)

• 動作確認用 CodePen: https://codepen.io/jun68ykt/pen/rNNeeMa?editors=0012

コード例 5

配列やオブジェクトの操作で便利なライブラリlodash の _.chunk を使うと、以下でできます。

type StrAry = string[]

const ary: StrAry = ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff', 'ggg']

const ary2: StrAry[] = _.chunk(ary, 2)

console.log(ary2)

• 動作確認用 CodePen: https://codepen.io/jun68ykt/pen/qBBZOzv?editors=0012

コード例 6

上記のコード例 5 で使った、lodash の _.chunk と同様の関数myChunkを(再帰を使って、)自作しました。

type StrAry = string[]

const myChunk = (a: StrAry, n: number) => (a.length > 0 ? [a.slice(0, n), ...myChunk(a.slice(n), n)] : [])

const ary: StrAry = ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff', 'ggg']

const ary2: StrAry[] = myChunk(ary, 2)
console.log(ary2)

const ary3: StrAry[] = myChunk(ary, 3)
console.log(ary3)

const ary4: StrAry[] = myChunk(ary, 4)
console.log(ary4)

const ary7: StrAry[] = myChunk(ary, 7)
console.log(ary7)

• 動作確認用 CodePen: https://codepen.io/jun68ykt/pen/BaaKzMK?editors=0012

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

Comments

[yuki_90453]

ご丁寧な回答ありがとうございます。
参考にさせて頂きます！
無事、解決出来そうです。ありがとうございます。

[jun68ykt]

どういたしまして。
> 無事、解決出来そうです。
とのことで、よかったです ????

Answer 2

うーん・・。

const sku_list_per_limit: string[][] = sku_list.reduce((x: string[][], y: string): string[][] => {
  if (x.length === 0 || x[x.length - 1].length === 2) {
    x.push([y]);
  } else {
    x[x.length - 1].push(y);
  }
  return x;
}, []);

「逆向きがシンプル」というのなら、分かります。

const sku_list_2 = sku_list_per_limit.reduce((x: string[], y: string[]): string[] => {
  return x.concat(y);
});