回答編集履歴
16
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が返すデータのo
|
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
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
test
CHANGED
@@ -66,7 +66,7 @@
|
|
66
66
|
のいずれかもしくは両方であると考えられます。
|
67
67
|
|
68
68
|
#### 1. テストデータの用意
|
69
|
-
まず、APIから取得するデータについては、「操作日」(`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
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
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
|
-
(もしかしたら直されたうえで試されているのかもしれませんが、
|
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
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
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
追加質問に対する回答
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
test
CHANGED
@@ -37,7 +37,7 @@
|
|
37
37
|
```
|
38
38
|
|
39
39
|
|
40
|
-
したがって、下記のように
|
40
|
+
したがって、(1とともに)下記のように適切な判定結果を返すように修正してください。
|
41
41
|
**【下記のように修正する】**
|
42
42
|
```js
|
43
43
|
completionCardDatafilter() {
|
7
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
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
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
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
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
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
修正
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
|
-
|
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
|
-
に変えてみてはいかがでしょうか。
|