teratail
回答率
85.48%
質問するログイン新規登録
トップJSONに関する質問JSONデータのソートについて

編集履歴

回答編集履歴

37

テキスト修正

2019/02/01 14:29

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
  ```
22
22
 
23
- 上記のコードでは、フィルターするための `devName` を引数に追加しました。これを追加した理由は、ご質問にあるコードでは filter の条件として `x.devName === "test"` となっていますが、これだとサンプルのJSONでは 1件も該当しなくなってしまうためです。
23
+ 上記の`makeData`では、引数としてフィルターするための `devName` を追加しました。これを追加した理由は、ご質問にあるコードでは filter の条件として `x.devName === "test"` となっていますが、これだとご質問にあるJSONでは1件も該当しなくなってしまうためです。
24
24
 
25
25
 
26
26
 

36

テキスト修正

2019/02/01 14:29

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,11 +2,11 @@
2
2
 
3
3
 
4
4
 
5
- ご質問のコードの何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、そちらを参考にして頂くとして、この回答ではご質問に挙げられている 関数 `makeData` をより少ないコードで書いたリファクタ案と、その使用例を挙げます。
5
+ ご質問のコードの何が原因で "**Uncaught TypeError: data.sort is not a function**" のエラーになっているのかについては、他の回答者様がすでに回答されておりますので、そちらを参考にして頂くとして、この回答ではご質問に挙げられている 関数 `makeData` をより少ないコードで書いたリファクタ案と、その動作確認用のサンプルを挙げます。
6
6
 
7
+ 　　
7
8
 
8
-
9
+ - **リファクタ案：**
9
-
10
10
 
11
11
  ```javascript
12
12
 
@@ -20,7 +20,9 @@
20
20
 
21
21
  ```
22
22
 
23
- 上記のコードでは、フィルターするための `devName` を引数に追加しました。
23
+ 上記のコードでは、フィルターするための `devName` を引数に追加しました。これを追加した理由は、ご質問にあるコードでは filter の条件として `x.devName === "test"` となっていますが、これだとサンプルのJSONでは 1件も該当しなくなってしまうためです。
24
+
25
+
24
26
 
25
27
  以下は上記の `makeData(data, devName)`を使ったサンプルです。
26
28
 
@@ -44,58 +46,6 @@
44
46
 
45
47
  　　
46
48
 
47
- 　　　 　　
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
- ### 補足
56
-
57
-
58
-
59
- ご質問にある `makeData` のコードでも目的は果たせると思いますが、以下の部分
60
-
61
-
62
-
63
- **修正前：**
64
-
65
- ```javascript
66
-
67
- for (var i = 0, len = data.length; i < len; i++) {
68
-
69
- var filterdata = data.filter(function (x) {
70
-
71
- return x.devName === "test";
72
-
73
- });
74
-
75
- }
76
-
77
- ```
78
-
79
- では、 `data` に対する `filter` を `data.length` 回やる必要はなく１回やればよいので、`for`ブロックで囲まないで、
80
-
81
-
82
-
83
- **修正後：**
84
-
85
- ```javascript
86
-
87
- var filterdata = data.filter(function (x) {
88
-
89
- return x.devName === "test";
90
-
91
- });
92
-
93
- ```
94
-
95
-
96
-
97
- でよいかと思います。
98
-
99
49
 
100
50
 
101
51
  以上、参考になれば幸いです。

35

テキスト修正

2019/02/01 14:23

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- ご質問のコードの何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、そちらを参考にして頂くとして、この回答ではご質問に挙げられている **関数** `makeData` **は、こんなふうに（より少ないコードで）書けそうです**、というリファクタ案を以下に挙げます。
5
+ ご質問のコードの何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、そちらを参考にして頂くとして、この回答ではご質問に挙げられている 関数 `makeData` をより少ないコードで書いたリファクタ案と、その使用例を挙げます。
6
6
 
7
7
 
8
8
 

34

テキスト修正

2019/02/01 13:30

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -14,27 +14,19 @@
14
14
 
15
15
  data.filter(e => e.devName === devName)
16
16
 
17
- .map(e => ({ date: moment(e.time), value: e.temp }))
17
+ .map(e => ({ date: new Date(e.time), value: e.temp }))
18
18
 
19
19
  .sort((e1,e2) => e1.date - e2.date);
20
20
 
21
21
  ```
22
22
 
23
- 上記のコードでは、
24
-
25
- - フィルターするための `devName` を引数に追加しました。
23
+ 上記のコードでは、フィルターするための `devName` を引数に追加しました。
26
-
27
- - 日時を表すオブジェクトとして、`Date`ではなく [moment](https://momentjs.com/) を使っています。
28
-
29
-
30
-
31
-
32
24
 
33
25
  以下は上記の `makeData(data, devName)`を使ったサンプルです。
34
26
 
35
27
 
36
28
 
37
- - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/y8e1970d/106/](https://jsfiddle.net/jun68ykt/y8e1970d/106/)
29
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/54dbrjfL/2/](https://jsfiddle.net/jun68ykt/54dbrjfL/2/)
38
30
 
39
31
 
40
32
 
@@ -53,32 +45,6 @@
53
45
  　　
54
46
 
55
47
  　　　 　　
56
-
57
-
58
-
59
-
60
-
61
- 　　
62
-
63
- 　
64
-
65
-
66
-
67
-
68
-
69
- `date` プロパティの値として、 標準の `Date` ではなく [moment](https://momentjs.com/) を使っておくと、上記のサンプルで
70
-
71
-
72
-
73
- ```javascript
74
-
75
- const dateStr = e.date.format('YYYY/MM/DD HH:mm:ss');
76
-
77
- ```
78
-
79
-
80
-
81
- としているように、表示用の文字列を作るために使う [format()](https://momentjs.com/docs/#/displaying/format/)が便利です。日時を様々な形式の文字列で表示させたい場合も、`'YYYY/MM/DD HH:mm:ss'`の部分を変えるだけで対応できます。
82
48
 
83
49
 
84
50
 

33

テキスト修正

2019/02/01 13:23

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -66,35 +66,7 @@
66
66
 
67
67
 
68
68
 
69
- `date` プロパティの値として、 標準の `Date` ではなく [moment](https://momentjs.com/) を使う利点は、以下の２点です。
69
+ `date` プロパティの値として、 標準の `Date` ではなく [moment](https://momentjs.com/) を使っておくと、上記のサンプルで
70
-
71
-
72
-
73
-
74
-
75
- (1) ソートするときに `sort()`に与える比較関数を
76
-
77
-
78
-
79
- ```javascript
80
-
81
- (e1,e2) => e1.date - e2.date
82
-
83
- ```
84
-
85
- と手短かに書けます。これは以下に説明されています。
86
-
87
-
88
-
89
- - [momentjs.com/docs: Difference](https://momentjs.com/docs/#/displaying/difference/)
90
-
91
-
92
-
93
- > An easy way to think of this is by replacing `.diff(` with a **minus operator**.
94
-
95
-
96
-
97
- (2) 上記のサンプルで
98
70
 
99
71
 
100
72
 
@@ -110,7 +82,7 @@
110
82
 
111
83
 
112
84
 
113
- 以上、参考になれば幸いです。
85
+
114
86
 
115
87
 
116
88
 
@@ -157,3 +129,7 @@
157
129
 
158
130
 
159
131
  でよいかと思います。
132
+
133
+
134
+
135
+ 以上、参考になれば幸いです。

32

テキスト修正

2019/02/01 12:21

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- ご質問のコードの何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、そこはクリアできたとして、この回答ではご質問に挙げられているコードのロジックに沿ったうえで、**関数** `makeData` **は、こんなふうに（より少ないコードで）書けそうです**、というリファクタ案を以下に挙げます。
5
+ ご質問のコードの何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、そちらを参考にして頂くとして、この回答ではご質問に挙げられている **関数** `makeData` **は、こんなふうに（より少ないコードで）書けそうです**、というリファクタ案を以下に挙げます。
6
6
 
7
7
 
8
8
 

31

テキスト修正

2019/02/01 12:14

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- ご質問のコードの何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、そこはクリアできたとして、この回答ではご質問に挙げられているコードの意図に沿って、「**関数** `makeData` **は、こんなふうに書けそうです。**」 というリファクタ案を以下に挙げます。
5
+ ご質問のコードの何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、そこはクリアできたとして、この回答ではご質問に挙げられているコードのロジックに沿ったうえで、**関数** `makeData` **は、こんなふうに（より少ないコードで）書けそうです**、というリファクタ案を以下に挙げます。
6
6
 
7
7
 
8
8
 

30

テキスト修正

2019/01/30 18:17

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- ご質問のコードの何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、この回答ではご質問に挙げられているコードの意図に沿って、「**関数** `makeData` **は、こんなふうに書けそうです。**」 というリファクタ案を以下に挙げます。
5
+ ご質問のコードの何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、そこはクリアできたとして、この回答ではご質問に挙げられているコードの意図に沿って、「**関数** `makeData` **は、こんなふうに書けそうです。**」 というリファクタ案を以下に挙げます。
6
6
 
7
7
 
8
8
 

29

テキスト修正

2019/01/30 18:15

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -138,7 +138,7 @@
138
138
 
139
139
  ```
140
140
 
141
- は forループにする必要がなく、 filter を１回やればよいので、
141
+ では、 `data` に対する `filter` を `data.length` 回やる必要はなく１回やればよいので、`for`ブロックで囲まないで、
142
142
 
143
143
 
144
144
 

28

テキスト修正

2019/01/30 17:52

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -111,3 +111,49 @@
111
111
 
112
112
 
113
113
  以上、参考になれば幸いです。
114
+
115
+
116
+
117
+ ### 補足
118
+
119
+
120
+
121
+ ご質問にある `makeData` のコードでも目的は果たせると思いますが、以下の部分
122
+
123
+
124
+
125
+ **修正前：**
126
+
127
+ ```javascript
128
+
129
+ for (var i = 0, len = data.length; i < len; i++) {
130
+
131
+ var filterdata = data.filter(function (x) {
132
+
133
+ return x.devName === "test";
134
+
135
+ });
136
+
137
+ }
138
+
139
+ ```
140
+
141
+ は forループにする必要がなく、 filter を１回やればよいので、
142
+
143
+
144
+
145
+ **修正後：**
146
+
147
+ ```javascript
148
+
149
+ var filterdata = data.filter(function (x) {
150
+
151
+ return x.devName === "test";
152
+
153
+ });
154
+
155
+ ```
156
+
157
+
158
+
159
+ でよいかと思います。

27

テキスト修正

2019/01/30 17:42

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/y8e1970d/100/](https://jsfiddle.net/jun68ykt/y8e1970d/100/)
37
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/y8e1970d/106/](https://jsfiddle.net/jun68ykt/y8e1970d/106/)
38
38
 
39
39
 
40
40
 

26

テキスト修正

2019/01/30 16:26

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/y8e1970d/99/](https://jsfiddle.net/jun68ykt/y8e1970d/99/)
37
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/y8e1970d/100/](https://jsfiddle.net/jun68ykt/y8e1970d/100/)
38
38
 
39
39
 
40
40
 

25

テキスト修正

2019/01/30 16:22

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/y8e1970d/95/](https://jsfiddle.net/jun68ykt/y8e1970d/95/)
37
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/y8e1970d/99/](https://jsfiddle.net/jun68ykt/y8e1970d/99/)
38
38
 
39
39
 
40
40
 

24

テキスト修正

2019/01/30 16:21

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -42,17 +42,13 @@
42
42
 
43
43
 
44
44
 
45
- - 日時でソートされることを確認するために、ご質問に挙げられているJSONの配列要素をランダムに順序を入れ替えて、[mockable.ioに上げたもの](https://demo7981651.mockable.io/q171746.json)を使っています。
45
+ 1. 日時でソートされることを確認するために、ご質問に挙げられているJSONの配列要素をランダムに順序を入れ替えて、[mockable.ioに上げたもの](https://demo7981651.mockable.io/q171746.json)を`$.getJSON` で取得します。
46
46
 
47
+ 2. 関数`makeData` が返す配列要素の内容を、`<ul>` によるリストの `<li>` として表示します。
47
48
 
49
+ 3. 表示結果から、 `devName`　が `"test1"` である要素の内容が、 `date` の昇順に一覧されていることを確認できると思います。
48
50
 
49
- - 関数`makeData` が返す配列要素の内容を、`<ul>` によるリストの `<li>` として表示します。
50
-
51
-
52
-
53
- - 表示結果から、 `devName`　が `"test1"` である要素の内容が、 `date` の昇順に一覧されていることを確認できると思います。
54
-
55
- - `TARGET` を他の`devName`の値（`"test2"`など）に修正して再度実行すると、それに応じた表示になります。
51
+ 4. `TARGET` を他の`devName`の値（`"test2"`など）に修正して再度実行すると、それに応じた表示になります。
56
52
 
57
53
  　　
58
54
 

23

テキスト修正

2019/01/30 16:12

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- ご質問のコードの何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、この回答ではご質問に挙げられているコードの意図に沿って、「**関数** `makeData` **は、こんなふうに書くとよいかもです。**」 というリファクタ案を以下に挙げます。
5
+ ご質問のコードの何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、この回答ではご質問に挙げられているコードの意図に沿って、「**関数** `makeData` **は、こんなふうに書けそうです。**」 というリファクタ案を以下に挙げます。
6
6
 
7
7
 
8
8
 

22

テキスト修正

2019/01/30 15:57

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/y8e1970d/84/](https://jsfiddle.net/jun68ykt/y8e1970d/84/)
37
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/y8e1970d/95/](https://jsfiddle.net/jun68ykt/y8e1970d/95/)
38
38
 
39
39
 
40
40
 

21

テキスト修正

2019/01/30 15:48

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- ご質問のコードの何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、この回答ではご質問に挙げられているコードの意図に沿って、「`makeData` **は、こんなふうにも書けそうです。**」 というリファクタ案を以下に挙げます。
5
+ ご質問のコードの何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、この回答ではご質問に挙げられているコードの意図に沿って、「**関数** `makeData` **は、こんなふうに書くとよいかもです。**」 というリファクタ案を以下に挙げます。
6
6
 
7
7
 
8
8
 

20

テキスト修正

2019/01/30 15:31

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -70,7 +70,7 @@
70
70
 
71
71
 
72
72
 
73
- `date` プロパティに 標準の `Date` ではなく、 [moment](https://momentjs.com/) を使う利点は、以下の２点です。
73
+ `date` プロパティの値として、 標準の `Date` ではなく [moment](https://momentjs.com/) を使う利点は、以下の２点です。
74
74
 
75
75
 
76
76
 

19

テキスト修正

2019/01/30 15:22

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -54,15 +54,21 @@
54
54
 
55
55
  - `TARGET` を他の`devName`の値（`"test2"`など）に修正して再度実行すると、それに応じた表示になります。
56
56
 
57
+ 　　
57
58
 
58
-
59
- 以上、参考になれば幸いです。
59
+ 　　　 　　
60
60
 
61
61
 
62
62
 
63
- ### 追記
64
63
 
65
64
 
65
+ 　　
66
+
67
+ 　
68
+
69
+
70
+
71
+
66
72
 
67
73
  `date` プロパティに 標準の `Date` ではなく、 [moment](https://momentjs.com/) を使う利点は、以下の２点です。
68
74
 
@@ -80,7 +86,7 @@
80
86
 
81
87
  ```
82
88
 
83
- と手短かに書けることです。これは以下に説明されています。
89
+ と手短かに書けます。これは以下に説明されています。
84
90
 
85
91
 
86
92
 
@@ -105,3 +111,7 @@
105
111
 
106
112
 
107
113
  としているように、表示用の文字列を作るために使う [format()](https://momentjs.com/docs/#/displaying/format/)が便利です。日時を様々な形式の文字列で表示させたい場合も、`'YYYY/MM/DD HH:mm:ss'`の部分を変えるだけで対応できます。
114
+
115
+
116
+
117
+ 以上、参考になれば幸いです。

18

テキスト修正

2019/01/30 15:20

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/y8e1970d/83/](https://jsfiddle.net/jun68ykt/y8e1970d/83/)
37
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/y8e1970d/84/](https://jsfiddle.net/jun68ykt/y8e1970d/84/)
38
38
 
39
39
 
40
40
 
@@ -50,9 +50,9 @@
50
50
 
51
51
 
52
52
 
53
- - 表示結果から、 `devName`　が `"test3"` である要素の内容が、 `date` の昇順に一覧されていることを確認できると思います。
53
+ - 表示結果から、 `devName`　が `"test1"` である要素の内容が、 `date` の昇順に一覧されていることを確認できると思います。
54
54
 
55
- - `TARGET` を他の文字列（`"test1"` など）に修正して再度実行すると、それに応じた表示になります。
55
+ - `TARGET` を他の`devName`の値（`"test2"`など）に修正して再度実行すると、それに応じた表示になります。
56
56
 
57
57
 
58
58
 

17

テキスト修正

2019/01/30 15:06

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -52,7 +52,7 @@
52
52
 
53
53
  - 表示結果から、 `devName`　が `"test3"` である要素の内容が、 `date` の昇順に一覧されていることを確認できると思います。
54
54
 
55
-
55
+ - `TARGET` を他の文字列（`"test1"` など）に修正して再度実行すると、それに応じた表示になります。
56
56
 
57
57
 
58
58
 

16

テキスト修正

2019/01/30 15:00

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -42,7 +42,7 @@
42
42
 
43
43
 
44
44
 
45
- - ご質問に挙げられているJSONの配列要素をランダムに入れ替えて、[mockable.ioに上げたもの](https://demo7981651.mockable.io/q171746.json)を使っています。
45
+ - 日時でソートされることを確認するために、ご質問に挙げられているJSONの配列要素をランダムに順序を入れ替えて、[mockable.ioに上げたもの](https://demo7981651.mockable.io/q171746.json)を使っています。
46
46
 
47
47
 
48
48
 

15

テキスト修正

2019/01/30 14:33

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -50,7 +50,7 @@
50
50
 
51
51
 
52
52
 
53
- - 表示結果から、 `devName`　が `"test3"` の要素が `date` の昇順に一覧されていることを確認できると思います。
53
+ - 表示結果から、 `devName`　が `"test3"` である要素の内容が、 `date` の昇順に一覧されていることを確認できると思います。
54
54
 
55
55
 
56
56
 

14

テキスト修正

2019/01/30 13:55

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/y8e1970d/82/](https://jsfiddle.net/jun68ykt/y8e1970d/82/)
37
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/y8e1970d/83/](https://jsfiddle.net/jun68ykt/y8e1970d/83/)
38
38
 
39
39
 
40
40
 

13

テキスト修正

2019/01/30 13:47

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/y8e1970d/80/](https://jsfiddle.net/jun68ykt/y8e1970d/80/)
37
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/y8e1970d/82/](https://jsfiddle.net/jun68ykt/y8e1970d/82/)
38
38
 
39
39
 
40
40
 

12

テキスト修正

2019/01/30 13:37

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -104,4 +104,4 @@
104
104
 
105
105
 
106
106
 
107
- としているように、表示用の[format()](https://momentjs.com/docs/#/displaying/format/)が便利です。日時を様々な形式の文字列で表示させたい場合も、`'YYYY/MM/DD HH:mm:ss'`の部分を変えるだけで対応できます。
107
+ としているように、表示用の文字列を作るために使う [format()](https://momentjs.com/docs/#/displaying/format/)が便利です。日時を様々な形式の文字列で表示させたい場合も、`'YYYY/MM/DD HH:mm:ss'`の部分を変えるだけで対応できます。

11

テキスト修正

2019/01/30 13:27

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/y8e1970d/64/](https://jsfiddle.net/jun68ykt/y8e1970d/64/)
37
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/y8e1970d/80/](https://jsfiddle.net/jun68ykt/y8e1970d/80/)
38
38
 
39
39
 
40
40
 
@@ -46,7 +46,7 @@
46
46
 
47
47
 
48
48
 
49
- - 関数`makeData` が返す配列の要素をJSON文字列にし、`<ul>` によるリストの `<li>` として表示します。
49
+ - 関数`makeData` が返す配列要素の内容を、`<ul>` によるリストの `<li>` として表示します。
50
50
 
51
51
 
52
52
 
@@ -64,7 +64,13 @@
64
64
 
65
65
 
66
66
 
67
- `date` プロパティに 標準の `Date` ではなく、 [moment](https://momentjs.com/) を使う利点は、ソートするときに `sort()`に与える比較関数を
67
+ `date` プロパティに 標準の `Date` ではなく、 [moment](https://momentjs.com/) を使う利点は、以下の２点です。
68
+
69
+
70
+
71
+
72
+
73
+ (1) ソートするときに `sort()`に与える比較関数を
68
74
 
69
75
 
70
76
 
@@ -83,3 +89,19 @@
83
89
 
84
90
 
85
91
  > An easy way to think of this is by replacing `.diff(` with a **minus operator**.
92
+
93
+
94
+
95
+ (2) 上記のサンプルで
96
+
97
+
98
+
99
+ ```javascript
100
+
101
+ const dateStr = e.date.format('YYYY/MM/DD HH:mm:ss');
102
+
103
+ ```
104
+
105
+
106
+
107
+ としているように、表示用の[format()](https://momentjs.com/docs/#/displaying/format/)が便利です。日時を様々な形式の文字列で表示させたい場合も、`'YYYY/MM/DD HH:mm:ss'`の部分を変えるだけで対応できます。

10

テキスト修正

2019/01/30 13:19

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/y8e1970d/60/](https://jsfiddle.net/jun68ykt/y8e1970d/60/)
37
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/y8e1970d/64/](https://jsfiddle.net/jun68ykt/y8e1970d/64/)
38
38
 
39
39
 
40
40
 

9

テキスト修正

2019/01/30 12:41

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- ご質問のコードの何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、この回答ではご質問に挙げられているコードの意図に沿って、「`makeData` **は、こんなふうにも書けます**」 というリファクタ案を以下に挙げます。
5
+ ご質問のコードの何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、この回答ではご質問に挙げられているコードの意図に沿って、「`makeData` **は、こんなふうにも書けそうです。**」 というリファクタ案を以下に挙げます。
6
6
 
7
7
 
8
8
 

8

テキスト修正

2019/01/30 12:22

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -78,7 +78,7 @@
78
78
 
79
79
 
80
80
 
81
- - [/momentjs.com/docs : Difference](https://momentjs.com/docs/#/displaying/difference/)
81
+ - [momentjs.com/docs: Difference](https://momentjs.com/docs/#/displaying/difference/)
82
82
 
83
83
 
84
84
 

7

テキスト修正

2019/01/30 12:01

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
  - フィルターするための `devName` を引数に追加しました。
26
26
 
27
- - 日時を表すオブジェクトとして、`Date`ではなく [moment.js](https://momentjs.com/) を使っています。
27
+ - 日時を表すオブジェクトとして、`Date`ではなく [moment](https://momentjs.com/) を使っています。
28
28
 
29
29
 
30
30
 

6

テキスト修正

2019/01/30 11:36

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -57,3 +57,29 @@
57
57
 
58
58
 
59
59
  以上、参考になれば幸いです。
60
+
61
+
62
+
63
+ ### 追記
64
+
65
+
66
+
67
+ `date` プロパティに 標準の `Date` ではなく、 [moment](https://momentjs.com/) を使う利点は、ソートするときに `sort()`に与える比較関数を
68
+
69
+
70
+
71
+ ```javascript
72
+
73
+ (e1,e2) => e1.date - e2.date
74
+
75
+ ```
76
+
77
+ と手短かに書けることです。これは以下に説明されています。
78
+
79
+
80
+
81
+ - [/momentjs.com/docs : Difference](https://momentjs.com/docs/#/displaying/difference/)
82
+
83
+
84
+
85
+ > An easy way to think of this is by replacing `.diff(` with a **minus operator**.

5

テキスト修正

2019/01/30 11:33

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -46,7 +46,7 @@
46
46
 
47
47
 
48
48
 
49
- - 関数`makeData` が返す配列の要素を`<ul>` によるリストとして表示します。
49
+ - 関数`makeData` が返す配列の要素をJSON文字列にし、`<ul>` によるリストの `<li>` として表示します。
50
50
 
51
51
 
52
52
 

4

テキスト修正

2019/01/30 11:07

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- ご質問のコードの何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、そちらをお読み頂くとして、この回答ではご質問に挙げられているコードの意図に沿って、「`makeData` **は、こんなふうにも書けます**」 というリファクタ案を以下に挙げます。
5
+ ご質問のコードの何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、この回答ではご質問に挙げられているコードの意図に沿って、「`makeData` **は、こんなふうにも書けます**」 というリファクタ案を以下に挙げます。
6
6
 
7
7
 
8
8
 

3

テキスト修正

2019/01/30 10:49

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- ご質問のコードで何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、そちらをお読み頂くとして、この回答ではご質問に挙げられているコードの意図に沿って、「`makeData` **は、こんなふうにも書けます**」 というコードを以下に挙げます。
5
+ ご質問のコードの何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、そちらをお読み頂くとして、この回答ではご質問に挙げられているコードの意図に沿って、「`makeData` **は、こんなふうにも書けます**」 というリファクタ案を以下に挙げます。
6
6
 
7
7
 
8
8
 

2

テキスト修正

2019/01/30 10:42

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,9 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- ご質問のコードで何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、そちらをお読み頂くとして、この回答ではご質問に挙げられている `makeData` のコードの意図に沿って、
5
+ ご質問のコードで何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、そちらをお読み頂くとして、この回答ではご質問に挙げられているコードの意図に沿って、「`makeData` **は、こんなふうにも書けます**」 というコードを以下に挙げます。
6
-
7
- `makeData` **は、こんなふうにも書けます**、というコードを以下に挙げます。
8
6
 
9
7
 
10
8
 

1

テキスト修正

2019/01/30 10:18

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,9 @@
2
2
 
3
3
 
4
4
 
5
- ご質問のコードで何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、そちらをお読み頂くとして、この回答では「**関数**`makeData` **は、こんなふうにも書けます**」というコードを以下に挙げます。
5
+ ご質問のコードで何が原因でエラーになっているのかについては、他の回答者様がすでに回答されておりますので、そちらをお読み頂くとして、この回答ではご質問に挙げられている `makeData` のコードの意図に沿って、
6
+
7
+ `makeData` **は、こんなふうにも書けます**、というコードを以下に挙げます。
6
8
 
7
9
 
8
10