回答編集履歴

18

テキスト修正

2019/08/09 15:28

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -116,7 +116,7 @@
116
116
 
117
117
 
118
118
 
119
- ### 追記
119
+ ### 追記1
120
120
 
121
121
 
122
122
 
@@ -141,3 +141,75 @@
141
141
 
142
142
 
143
143
  [lodash](https://lodash.com/) はオブジェクトや配列の操作で便利なメソッドを提供しており、用途にうまく合ったメソッドがみつかると、コードを短くできることがあります。
144
+
145
+
146
+
147
+ ### 追記2
148
+
149
+
150
+
151
+ `result5` からの合計処理だけではなく、ご質問に挙げられているソースコード全体について、リファクタ案を書いてみましたので、参考までに提示します。作成したコードは以下に上げています。
152
+
153
+
154
+
155
+ - GitHub: [jun68ykt/q204950](https://github.com/jun68ykt/q204950)
156
+
157
+
158
+
159
+ 最終的な修正後のJavascriptのコードは以下です。
160
+
161
+
162
+
163
+ - jun68ykt/q204950: [main.js](https://github.com/jun68ykt/q204950/blob/master/main.js)
164
+
165
+
166
+
167
+ 以下、各コミットを順を追って説明します。
168
+
169
+
170
+
171
+ - [initial commit](https://git.io/fj7WA) では、ご質問に挙げられているコードをそのままコピペしたうえで、HTML と JavaScript のファイルを分けました。
172
+
173
+  
174
+
175
+
176
+
177
+ - [末尾に空文字列がある場合、これを除去](https://git.io/fj7Wh) :result2 を作るときに、元のコードだと、末尾に空文字列ができてしまうことがあるので、これを除く filter を追加しています。
178
+
179
+  
180
+
181
+
182
+
183
+ - [result3 の作成にmapとsliceを使用](https://git.io/fj7lv): result2 から result3 を作る際に、map と slice を使うと短くできます。
184
+
185
+  
186
+
187
+
188
+
189
+ - 以下は、 result3 から result4 を作る処理を3段階でリファクタしました。
190
+
191
+  (1) [result4 の作成部分を修正(その1)](https://git.io/fj7lU): 元のコードにある、 divide はかなり力作という感じで恐縮ですが、 `.divide(1)` と、要素が1個の配列に区切るならば、修正後のように短く書けます。
192
+
193
+  (2) [result4 の作成部分を修正(その2)](https://git.io/fj7lk) : result4 を作る2段階目です。map を二重にして、unshift を使わずに長さが 3 の配列を作ります。
194
+
195
+ - (3) [result4 の作成部分を修正(その3)](https://git.io/fj7lC) :上記(1)と(2)の処理をひとつにまとめました。
196
+
197
+  
198
+
199
+
200
+
201
+ - [result5 の作成にreduceとfilterを使用](https://git.io/fj7l8) :result4 から result5 を作る処理を reduce と filter を使ってみました。元のコードでは、result5 は配列ですが、 `a`, `b` などがキーになるのでオブジェクトが得られるようにしています。
202
+
203
+  
204
+
205
+
206
+
207
+ - 以下の2つは、先の回答に書いたコードを追加したものです。
208
+
209
+  (1) [result6 の作成を追加](https://git.io/fj7lu)
210
+
211
+  (2) [lodash の利用](https://git.io/fj7lz)
212
+
213
+
214
+
215
+ 配列のメソッド、[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)は、配列やオブジェクトを処理するプログラムを書くときに、いろいろな場面で重宝します。

17

テキスト修正

2019/08/09 15:28

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
 
32
32
 
33
- の内容を持つオブジェクトを、 `result6` という変数として得るためのコードを示します。
33
+ の内容を持つオブジェクトを、 `result6` という変数得るためのコードを示します。
34
34
 
35
35
 
36
36
 

16

テキスト修正

2019/08/08 23:21

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- ご質問の理解として、 `result5` は以下のようなオブジェクトであると認識しました。
5
+ ご質問を拝読まして、 `result5` は以下のようなオブジェクトであると把握しました。
6
6
 
7
7
 
8
8
 
@@ -22,15 +22,15 @@
22
22
 
23
23
  ```
24
24
 
25
- この回答では、上記のオブジェクトである `result5` に対して集計処理を行って、
25
+ この回答では、上記のオブジェクト `result5` に含まれる配列に対して集計処理を行って、ご質問にある
26
26
 
27
27
 
28
28
 
29
- > 最終的には配列内のa,b,c,dは消し、以下の様な形にしたいです。
29
+ > 最終的には配列内のa,b,c,dは消し、以下の様な形
30
30
 
31
31
 
32
32
 
33
- と書かれている、望ましい内容を持つオブジェクトを、 `result6` という変数として得るためのコードを示します。
33
+ 内容を持つオブジェクトを、 `result6` という変数として得るためのコードを示します。
34
34
 
35
35
 
36
36
 

15

テキスト修正

2019/08/08 23:13

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -120,7 +120,7 @@
120
120
 
121
121
 
122
122
 
123
- 補足ですが、上記に挙げたコードの中で、以下の `result5` から `result6` を得る行
123
+ 補足ですが、上記に挙げたコードの中で、 `result5` から `result6` を得る以下の
124
124
 
125
125
  ```javascript
126
126
 

14

テキスト修正

2019/08/08 13:40

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -1,4 +1,36 @@
1
1
  こんにちは
2
+
3
+
4
+
5
+ ご質問の理解として、 `result5` は、以下のようなオブジェクトであると認識しました。
6
+
7
+
8
+
9
+ ```javascript
10
+
11
+ {
12
+
13
+ a: [['x', 1000, 'a'], ['y', 1000, 'a'], ['y', 1, 'a'], ['x', 1000, 'a']],
14
+
15
+ b: [['x', 100, 'b'], ['x', 10, 'b'], ['x', 100, 'b']],
16
+
17
+ c: [['y', 100, 'c'], ['y', 10, 'c'], ['x', 1, 'c']],
18
+
19
+ d: [['x', 1, 'd'], ['x', 10, 'd']]
20
+
21
+ }
22
+
23
+ ```
24
+
25
+ この回答では、上記のオブジェクトである `result5` に対して集計処理を行って、
26
+
27
+
28
+
29
+ > 最終的には配列内のa,b,c,dは消し、以下の様な形にしたいです。
30
+
31
+
32
+
33
+ と書かれている、望ましい内容を持つオブジェクトを、 `result6` という変数として得るためのコードを示します。
2
34
 
3
35
 
4
36
 
@@ -56,25 +88,7 @@
56
88
 
57
89
 
58
90
 
59
- 上記の `summarize(ary)`を使うと、以下のオブジェクト `result5`
91
+ 上記の `summarize(ary)`を使うと、冒頭に書いた `result5` から `result6` を得るには、以下のようにすればよいです。
60
-
61
- ```javascript
62
-
63
- const result5 = {
64
-
65
- a: [['x', 1000, 'a'], ['y', 1000, 'a'], ['y', 1, 'a'], ['x', 1000, 'a']],
66
-
67
- b: [['x', 100, 'b'], ['x', 10, 'b'], ['x', 100, 'b']],
68
-
69
- c: [['y', 100, 'c'], ['y', 10, 'c'], ['x', 1, 'c']],
70
-
71
- d: [['x', 1, 'd'], ['x', 10, 'd']]
72
-
73
- };
74
-
75
- ```
76
-
77
- の各エントリの値となっている配列を summarizeした配列に置き換えるには、以下のようにすればよいです。
78
92
 
79
93
 
80
94
 
@@ -106,7 +120,7 @@
106
120
 
107
121
 
108
122
 
109
- 補足ですが、上記に挙げたコードの中で、以下の部分
123
+ 補足ですが、上記に挙げたコードの中で、以下の `result5` から `result6` を得る行
110
124
 
111
125
  ```javascript
112
126
 

13

テキスト修正

2019/08/08 13:36

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
  ```
30
30
 
31
- が与えられると、ご質問の要件に沿って、各要素の配列の先頭の文字ごとに、2番目の要素である数値を足し上げて、
31
+ が与えられると、ご質問の要件に沿って、各要素の配列の先頭の文字ごとに、2番目の要素である数値を足し上げた配列
32
32
 
33
33
  ```javascript
34
34
 

12

テキスト修正

2019/08/08 08:07

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -60,7 +60,7 @@
60
60
 
61
61
  ```javascript
62
62
 
63
- let result5 = {
63
+ const result5 = {
64
64
 
65
65
  a: [['x', 1000, 'a'], ['y', 1000, 'a'], ['y', 1, 'a'], ['x', 1000, 'a']],
66
66
 
@@ -80,13 +80,13 @@
80
80
 
81
81
  ```javascript
82
82
 
83
- result5 = Object.entries(result5).reduce((obj, [k,v]) => ({...obj, [k]: summarize(v)}), {});
83
+ const result6 = Object.entries(result5).reduce((obj, [k,v]) => ({...obj, [k]: summarize(v)}), {});
84
84
 
85
85
  ```
86
86
 
87
87
 
88
88
 
89
- 上記により、`result5` には望む内容のオブジェクトが入ります。
89
+ 上記により、`result6` には各配列が集計されているオブジェクトが入ります。
90
90
 
91
91
 
92
92
 
@@ -94,7 +94,7 @@
94
94
 
95
95
 
96
96
 
97
- - **動作確認用:** [https://jsfiddle.net/jun68ykt/sfuvgxm5/5/](https://jsfiddle.net/jun68ykt/sfuvgxm5/5/)
97
+ - **動作確認用:** [https://jsfiddle.net/jun68ykt/sfuvgxm5/6/](https://jsfiddle.net/jun68ykt/sfuvgxm5/6/)
98
98
 
99
99
 
100
100
 
@@ -110,7 +110,7 @@
110
110
 
111
111
  ```javascript
112
112
 
113
- result5 = Object.entries(result5).reduce((obj, [k,v]) => ({...obj, [k]: summarize(v)}), {});
113
+ const result6 = Object.entries(result5).reduce((obj, [k,v]) => ({...obj, [k]: summarize(v)}), {});
114
114
 
115
115
  ```
116
116
 
@@ -118,11 +118,11 @@
118
118
 
119
119
  ```javascript
120
120
 
121
- result5 = _.mapValues(result5, summarize);
121
+ const result6 = _.mapValues(result5, summarize);
122
122
 
123
123
  ```
124
124
 
125
- - **動作確認用:** [https://jsfiddle.net/jun68ykt/3tounhgL/2/](https://jsfiddle.net/jun68ykt/3tounhgL/2/)
125
+ - **動作確認用:** [https://jsfiddle.net/jun68ykt/3tounhgL/3/](https://jsfiddle.net/jun68ykt/3tounhgL/3/)
126
126
 
127
127
 
128
128
 

11

テキスト修正

2019/08/08 08:04

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -114,7 +114,7 @@
114
114
 
115
115
  ```
116
116
 
117
- については、オブジェクトや配列の操作で便利なメソッドを提供している lodash の [_.mapValues](https://lodash.com/docs/4.17.15#mapValues) を使うと、以下のように少し短く書けます。
117
+ については、lodash の [_.mapValues](https://lodash.com/docs/4.17.15#mapValues) を使うと、以下のように少し短く書けます。
118
118
 
119
119
  ```javascript
120
120
 
@@ -123,3 +123,7 @@
123
123
  ```
124
124
 
125
125
  - **動作確認用:** [https://jsfiddle.net/jun68ykt/3tounhgL/2/](https://jsfiddle.net/jun68ykt/3tounhgL/2/)
126
+
127
+
128
+
129
+ [lodash](https://lodash.com/) はオブジェクトや配列の操作で便利なメソッドを提供しており、用途にうまく合ったメソッドがみつかると、コードを短くできることがあります。

10

テキスト修正

2019/08/08 07:04

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -99,3 +99,27 @@
99
99
 
100
100
 
101
101
  以上、参考になれば幸いです。
102
+
103
+
104
+
105
+ ### 追記
106
+
107
+
108
+
109
+ 補足ですが、上記に挙げたコードの中で、以下の部分
110
+
111
+ ```javascript
112
+
113
+ result5 = Object.entries(result5).reduce((obj, [k,v]) => ({...obj, [k]: summarize(v)}), {});
114
+
115
+ ```
116
+
117
+ については、オブジェクトや配列の操作で便利なメソッドを提供している lodash の [_.mapValues](https://lodash.com/docs/4.17.15#mapValues) を使うと、以下のように少し短く書けます。
118
+
119
+ ```javascript
120
+
121
+ result5 = _.mapValues(result5, summarize);
122
+
123
+ ```
124
+
125
+ - **動作確認用:** [https://jsfiddle.net/jun68ykt/3tounhgL/2/](https://jsfiddle.net/jun68ykt/3tounhgL/2/)

9

テキスト修正

2019/08/08 06:51

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
  ```
46
46
 
47
- が与えられた場合は、足し上げたうえで、 `'x'`, `'y'` の順に並び替えて、
47
+ が与えられた場合は、足し上げたうえで、 先頭要素アルファベット順に並び替えて、
48
48
 
49
49
  ```javascript
50
50
 

8

テキスト修正

2019/08/08 06:28

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -56,7 +56,7 @@
56
56
 
57
57
 
58
58
 
59
- 上記の `summarize(ary)`を使うと、以下の変数 `result5`
59
+ 上記の `summarize(ary)`を使うと、以下のオブジェクト `result5`
60
60
 
61
61
  ```javascript
62
62
 

7

テキスト修正

2019/08/08 06:28

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
 
22
22
 
23
- 上記の関数`summarize(ary)`は、引数 `ary` に
23
+ 上記の関数`summarize(ary)`は、引数 `ary` にたとえば
24
24
 
25
25
  ```javascript
26
26
 

6

テキスト修正

2019/08/08 06:21

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
  ```
30
30
 
31
- が与えられたら、ご質問の要件に沿って、各要素の2番目の数値を足し上げて、
31
+ が与えられると、ご質問の要件に沿って、各要素の配列の先頭の文字ごとに、2番目の要素である数値を足し上げて、
32
32
 
33
33
  ```javascript
34
34
 
@@ -44,7 +44,7 @@
44
44
 
45
45
  ```
46
46
 
47
- が与えられた、足し上げたうえで、 `'x'`, `'y'` の順に並び替えて、
47
+ が与えられた場合は、足し上げたうえで、 `'x'`, `'y'` の順に並び替えて、
48
48
 
49
49
  ```javascript
50
50
 

5

テキスト修正

2019/08/08 06:10

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
  ```
30
30
 
31
- が与えられたら、
31
+ が与えられたら、ご質問の要件に沿って、各要素の2番目の数値を足し上げて、
32
32
 
33
33
  ```javascript
34
34
 
@@ -36,7 +36,7 @@
36
36
 
37
37
  ```
38
38
 
39
- を返します。引数 `ary` に
39
+ を返します。また、引数 `ary` に
40
40
 
41
41
  ```javascript
42
42
 
@@ -44,7 +44,7 @@
44
44
 
45
45
  ```
46
46
 
47
- が与えられたら、`'x'`, `'y'` の順に並び替えて、
47
+ が与えられたら、足し上げたうえで、 `'x'`, `'y'` の順に並び替えて、
48
48
 
49
49
  ```javascript
50
50
 

4

テキスト修正

2019/08/08 05:21

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -4,7 +4,23 @@
4
4
 
5
5
  まず、以下のような関数`summarize(ary)` を作成します。
6
6
 
7
+
8
+
9
+ ```javascript
10
+
11
+ const summarize = (ary) => {
12
+
13
+ const map = ary.reduce((m, e) => m.set(e[0], (m.get(e[0]) || 0) + e[1]), new Map());
14
+
15
+ return [...map].sort( (e1,e2) => e1[0].localeCompare(e2[0]));
16
+
17
+ }
18
+
19
+ ```
20
+
21
+
22
+
7
- 関数`summarize(ary)`は、引数 `ary` に
23
+ 上記の関数`summarize(ary)`は、引数 `ary` に
8
24
 
9
25
  ```javascript
10
26
 
@@ -36,21 +52,7 @@
36
52
 
37
53
  ```
38
54
 
39
- を返します。このような `summarize(ary)` は、いろいろな書き方が出来そうです。一例として、以下のように書けます。
40
-
41
-
42
-
43
- ```javascript
44
-
45
- const summarize = (ary) => {
46
-
47
- const map = ary.reduce((m, e) => m.set(e[0], (m.get(e[0]) || 0) + e[1]), new Map());
48
-
49
- return [...map].sort( (e1,e2) => e1[0].localeCompare(e2[0]));
50
-
51
- }
52
-
53
- ```
55
+ を返します。
54
56
 
55
57
 
56
58
 

3

テキスト修正

2019/08/08 05:13

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
  ```
38
38
 
39
- を返します。このような `summarize(ary)` は、例えば以下のように書けます。
39
+ を返します。このような `summarize(ary)` は、いろいろな書き方が出来そうです。一として、以下のように書けます。
40
40
 
41
41
 
42
42
 

2

テキスト修正

2019/08/08 04:15

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,9 @@
2
2
 
3
3
 
4
4
 
5
- まず、以下のような関数`summarize(ary)` を作成します。引数 `ary` に
5
+ まず、以下のような関数`summarize(ary)` を作成します。
6
+
7
+ 関数`summarize(ary)`は、引数 `ary` に
6
8
 
7
9
  ```javascript
8
10
 
@@ -10,7 +12,7 @@
10
12
 
11
13
  ```
12
14
 
13
- が与えられたら、`summarize(ary)` は
15
+ が与えられたら、
14
16
 
15
17
  ```javascript
16
18
 
@@ -18,7 +20,7 @@
18
20
 
19
21
  ```
20
22
 
21
- を返し引数 `ary` に
23
+ を返します。引数 `ary` に
22
24
 
23
25
  ```javascript
24
26
 
@@ -34,7 +36,7 @@
34
36
 
35
37
  ```
36
38
 
37
- を返します。このような `summarize(ary)` は以下のように書けます。
39
+ を返します。このような `summarize(ary)` は、例えば以下のように書けます。
38
40
 
39
41
 
40
42
 

1

テキスト修正

2019/08/08 04:04

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -90,7 +90,7 @@
90
90
 
91
91
 
92
92
 
93
- - **動作確認用:** [https://jsfiddle.net/jun68ykt/sfuvgxm5/4/](https://jsfiddle.net/jun68ykt/sfuvgxm5/4/)
93
+ - **動作確認用:** [https://jsfiddle.net/jun68ykt/sfuvgxm5/5/](https://jsfiddle.net/jun68ykt/sfuvgxm5/5/)
94
94
 
95
95
 
96
96