編集履歴

回答編集履歴

テキスト修正

2019/08/09 15:28

投稿

スコア9058

answer CHANGED Viewed

@@ -57,7 +57,7 @@
 以上、参考になれば幸いです。
-### 追記
+### 追記1
 補足ですが、上記に挙げたコードの中で、 `result5` から `result6` を得る以下の行
 ```javascript
@@ -69,4 +69,40 @@
 ```
 - **動作確認用：** [https://jsfiddle.net/jun68ykt/3tounhgL/3/](https://jsfiddle.net/jun68ykt/3tounhgL/3/)
-[lodash](https://lodash.com/) はオブジェクトや配列の操作で便利なメソッドを提供しており、用途にうまく合ったメソッドがみつかると、コードを短くできることがあります。
+[lodash](https://lodash.com/) はオブジェクトや配列の操作で便利なメソッドを提供しており、用途にうまく合ったメソッドがみつかると、コードを短くできることがあります。
+### 追記2
+`result5` からの合計処理だけではなく、ご質問に挙げられているソースコード全体について、リファクタ案を書いてみましたので、参考までに提示します。作成したコードは以下に上げています。
+- GitHub: [jun68ykt/q204950](https://github.com/jun68ykt/q204950)
+最終的な修正後のJavascriptのコードは以下です。
+- jun68ykt/q204950: [main.js](https://github.com/jun68ykt/q204950/blob/master/main.js)
+以下、各コミットを順を追って説明します。
+- [initial commit](https://git.io/fj7WA) では、ご質問に挙げられているコードをそのままコピペしたうえで、HTML と JavaScript のファイルを分けました。
+- [末尾に空文字列がある場合、これを除去](https://git.io/fj7Wh) ：result2 を作るときに、元のコードだと、末尾に空文字列ができてしまうことがあるので、これを除く filter を追加しています。
+- [result3 の作成にmapとsliceを使用](https://git.io/fj7lv)： result2 から　result3 を作る際に、map と slice を使うと短くできます。
+- 以下は、 result3 から result4 を作る処理を３段階でリファクタしました。
+　(1) [result4 の作成部分を修正(その1)](https://git.io/fj7lU)： 元のコードにある、 divide はかなり力作という感じで恐縮ですが、 `.divide(1)` と、要素が１個の配列に区切るならば、修正後のように短く書けます。
+　(2) [result4 の作成部分を修正(その2)](https://git.io/fj7lk) : result4 を作る２段階目です。map を二重にして、unshift を使わずに長さが 3 の配列を作ります。
+- (3) [result4 の作成部分を修正(その3)](https://git.io/fj7lC) :上記(1)と(2)の処理をひとつにまとめました。
+- [result5 の作成にreduceとfilterを使用](https://git.io/fj7l8) :result4 から result5 を作る処理を reduce と filter を使ってみました。元のコードでは、result5 は配列ですが、 `a`, `b` などがキーになるのでオブジェクトが得られるようにしています。
+- 以下の2つは、先の回答に書いたコードを追加したものです。
+　(1) [result6 の作成を追加](https://git.io/fj7lu)
+　(2) [lodash の利用](https://git.io/fj7lz)
+配列のメソッド、[map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) や [reduce](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce), [filter](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) と[スプレッド構文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)は、配列やオブジェクトを処理するプログラムを書くときに、いろいろな場面で重宝します。

テキスト修正

2019/08/09 15:28

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -14,7 +14,7 @@
 > 最終的には配列内のa,b,c,dは消し、以下の様な形
-の内容を持つオブジェクトを、 `result6` という変数として得るためのコードを示します。
+の内容を持つオブジェクトを、 `result6` という変数に得るためのコードを示します。
 まず、以下のような関数`summarize(ary)` を作成します。

テキスト修正

2019/08/08 23:21

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -1,6 +1,6 @@
 こんにちは
-ご質問の理解として、 `result5` は、以下のようなオブジェクトであると認識しました。
+ご質問を拝読しまして、 `result5` は以下のようなオブジェクトであると把握しました。
 ```javascript
 {
@@ -10,11 +10,11 @@
   d: [['x', 1, 'd'], ['x', 10, 'd']]
 }
 ```
-この回答では、上記のオブジェクトである `result5` に対して集計処理を行って、
+この回答では、上記のオブジェクト `result5` に含まれる配列に対して集計処理を行って、ご質問にある
-> 最終的には配列内のa,b,c,dは消し、以下の様な形にしたいです。
+> 最終的には配列内のa,b,c,dは消し、以下の様な形
-と書かれている、望ましい内容を持つオブジェクトを、 `result6` という変数として得るためのコードを示します。
+の内容を持つオブジェクトを、 `result6` という変数として得るためのコードを示します。
 まず、以下のような関数`summarize(ary)` を作成します。

テキスト修正

2019/08/08 23:13

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -59,7 +59,7 @@
 ### 追記
-補足ですが、上記に挙げたコードの中で、以下の `result5` から `result6` を得る行
+補足ですが、上記に挙げたコードの中で、 `result5` から `result6` を得る以下の行
 ```javascript
 const result6 = Object.entries(result5).reduce((obj, [k,v]) => ({...obj, [k]: summarize(v)}), {});
 ```

テキスト修正

2019/08/08 13:40

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -1,5 +1,21 @@
 こんにちは
+ご質問の理解として、 `result5` は、以下のようなオブジェクトであると認識しました。
+```javascript
+{
+  a: [['x', 1000, 'a'], ['y', 1000, 'a'], ['y', 1, 'a'], ['x', 1000, 'a']],
+  b: [['x', 100, 'b'], ['x', 10, 'b'], ['x', 100, 'b']],
+  c: [['y', 100, 'c'], ['y', 10, 'c'], ['x', 1, 'c']],
+  d: [['x', 1, 'd'], ['x', 10, 'd']]
+}
+```
+この回答では、上記のオブジェクトである `result5` に対して集計処理を行って、
+> 最終的には配列内のa,b,c,dは消し、以下の様な形にしたいです。
+と書かれている、望ましい内容を持つオブジェクトを、 `result6` という変数として得るためのコードを示します。
 まず、以下のような関数`summarize(ary)` を作成します。
 ```javascript
@@ -27,16 +43,7 @@
 ```
 を返します。
-上記の `summarize(ary)`を使うと、以下のオブジェクト `result5`
+上記の `summarize(ary)`を使うと、冒頭に書いた `result5` から  `result6` を得るには、以下のようにすればよいです。
-```javascript
-const result5 = {
-  a: [['x', 1000, 'a'], ['y', 1000, 'a'], ['y', 1, 'a'], ['x', 1000, 'a']],
-  b: [['x', 100, 'b'], ['x', 10, 'b'], ['x', 100, 'b']],
-  c: [['y', 100, 'c'], ['y', 10, 'c'], ['x', 1, 'c']],
-  d: [['x', 1, 'd'], ['x', 10, 'd']]
-};
-```
-の各エントリの値となっている配列を summarizeした配列に置き換えるには、以下のようにすればよいです。
 ```javascript
 const result6 = Object.entries(result5).reduce((obj, [k,v]) => ({...obj, [k]: summarize(v)}), {});
@@ -52,7 +59,7 @@
 ### 追記
-補足ですが、上記に挙げたコードの中で、以下の部分
+補足ですが、上記に挙げたコードの中で、以下の `result5` から `result6` を得る行
 ```javascript
 const result6 = Object.entries(result5).reduce((obj, [k,v]) => ({...obj, [k]: summarize(v)}), {});
 ```

テキスト修正

2019/08/08 13:36

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -13,7 +13,7 @@
 ```javascript
 [['x', 1000, 'a'], ['y', 1000, 'a'], ['y', 1, 'a'], ['x', 1000, 'a']]
 ```
-が与えられると、ご質問の要件に沿って、各要素の配列の先頭の文字ごとに、２番目の要素である数値を足し上げて、
+が与えられると、ご質問の要件に沿って、各要素の配列の先頭の文字ごとに、２番目の要素である数値を足し上げた配列
 ```javascript
 [['x', 2000], ['y', 1001]]
 ```

テキスト修正

2019/08/08 08:07

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -29,7 +29,7 @@
 上記の `summarize(ary)`を使うと、以下のオブジェクト `result5`
 ```javascript
-let result5 = {
+const result5 = {
   a: [['x', 1000, 'a'], ['y', 1000, 'a'], ['y', 1, 'a'], ['x', 1000, 'a']],
   b: [['x', 100, 'b'], ['x', 10, 'b'], ['x', 100, 'b']],
   c: [['y', 100, 'c'], ['y', 10, 'c'], ['x', 1, 'c']],
@@ -39,14 +39,14 @@
 の各エントリの値となっている配列を summarizeした配列に置き換えるには、以下のようにすればよいです。
 ```javascript
-result5 = Object.entries(result5).reduce((obj, [k,v]) => ({...obj, [k]: summarize(v)}), {});
+const result6 = Object.entries(result5).reduce((obj, [k,v]) => ({...obj, [k]: summarize(v)}), {});
 ```
-上記により、`result5` には望む内容のオブジェクトが入ります。
+上記により、`result6` には各配列が集計されているオブジェクトが入ります。
 以下は、上記を動作確認するために jsFiddle に上げたものです。
-- **動作確認用：** [https://jsfiddle.net/jun68ykt/sfuvgxm5/5/](https://jsfiddle.net/jun68ykt/sfuvgxm5/5/)
+- **動作確認用：** [https://jsfiddle.net/jun68ykt/sfuvgxm5/6/](https://jsfiddle.net/jun68ykt/sfuvgxm5/6/)
 以上、参考になれば幸いです。
@@ -54,12 +54,12 @@
 補足ですが、上記に挙げたコードの中で、以下の部分
 ```javascript
-result5 = Object.entries(result5).reduce((obj, [k,v]) => ({...obj, [k]: summarize(v)}), {});
+const result6 = Object.entries(result5).reduce((obj, [k,v]) => ({...obj, [k]: summarize(v)}), {});
 ```
 については、lodash の [_.mapValues](https://lodash.com/docs/4.17.15#mapValues) を使うと、以下のように少し短く書けます。
 ```javascript
-result5 = _.mapValues(result5, summarize);
+const result6 = _.mapValues(result5, summarize);
 ```
-- **動作確認用：** [https://jsfiddle.net/jun68ykt/3tounhgL/2/](https://jsfiddle.net/jun68ykt/3tounhgL/2/)
+- **動作確認用：** [https://jsfiddle.net/jun68ykt/3tounhgL/3/](https://jsfiddle.net/jun68ykt/3tounhgL/3/)
 [lodash](https://lodash.com/) はオブジェクトや配列の操作で便利なメソッドを提供しており、用途にうまく合ったメソッドがみつかると、コードを短くできることがあります。

テキスト修正

2019/08/08 08:04

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -56,8 +56,10 @@
 ```javascript
 result5 = Object.entries(result5).reduce((obj, [k,v]) => ({...obj, [k]: summarize(v)}), {});
 ```
-については、オブジェクトや配列の操作で便利なメソッドを提供している lodash の [_.mapValues](https://lodash.com/docs/4.17.15#mapValues) を使うと、以下のように少し短く書けます。
+については、lodash の [_.mapValues](https://lodash.com/docs/4.17.15#mapValues) を使うと、以下のように少し短く書けます。
 ```javascript
 result5 = _.mapValues(result5, summarize);
 ```
-- **動作確認用：** [https://jsfiddle.net/jun68ykt/3tounhgL/2/](https://jsfiddle.net/jun68ykt/3tounhgL/2/)
+- **動作確認用：** [https://jsfiddle.net/jun68ykt/3tounhgL/2/](https://jsfiddle.net/jun68ykt/3tounhgL/2/)
+[lodash](https://lodash.com/) はオブジェクトや配列の操作で便利なメソッドを提供しており、用途にうまく合ったメソッドがみつかると、コードを短くできることがあります。

テキスト修正

2019/08/08 07:04

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -48,4 +48,16 @@
 - **動作確認用：** [https://jsfiddle.net/jun68ykt/sfuvgxm5/5/](https://jsfiddle.net/jun68ykt/sfuvgxm5/5/)
-以上、参考になれば幸いです。
+以上、参考になれば幸いです。
+### 追記
+補足ですが、上記に挙げたコードの中で、以下の部分
+```javascript
+result5 = Object.entries(result5).reduce((obj, [k,v]) => ({...obj, [k]: summarize(v)}), {});
+```
+については、オブジェクトや配列の操作で便利なメソッドを提供している lodash の [_.mapValues](https://lodash.com/docs/4.17.15#mapValues) を使うと、以下のように少し短く書けます。
+```javascript
+result5 = _.mapValues(result5, summarize);
+```
+- **動作確認用：** [https://jsfiddle.net/jun68ykt/3tounhgL/2/](https://jsfiddle.net/jun68ykt/3tounhgL/2/)

テキスト修正

2019/08/08 06:51

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -21,7 +21,7 @@
 ```javascript
 [['y', 100, 'c'], ['y', 10, 'c'], ['x', 1, 'c']]
 ```
-が与えられた場合は、足し上げたうえで、 `'x'`, `'y'` の順に並び替えて、
+が与えられた場合は、足し上げたうえで、 先頭要素のアルファベット順に並び替えて、
 ```javascript
 [['x', 1], ['y', 110]]
 ```

テキスト修正

2019/08/08 06:28

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -27,7 +27,7 @@
 ```
 を返します。
-上記の `summarize(ary)`を使うと、以下の変数 `result5`
+上記の `summarize(ary)`を使うと、以下のオブジェクト `result5`
 ```javascript
 let result5 = {
   a: [['x', 1000, 'a'], ['y', 1000, 'a'], ['y', 1, 'a'], ['x', 1000, 'a']],

テキスト修正

2019/08/08 06:28

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -9,7 +9,7 @@
 }
 ```
-上記の関数`summarize(ary)`は、引数 `ary` に
+上記の関数`summarize(ary)`は、引数 `ary` にたとえば
 ```javascript
 [['x', 1000, 'a'], ['y', 1000, 'a'], ['y', 1, 'a'], ['x', 1000, 'a']]
 ```

テキスト修正

2019/08/08 06:21

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -13,7 +13,7 @@
 ```javascript
 [['x', 1000, 'a'], ['y', 1000, 'a'], ['y', 1, 'a'], ['x', 1000, 'a']]
 ```
-が与えられたら、ご質問の要件に沿って、各要素の２番目の数値を足し上げて、
+が与えられると、ご質問の要件に沿って、各要素の配列の先頭の文字ごとに、２番目の要素である数値を足し上げて、
 ```javascript
 [['x', 2000], ['y', 1001]]
 ```
@@ -21,7 +21,7 @@
 ```javascript
 [['y', 100, 'c'], ['y', 10, 'c'], ['x', 1, 'c']]
 ```
-が与えられたら、足し上げたうえで、 `'x'`, `'y'` の順に並び替えて、
+が与えられた場合は、足し上げたうえで、 `'x'`, `'y'` の順に並び替えて、
 ```javascript
 [['x', 1], ['y', 110]]
 ```

テキスト修正

2019/08/08 06:10

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -13,15 +13,15 @@
 ```javascript
 [['x', 1000, 'a'], ['y', 1000, 'a'], ['y', 1, 'a'], ['x', 1000, 'a']]
 ```
-が与えられたら、
+が与えられたら、ご質問の要件に沿って、各要素の２番目の数値を足し上げて、
 ```javascript
 [['x', 2000], ['y', 1001]]
 ```
-を返します。引数 `ary` に
+を返します。また、引数 `ary` に
 ```javascript
 [['y', 100, 'c'], ['y', 10, 'c'], ['x', 1, 'c']]
 ```
-が与えられたら、`'x'`, `'y'` の順に並び替えて、
+が与えられたら、足し上げたうえで、 `'x'`, `'y'` の順に並び替えて、
 ```javascript
 [['x', 1], ['y', 110]]
 ```

テキスト修正

2019/08/08 05:21

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -1,8 +1,16 @@
 こんにちは
 まず、以下のような関数`summarize(ary)` を作成します。
-関数`summarize(ary)`は、引数 `ary` に
 ```javascript
+const summarize = (ary) => {
+  const map = ary.reduce((m, e) => m.set(e[0],  (m.get(e[0]) || 0) + e[1]), new Map());
+  return [...map].sort( (e1,e2) => e1[0].localeCompare(e2[0]));
+}
+```
+上記の関数`summarize(ary)`は、引数 `ary` に
+```javascript
 [['x', 1000, 'a'], ['y', 1000, 'a'], ['y', 1, 'a'], ['x', 1000, 'a']]
 ```
 が与えられたら、
@@ -17,15 +25,8 @@
 ```javascript
 [['x', 1], ['y', 110]]
 ```
-を返します。このような `summarize(ary)` は、いろいろな書き方が出来そうです。一例として、以下のように書けます。
+を返します。
-```javascript
-const summarize = (ary) => {
-  const map = ary.reduce((m, e) => m.set(e[0],  (m.get(e[0]) || 0) + e[1]), new Map());
-  return [...map].sort( (e1,e2) => e1[0].localeCompare(e2[0]));
-}
-```
 上記の `summarize(ary)`を使うと、以下の変数 `result5`
 ```javascript
 let result5 = {

テキスト修正

2019/08/08 05:13

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -17,7 +17,7 @@
 ```javascript
 [['x', 1], ['y', 110]]
 ```
-を返します。このような `summarize(ary)` は、例えば以下のように書けます。
+を返します。このような `summarize(ary)` は、いろいろな書き方が出来そうです。一例として、以下のように書けます。
 ```javascript
 const summarize = (ary) => {

テキスト修正

2019/08/08 04:15

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -1,14 +1,15 @@
 こんにちは
-まず、以下のような関数、`summarize(ary)` を作成します。引数 `ary` に
+まず、以下のような関数`summarize(ary)` を作成します。
+関数`summarize(ary)`は、引数 `ary` に
 ```javascript
 [['x', 1000, 'a'], ['y', 1000, 'a'], ['y', 1, 'a'], ['x', 1000, 'a']]
 ```
-が与えられたら、`summarize(ary)` は
+が与えられたら、
 ```javascript
 [['x', 2000], ['y', 1001]]
 ```
-を返し、引数 `ary` に
+を返します。引数 `ary` に
 ```javascript
 [['y', 100, 'c'], ['y', 10, 'c'], ['x', 1, 'c']]
 ```
@@ -16,7 +17,7 @@
 ```javascript
 [['x', 1], ['y', 110]]
 ```
-を返します。このような `summarize(ary)` は以下のように書けます。
+を返します。このような `summarize(ary)` は、例えば以下のように書けます。
 ```javascript
 const summarize = (ary) => {

テキスト修正

2019/08/08 04:04

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -44,6 +44,6 @@
 以下は、上記を動作確認するために jsFiddle に上げたものです。
-- **動作確認用：** [https://jsfiddle.net/jun68ykt/sfuvgxm5/4/](https://jsfiddle.net/jun68ykt/sfuvgxm5/4/)
+- **動作確認用：** [https://jsfiddle.net/jun68ykt/sfuvgxm5/5/](https://jsfiddle.net/jun68ykt/sfuvgxm5/5/)
 以上、参考になれば幸いです。