回答編集履歴

16

2022/11/25 22:43

投稿

退会済みユーザー
test CHANGED
@@ -73,7 +73,7 @@
73
73
  moment の diff 関数は、下記のようになっているようです。
74
74
  ```js
75
75
  moment(A).diff(B, 'days')
76
- →B を基準として、Aが何日後であるか
76
+ →B を基準として、A が何日後であるか
77
77
  ```
78
78
  仮にAPIが出力するデータのorder_due_date が2021-10-21等、2021年を表す場合
79
79
  ```
@@ -87,7 +87,7 @@
87
87
 
88
88
 
89
89
  #### 3. 修正
90
- 以上を踏まえると、修正の内容としては、要件パターンに応じて下記のようになると思われます。(実際に動作確認する際は、APIが返すデータのoeder_due_date が操作日と近い日付になっていることが前提です。)
90
+ 以上を踏まえると、修正の内容としては、要件パターンに応じて下記のようになると思われます。(実際に動作確認する際は、APIが返すデータの order_due_date が操作日と近い日付になっていることが前提です。)
91
91
  なお、下記で「操作日」とは「`moment(new Date()).format('yyyy-MM-DD') `で取得できる文字列があらわす日付」とします。
92
92
 
93
93
  + パターン①「納期(order_due_date)と操作日の日付を比較して7日以内の配列だけ出力する」の意味が、「納期(order_due_date)が、操作日の7日前から操作日の7日後までであるものを出力する」という意味である場合。

15

2022/11/24 11:51

投稿

退会済みユーザー
test CHANGED
@@ -97,7 +97,7 @@
97
97
  return this.completionCardData.filter((a)=> {
98
98
  const daydiff = moment(a.order.order_due_date).diff(dateToday, 'days');
99
99
  return Math.abs(daydiff) <= 7;
100
- })
100
+ });
101
101
  },
102
102
  ```
103
103
   
@@ -107,7 +107,7 @@
107
107
  return this.completionCardData.filter((a)=> {
108
108
  const daydiff = moment(a.order.order_due_date).diff(dateToday, 'days');
109
109
  return daydiff >= 0 && daydiff <= 7;
110
- })
110
+ });
111
111
  },
112
112
  ```
113
113
 
@@ -117,7 +117,7 @@
117
117
  return this.completionCardData.filter((a)=> {
118
118
  const daydiff = moment(a.order.order_due_date).diff(dateToday, 'days');
119
119
  return daydiff >= -7 && daydiff <= 0;
120
- })
120
+ });
121
121
  },
122
122
 
123
123
  ```

14

 

2022/11/24 11:23

投稿

退会済みユーザー
test CHANGED
@@ -66,7 +66,7 @@
66
66
  のいずれかもしくは両方であると考えられます。
67
67
 
68
68
  #### 1. テストデータの用意
69
- まず、APIから取得するデータについては、「操作日」(`moment(new Date()).format('yyyy-MM-DD') `で取得できる文字列があらわす日付)と整合する形てテストできるデータを用意してください。(さもなくば「`const dateToday = moment(new Date()).format('yyyy-MM-DD')`」の部分を、テストに整合する形に直して下さい)
69
+ まず、APIから取得するデータについては、「操作日」(`moment(new Date()).format('yyyy-MM-DD') `で取得できる文字列があらわす日付)に近い日付の、きちんとテスト可能なデータを用意してください。(さもなくば「`const dateToday = moment(new Date()).format('yyyy-MM-DD')`」の部分を、テストに整合する形に直して下さい)
70
70
  (もしかしたら直されたうえで試されているのかもしれませんが、可能性として書かせていただきました)
71
71
 
72
72
  #### 2. moment の diff 関数

13

 

2022/11/24 11:15

投稿

退会済みユーザー
test CHANGED
@@ -75,9 +75,19 @@
75
75
  moment(A).diff(B, 'days')
76
76
  →B を基準として、Aが何日後であるか
77
77
  ```
78
+ 仮にAPIが出力するデータのorder_due_date が2021-10-21等、2021年を表す場合
79
+ ```
80
+ moment(a.order.order_due_date).diff(dateToday, 'days')
81
+ ```
82
+ はマイナス数百日になるので、
83
+ ```
84
+ moment(a.order.order_due_date).diff(dateToday, 'days') < 7
85
+ ```
86
+ は常にtrueとなってしまいます。
87
+
88
+
78
89
  #### 3. 修正
79
- なので、修正の内容としては、要件パターンに応じて下記のようになると思われます。
90
+ 以上を踏まえると、修正の内容としては、要件パターンに応じて下記のようになると思われます。(実際に動作確認する際は、APIが返すデータのoeder_due_date が操作日と近い日付になっていることが前提です。)
80
-
81
91
  なお、下記で「操作日」とは「`moment(new Date()).format('yyyy-MM-DD') `で取得できる文字列があらわす日付」とします。
82
92
 
83
93
  + パターン①「納期(order_due_date)と操作日の日付を比較して7日以内の配列だけ出力する」の意味が、「納期(order_due_date)が、操作日の7日前から操作日の7日後までであるものを出力する」という意味である場合。

12

2022/11/24 11:04

投稿

退会済みユーザー
test CHANGED
@@ -67,11 +67,10 @@
67
67
 
68
68
  #### 1. テストデータの用意
69
69
  まず、APIから取得するデータについては、「操作日」(`moment(new Date()).format('yyyy-MM-DD') `で取得できる文字列があらわす日付)と整合する形てテストできるデータを用意してください。(さもなくば「`const dateToday = moment(new Date()).format('yyyy-MM-DD')`」の部分を、テストに整合する形に直して下さい)
70
- (もしかしたら直されたうえで試されているのかもしれませんが、そのようなことは 2022/11/24 04:17 編集時点の質問文には**一切記載されていません**ので、考えられる可能性として書かせていただきました)
70
+ (もしかしたら直されたうえで試されているのかもしれませんが、可能性として書かせていただきました)
71
71
 
72
72
  #### 2. moment の diff 関数
73
- completionCardDatafilter 内で consoleを使う等して**デバッグ出力すれば簡単にわかること**なのですが、
74
- moment の diff 関数とやらは、下記のようになっているようです。
73
+ moment の diff 関数は、下記のようになっているようです。
75
74
  ```js
76
75
  moment(A).diff(B, 'days')
77
76
  →B を基準として、Aが何日後であるか

11

 

2022/11/24 10:54

投稿

退会済みユーザー
test CHANGED
@@ -57,7 +57,8 @@
57
57
 
58
58
  # 追記
59
59
  ### コメントより
60
- > 加えてもう一つ質問させていただきたいのですが,納期(order_due_date)と操作日の日付を比較して7日以内の配列だけ出力するプログラムを実装しようと変更したところ,completionCardDatafilterが機能していない?のか画像のようにすべてのカードを抽出してしまっている状態になっています.変更,追加したコードを追記してますので,お時間がある際にこちらに関してアドバイスいただけたら幸いです.
60
+ > 加えてもう一つ質問させていただきたいのですが,納期(order_due_date)と操作日の日付を比較して7日以内の配列だけ出力するプログラムを実装しようと変更したところ,completionCardDatafilterが機能していない?のか画像のようにすべてのカードを抽出してしまっている状態になっています.変更,追加したコードを追記してますので,お時間がある際にこちらに関してアドバイスいただけたら幸いです.(2022/11/24 04:14時点)
61
+
61
62
 
62
63
  すべてのカードを抽出してしまっている原因として考えられるのは、
63
64
  + 抽出するデータが全部2021年となっている等、現実に即していないデータである可能性

10

 

2022/11/24 10:52

投稿

退会済みユーザー
test CHANGED
@@ -82,7 +82,7 @@
82
82
 
83
83
  + パターン①「納期(order_due_date)と操作日の日付を比較して7日以内の配列だけ出力する」の意味が、「納期(order_due_date)が、操作日の7日前から操作日の7日後までであるものを出力する」という意味である場合。
84
84
 
85
- ```
85
+ ```js
86
86
  completionCardDatafilter() {
87
87
  return this.completionCardData.filter((a)=> {
88
88
  const daydiff = moment(a.order.order_due_date).diff(dateToday, 'days');
@@ -92,7 +92,7 @@
92
92
  ```
93
93
   
94
94
  + パターン②「納期(order_due_date)と操作日の日付を比較して7日以内の配列だけ出力する」の意味が、「納期(order_due_date)が、操作日から操作日の7日後までのものを出力する」という意味である場合。
95
- ```
95
+ ```js
96
96
  completionCardDatafilter() {
97
97
  return this.completionCardData.filter((a)=> {
98
98
  const daydiff = moment(a.order.order_due_date).diff(dateToday, 'days');
@@ -102,7 +102,7 @@
102
102
  ```
103
103
 
104
104
  + パターン③「納期(order_due_date)と操作日の日付を比較して7日以内の配列だけ出力する」の意味が、「納期(order_due_date)が、操作日の7日前から操作日までのものを出力する」という意味である場合。
105
- ```
105
+ ```js
106
106
  completionCardDatafilter() {
107
107
  return this.completionCardData.filter((a)=> {
108
108
  const daydiff = moment(a.order.order_due_date).diff(dateToday, 'days');

9

追加質問に対する回答

2022/11/24 10:51

投稿

退会済みユーザー
test CHANGED
@@ -55,3 +55,64 @@
55
55
  },
56
56
  ```
57
57
 
58
+ # 追記
59
+ ### コメントより
60
+ > 加えてもう一つ質問させていただきたいのですが,納期(order_due_date)と操作日の日付を比較して7日以内の配列だけ出力するプログラムを実装しようと変更したところ,completionCardDatafilterが機能していない?のか画像のようにすべてのカードを抽出してしまっている状態になっています.変更,追加したコードを追記してますので,お時間がある際にこちらに関してアドバイスいただけたら幸いです.
61
+
62
+ すべてのカードを抽出してしまっている原因として考えられるのは、
63
+ + 抽出するデータが全部2021年となっている等、現実に即していないデータである可能性
64
+ + momentのdiff関数の結果がうまく利用できていない
65
+ のいずれかもしくは両方であると考えられます。
66
+
67
+ #### 1. テストデータの用意
68
+ まず、APIから取得するデータについては、「操作日」(`moment(new Date()).format('yyyy-MM-DD') `で取得できる文字列があらわす日付)と整合する形てテストできるデータを用意してください。(さもなくば「`const dateToday = moment(new Date()).format('yyyy-MM-DD')`」の部分を、テストに整合する形に直して下さい)
69
+ (もしかしたら直されたうえで試されているのかもしれませんが、そのようなことは 2022/11/24 04:17 編集時点の質問文には**一切記載されていません**ので、考えられる可能性として書かせていただきました)
70
+
71
+ #### 2. moment の diff 関数
72
+ completionCardDatafilter 内で consoleを使う等して**デバッグ出力すれば簡単にわかること**なのですが、
73
+ moment の diff 関数とやらは、下記のようになっているようです。
74
+ ```js
75
+ moment(A).diff(B, 'days')
76
+ →B を基準として、Aが何日後であるか
77
+ ```
78
+ #### 3. 修正
79
+ なので、修正の内容としては、要件パターンに応じて下記のようになると思われます。
80
+
81
+ なお、下記で「操作日」とは「`moment(new Date()).format('yyyy-MM-DD') `で取得できる文字列があらわす日付」とします。
82
+
83
+ + パターン①「納期(order_due_date)と操作日の日付を比較して7日以内の配列だけ出力する」の意味が、「納期(order_due_date)が、操作日の7日前から操作日の7日後までであるものを出力する」という意味である場合。
84
+
85
+ ```
86
+ completionCardDatafilter() {
87
+ return this.completionCardData.filter((a)=> {
88
+ const daydiff = moment(a.order.order_due_date).diff(dateToday, 'days');
89
+ return Math.abs(daydiff) <= 7;
90
+ })
91
+ },
92
+ ```
93
+  
94
+ + パターン②「納期(order_due_date)と操作日の日付を比較して7日以内の配列だけ出力する」の意味が、「納期(order_due_date)が、操作日から操作日の7日後までのものを出力する」という意味である場合。
95
+ ```
96
+ completionCardDatafilter() {
97
+ return this.completionCardData.filter((a)=> {
98
+ const daydiff = moment(a.order.order_due_date).diff(dateToday, 'days');
99
+ return daydiff >= 0 && daydiff <= 7;
100
+ })
101
+ },
102
+ ```
103
+
104
+ + パターン③「納期(order_due_date)と操作日の日付を比較して7日以内の配列だけ出力する」の意味が、「納期(order_due_date)が、操作日の7日前から操作日までのものを出力する」という意味である場合。
105
+ ```
106
+ completionCardDatafilter() {
107
+ return this.completionCardData.filter((a)=> {
108
+ const daydiff = moment(a.order.order_due_date).diff(dateToday, 'days');
109
+ return daydiff >= -7 && daydiff <= 0;
110
+ })
111
+ },
112
+
113
+ ```
114
+
115
+
116
+ @sakananati さん
117
+
118
+

8

 

2022/11/23 02:09

投稿

退会済みユーザー
test CHANGED
@@ -37,7 +37,7 @@
37
37
  ```
38
38
   
39
39
   
40
- したがって、下記のように適切な判定結果を返すように修正してください。
40
+ したがって、(1とともに)下記のように適切な判定結果を返すように修正してください。
41
41
  **【下記のように修正する】**
42
42
  ```js
43
43
  completionCardDatafilter() {

7

 

2022/11/23 02:08

投稿

退会済みユーザー
test CHANGED
@@ -38,7 +38,7 @@
38
38
   
39
39
   
40
40
  したがって、下記のように、適切な判定結果を返すように修正してください。
41
- **【修正】**
41
+ **【下記のように修正する】**
42
42
  ```js
43
43
  completionCardDatafilter() {
44
44
  return this.completionCardData.filter((a) =>

6

 

2022/11/23 02:07

投稿

退会済みユーザー
test CHANGED
@@ -28,7 +28,17 @@
28
28
  },
29
29
  ```
30
30
 
31
+ この引数関数だけを取り出して書き換えると、下記とほぼ同義です。
32
+ ```js
33
+ function(a) {
34
+ a.order.order_due_date === '2021-01-22'; // 単に比較してるだけ。
35
+ // returnされるのは、比較結果ではなく、undefined
36
+ }
37
+ ```
38
+  
39
+  
31
- したがって、下記のように、適切な判定結果を返す関数を指定してください。
40
+ したがって、下記のように、適切な判定結果を返すように修正してください。
41
+ **【修正後】**
32
42
  ```js
33
43
  completionCardDatafilter() {
34
44
  return this.completionCardData.filter((a) =>

5

 

2022/11/23 02:04

投稿

退会済みユーザー
test CHANGED
@@ -1,5 +1,24 @@
1
+
2
+ 1.まず、template 内の
3
+ ```js
4
+ <div class="board green">
5
+ <p class="boardText">完了</p>
6
+ <div class="cardArea">
7
+ <router-link
8
+ v-for="data in completionCardData"
9
+ 以下略
10
+ ```
11
+ の下から2番目の行を
12
+ ```js
13
+ v-for="data in completionCardDatafilter"
14
+ ```
15
+ に変えます。
16
+  
17
+  
18
+ 2.
19
+ しかし、上記に修正すると「完了」カテゴリにカードが表示されなくなります。
1
- 下記の算出プロパティの中にある filter 関数の引数に指定した関数は、常に undefined を返します。
20
+ なぜカードが表示されないかというと、下記の算出プロパティ completionCardDatafilter の中にある filter 関数の引数に指定した関数は、常に undefined を返すからです
2
- のため、期待通りの結果になっていないものと考えられま
21
+ 結果、completionCardDatafilter は空配列になるため、カードが表示されません
3
22
  ```js
4
23
  // 質問文中のコードより引用。行末のコメントは筆者追記。
5
24
  completionCardDatafilter() {
@@ -8,7 +27,8 @@
8
27
  }) // この、filter関数に指定された引数関数は、常に undefined を返す。
9
28
  },
10
29
  ```
30
+
11
- 下記のように、適切な判定結果を返す関数を指定してください。
31
+ したがって、下記のように、適切な判定結果を返す関数を指定してください。
12
32
  ```js
13
33
  completionCardDatafilter() {
14
34
  return this.completionCardData.filter((a) =>
@@ -25,19 +45,3 @@
25
45
  },
26
46
  ```
27
47
 
28
- ---
29
-
30
- かつ上記のフィルターを適用するのであれば template 内の
31
- ```js
32
- <div class="board green">
33
- <p class="boardText">完了</p>
34
- <div class="cardArea">
35
- <router-link
36
- v-for="data in completionCardData"
37
- 以下略
38
- ```
39
- の下から2番目の行を
40
- ```js
41
- v-for="data in completionCardDatafilter"
42
- ```
43
- にも変える必要があると思われます。

4

 

2022/11/23 00:19

投稿

退会済みユーザー
test CHANGED
@@ -24,3 +24,20 @@
24
24
  });
25
25
  },
26
26
  ```
27
+
28
+ ---
29
+
30
+ かつ上記のフィルターを適用するのであれば template 内の
31
+ ```js
32
+ <div class="board green">
33
+ <p class="boardText">完了</p>
34
+ <div class="cardArea">
35
+ <router-link
36
+ v-for="data in completionCardData"
37
+ 以下略
38
+ ```
39
+ の下から2番目の行を
40
+ ```js
41
+ v-for="data in completionCardDatafilter"
42
+ ```
43
+ にも変える必要があると思われます。

3

 

2022/11/23 00:14

投稿

退会済みユーザー
test CHANGED
@@ -1,6 +1,7 @@
1
1
  下記の算出プロパティの中にある filter 関数の引数に指定した関数は、常に undefined を返します。
2
2
  このため、期待通りの結果になっていないものと考えられます。
3
3
  ```js
4
+ // 質問文中のコードより引用。行末のコメントは筆者追記。
4
5
  completionCardDatafilter() {
5
6
  return this.completionCardData.filter((a) => {
6
7
  a.order.order_due_date === '2021-01-22'

2

 

2022/11/23 00:13

投稿

退会済みユーザー
test CHANGED
@@ -4,7 +4,7 @@
4
4
  completionCardDatafilter() {
5
5
  return this.completionCardData.filter((a) => {
6
6
  a.order.order_due_date === '2021-01-22'
7
- })
7
+ }) // この、filter関数に指定された引数関数は、常に undefined を返す。
8
8
  },
9
9
  ```
10
10
  下記のように、適切な判定結果を返す関数を指定してください。

1

修正

2022/11/23 00:12

投稿

退会済みユーザー
test CHANGED
@@ -1,8 +1,25 @@
1
+ 下記の算出プロパティの中にある filter 関数の引数に指定した関数は、常に undefined を返します。
2
+ このため、期待通りの結果になっていないものと考えられます。
3
+ ```js
4
+ completionCardDatafilter() {
5
+ return this.completionCardData.filter((a) => {
6
+ a.order.order_due_date === '2021-01-22'
7
+ })
8
+ },
1
9
  ```
10
+ 下記のように、適切な判定結果を返す関数を指定してください。
11
+ ```js
12
+ completionCardDatafilter() {
2
- v-for="data in completionCardData"
13
+ return this.completionCardData.filter((a) =>
14
+ a.order.order_due_date === '2021-01-22'
15
+ );
16
+ },
3
17
  ```
18
+ または
19
+ ```js
20
+ completionCardDatafilter() {
21
+ return this.completionCardData.filter((a) => {
22
+ return a.order.order_due_date === '2021-01-22';
23
+ });
4
- ↑を
24
+ },
5
25
  ```
6
- v-for="data in completionCardDatafilter"
7
- ```
8
- に変えてみてはいかがでしょうか。