回答編集履歴

26

テキスト修正

2018/02/12 04:56

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -248,4 +248,4 @@
248
248
 
249
249
  ```
250
250
 
251
- とが違う結果を返すことが理解できます。
251
+ とが違う結果を返すことが確認できます。

25

テキスト修正

2018/02/12 04:56

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -178,9 +178,7 @@
178
178
 
179
179
 
180
180
 
181
- という結果になります。
181
+ という結果になります。望ましいのは、上記の3つとも表示されてほしいわけですが、
182
-
183
-
184
182
 
185
183
  以下、このような結果になる理由を説明します。
186
184
 

24

テキスト修正

2018/02/12 04:53

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -180,7 +180,9 @@
180
180
 
181
181
  という結果になります。
182
182
 
183
+
184
+
183
- このような結果になる理由を説明します。
185
+ 以下、このような結果になる理由を説明します。
184
186
 
185
187
 
186
188
 

23

テキスト修正

2018/02/12 04:31

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -230,7 +230,7 @@
230
230
 
231
231
 
232
232
 
233
- 上記とおり、 `===` を `==` としてみることで、
233
+ ように `===` を `==` に変えてみることで、
234
234
 
235
235
 
236
236
 

22

テキスト修正

2018/02/12 02:45

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -190,7 +190,7 @@
190
190
 
191
191
 
192
192
 
193
- 理由は、以下の判定が `true`になるからです。
193
+ 理由は、以下の判定が `true`**になる**からです。
194
194
 
195
195
 
196
196
 

21

テキスト修正

2018/02/12 02:39

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -104,23 +104,95 @@
104
104
 
105
105
  ```
106
106
 
107
- として、ご質問のコードを実行して tokyoとautumのラジオボタンをクリックしてみると、
107
+ として、ご質問のコードを実行して autum のラジオボタンをクリックしてみると、
108
-
109
- "カフェ 、秋" が autumボタンをクリックしても表示されないことを除けば、
108
+
110
-
111
- 該当するものが表示されます。
109
+ API から返され
112
-
113
-
114
-
115
- これはなぜかといえば、以下の式が `true` **になる**からです。
110
+
116
-
117
-
118
-
119
- ```javascript
111
+ ```json
112
+
120
-
113
+ [
114
+
115
+ {
116
+
117
+   "category": ["cafe", "autum"],
118
+
119
+   "caption": "カフェ、秋",
120
+
121
+   "url": "http://jsrun.it/assets/3/o/C/A/3oCAy.jpg"
122
+
123
+ },
124
+
125
+ {
126
+
127
+   "category": ["autum"],
128
+
129
+   "caption": "紅葉",
130
+
131
+   "url": "http://jsrun.it/assets/y/c/W/i/ycWii.jpg"
132
+
133
+ },
134
+
135
+ {
136
+
121
- ["tokyo"] == "tokyo"
137
+   "category": ["tokyo"],
138
+
122
-
139
+   "caption": "東京駅",
140
+
141
+   "url": "http://jsrun.it/assets/n/O/V/x/nOVx2.jpg"
142
+
143
+ },
144
+
145
+ {
146
+
147
+   "category": ["autum"],
148
+
149
+   "caption": "紅葉2",
150
+
151
+   "url": "http://jsrun.it/assets/h/I/X/B/hIXBO.jpg"
152
+
153
+ },
154
+
155
+ {
156
+
157
+   "category": ["tokyo"],
158
+
159
+   "caption": "東京タワー",
160
+
161
+   "url": "http://jsrun.it/assets/j/S/t/n/jStnu.jpg"
162
+
163
+ }
164
+
165
+ ]
166
+
123
- ```
167
+ ```
168
+
169
+ のうち、
170
+
171
+
172
+
173
+ - `"caption": "紅葉"` と `"caption": "紅葉2"` は表示されるが、
174
+
175
+
176
+
177
+ - `"caption": "カフェ、秋"` のデータは表示されない。
178
+
179
+
180
+
181
+ という結果になります。
182
+
183
+ このような結果になる理由を説明します。
184
+
185
+
186
+
187
+ まず、
188
+
189
+ - `"caption": "紅葉"` と `"caption": "紅葉2"` は表示される
190
+
191
+
192
+
193
+ 理由は、以下の判定が `true`になるからです。
194
+
195
+
124
196
 
125
197
  ```javascript
126
198
 
@@ -130,24 +202,50 @@
130
202
 
131
203
 
132
204
 
133
- 上記で、左辺の `["tokyo"]` や `["autum"]` は、 `==` の右辺が文字列なので、
205
+ 上記で、左辺の `["autum"]` は、 `==` の右辺が文字列なので、
134
-
206
+
135
- 比較される前に文字列に変換されますが それぞれ、`"tokyo"`、 `"autum"`に変換
207
+ 比較される前に文字列に変換され、`"autum"`となるので、
136
-
208
+
137
- されるので、 `==` の結果 true になります。
209
+ `==` の結果 true になります。
210
+
211
+
212
+
138
-
213
+ 次に、
139
-
140
-
214
+
141
- しかし、cafeンをクリックしたとき意図したようには表示されません
215
+ - `"caption": "カフェ、秋"` データは表示されない
142
-
216
+
217
+
218
+
143
- それは、以下が `true` には**ならない**からです。
219
+ 何故かといえば、以下が `true` には**ならない**からです。
144
-
220
+
145
- ```javascript
221
+ ```javascript
146
-
222
+
147
- ["cafe", "autum"] == "cafe"
223
+ ["cafe", "autum"] == "autum"
148
224
 
149
225
  ```
150
226
 
151
227
  上記の左辺は、やはり比較の前に文字列に変換されますが、左辺が文字列になると
152
228
 
153
229
  `"cafe,autum"` に変換され、右辺とは異なる文字列なので `==` は`false`を返します。
230
+
231
+
232
+
233
+ 上記のとおり、 `===` を `==` としてみることで、
234
+
235
+
236
+
237
+ ```javascript
238
+
239
+ ["autum"] === "autum"
240
+
241
+ ```
242
+
243
+ と、
244
+
245
+ ```javascript
246
+
247
+ ["autum"] == "autum"
248
+
249
+ ```
250
+
251
+ とが違う結果を返すことが理解できます。

20

テキスト修正

2018/02/12 02:35

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -60,9 +60,11 @@
60
60
 
61
61
   
62
62
 
63
- 参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。(※画像はありません)
63
+ 参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
64
64
 
65
+ (※画像はありません)
65
66
 
67
+  
66
68
 
67
69
  [http://jsfiddle.net/jun68ykt/8fm81f8z/4/](http://jsfiddle.net/jun68ykt/8fm81f8z/4/)
68
70
 
@@ -102,7 +104,7 @@
102
104
 
103
105
  ```
104
106
 
105
- として、ご質問のコードを実行すると、tokyoとautumのラジオボタンをクリックしきに
107
+ として、ご質問のコードを実行して tokyoとautumのラジオボタンをクリックしてみると、
106
108
 
107
109
  "カフェ 、秋" が autumボタンをクリックしても表示されないことを除けば、
108
110
 

19

テキスト修正

2018/02/11 05:13

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  フィルタリングされた配列を作るところで、`$.grep` を使っていますが、
6
6
 
7
- これに渡す関数が返す boolean の式を、以下のように修正するとよいでしょう。
7
+ これに渡す関数が返す真偽値(の式を、以下のように修正するとよいでしょう。
8
8
 
9
9
 
10
10
 

18

テキスト修正

2018/02/11 02:47

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -146,8 +146,6 @@
146
146
 
147
147
  ```
148
148
 
149
- 上記の左辺は、やはり比較の前に文字列に変換されますが、
149
+ 上記の左辺は、やはり比較の前に文字列に変換されますが、左辺が文字列になると
150
150
 
151
- 上記の左辺が文字列になると、`"cafe,autum"`という文字列に
152
-
153
- 変換され、右辺とは異なる文字列なので`false`を返します。
151
+ `"cafe,autum"` に変換され、右辺とは異なる文字列なので `==` は`false`を返します。

17

テキスト修正

2018/02/11 02:42

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -4,9 +4,7 @@
4
4
 
5
5
  フィルタリングされた配列を作るところで、`$.grep` を使っていますが、
6
6
 
7
- これに渡す関数が`return` boolean の式を、以下のように
7
+ これに渡す関数がす boolean の式を、以下のように修正するとよいでしょう。
8
-
9
- 修正するとよいでしょう。
10
8
 
11
9
 
12
10
 

16

テキスト修正

2018/02/11 02:40

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,11 +2,11 @@
2
2
 
3
3
   
4
4
 
5
- ご質問のコードの中で、フィルタリングされた配列を作るところで、
5
+ フィルタリングされた配列を作るところで、`$.grep` を使っていますが、
6
6
 
7
- `$.grep` に渡す関数が`return` する boolean の式を
7
+ これに渡す関数が`return` する boolean の式を、以下のように
8
8
 
9
- 以下のように修正するとよいでしょう。
9
+ 修正するとよいでしょう。
10
10
 
11
11
 
12
12
 

15

テキスト修正

2018/02/11 02:39

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -112,7 +112,7 @@
112
112
 
113
113
 
114
114
 
115
- これはなぜかといえば、以下の式が `true` になるからです。
115
+ これはなぜかといえば、以下の式が `true` **になる**からです。
116
116
 
117
117
 
118
118
 

14

テキスト修正

2018/02/11 02:33

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -62,7 +62,7 @@
62
62
 
63
63
   
64
64
 
65
- 参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
65
+ 参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。(※画像はありません)
66
66
 
67
67
 
68
68
 

13

テキスト修正

2018/02/11 02:32

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,9 +2,11 @@
2
2
 
3
3
   
4
4
 
5
- ご質問のコードの中で、フィルタリングされた配列を作るところの `$.grep` に渡す関数が
5
+ ご質問のコードの中で、フィルタリングされた配列を作るところで、
6
6
 
7
+ `$.grep` に渡す関数が`return` する boolean の式を
8
+
7
- `return` する boolean の式を以下のように修正するとよいでしょう。
9
+ 以下のように修正するとよいでしょう。
8
10
 
9
11
 
10
12
 

12

テキスト修正

2018/02/11 02:28

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -102,9 +102,9 @@
102
102
 
103
103
  ```
104
104
 
105
- として、ご質問のコードを実行すると、tokyoとautumのラジオボタンをクリックしたとき
105
+ として、ご質問のコードを実行すると、tokyoとautumのラジオボタンをクリックしたとき
106
106
 
107
- "カフェ 、秋" が autum をクリックしたときに表示されないことを除けば、
107
+ "カフェ 、秋" が autumボタンをクリックしても表示されないことを除けば、
108
108
 
109
109
  該当するものが表示されます。
110
110
 

11

テキスト修正

2018/02/11 02:22

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -102,9 +102,11 @@
102
102
 
103
103
  ```
104
104
 
105
- として、ご質問のコードを実行すると、tokyoとautumのラジオボタンをクリックしたときは
105
+ として、ご質問のコードを実行すると、tokyoとautumのラジオボタンをクリックしたときは
106
106
 
107
+ "カフェ 、秋" が autum をクリックしたときに表示されないことを除けば、
108
+
107
- 意図通りに表示されます。
109
+ 該当するものが表示されます。
108
110
 
109
111
 
110
112
 

10

テキスト修正

2018/02/11 02:19

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -74,7 +74,7 @@
74
74
 
75
75
 
76
76
 
77
- ご質問の本題とはややそれますが、以下補足です。
77
+ 以下補足です。
78
78
 
79
79
 
80
80
 

9

テキスト修正

2018/02/11 02:17

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -65,3 +65,87 @@
65
65
 
66
66
 
67
67
  [http://jsfiddle.net/jun68ykt/8fm81f8z/4/](http://jsfiddle.net/jun68ykt/8fm81f8z/4/)
68
+
69
+
70
+
71
+ ---
72
+
73
+ **追記**
74
+
75
+
76
+
77
+ ご質問の本題とはややそれますが、以下補足です。
78
+
79
+
80
+
81
+ 修正前の `return` で返される式
82
+
83
+ ```javascript
84
+
85
+ n.category === cate
86
+
87
+ ```
88
+
89
+ が `true` になることはありません。
90
+
91
+ なぜなら、`===` が `true` になるためには、両辺の型が同じであることが必要ですが、
92
+
93
+ `n.category` は配列(Array)で、 `cate` は文字列(String)だからです。
94
+
95
+
96
+
97
+ ここで試しに、 `=` をひとつ減らした
98
+
99
+ ```javascript
100
+
101
+ n.category == cate
102
+
103
+ ```
104
+
105
+ として、ご質問のコードを実行すると、tokyoとautumのラジオボタンをクリックしたときは
106
+
107
+ 意図通りに表示されます。
108
+
109
+
110
+
111
+ これはなぜかといえば、以下の式が `true` になるからです。
112
+
113
+
114
+
115
+ ```javascript
116
+
117
+ ["tokyo"] == "tokyo"
118
+
119
+ ```
120
+
121
+ ```javascript
122
+
123
+ ["autum"] == "autum"
124
+
125
+ ```
126
+
127
+
128
+
129
+ 上記で、左辺の `["tokyo"]` や `["autum"]` は、 `==` の右辺が文字列なので、
130
+
131
+ 比較される前に文字列に変換されますが、 それぞれ、`"tokyo"`、 `"autum"`に変換
132
+
133
+ されるので、 `==` の結果は true になります。
134
+
135
+
136
+
137
+ しかし、cafeのボタンをクリックしたときは意図したようには表示されません。
138
+
139
+ それは、以下が `true` には**ならない**からです。
140
+
141
+ ```javascript
142
+
143
+ ["cafe", "autum"] == "cafe"
144
+
145
+ ```
146
+
147
+ 上記の左辺は、やはり比較の前に文字列に変換されますが、
148
+
149
+ 上記の左辺が文字列になると、`"cafe,autum"`という文字列に
150
+
151
+ 変換され、右辺とは異なる文字列なので、`false`を返します。

8

テキスト修正

2018/02/11 02:11

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,9 @@
2
2
 
3
3
   
4
4
 
5
- ご質問のコードの中で、フィルタリングされた配列を作るところ
5
+ ご質問のコードの中で、フィルタリングされた配列を作るところの `$.grep` に渡す関数が
6
+
7
+ `return` する boolean の式を以下のように修正するとよいでしょう。
6
8
 
7
9
 
8
10
 
@@ -20,7 +22,7 @@
20
22
 
21
23
 
22
24
 
23
- の `return` で返す boolean の式を、[indexOf](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)を使って以下のように修正するといかがでしょうか?
25
+ これを、[indexOf](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)を使って
24
26
 
25
27
 
26
28
 
@@ -36,7 +38,7 @@
36
38
 
37
39
  ```
38
40
 
39
- あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のようにします。
41
+ とするか、あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のようにします。
40
42
 
41
43
 
42
44
 

7

テキスト修正

2018/02/11 01:34

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -5,6 +5,8 @@
5
5
  ご質問のコードの中で、フィルタリングされた配列を作るところ
6
6
 
7
7
 
8
+
9
+ **修正前:**
8
10
 
9
11
  ```javascript
10
12
 
@@ -22,6 +24,8 @@
22
24
 
23
25
 
24
26
 
27
+ **修正後:**
28
+
25
29
  ```javascript
26
30
 
27
31
  filterdata = $.grep(alldata,function(n){
@@ -33,6 +37,10 @@
33
37
  ```
34
38
 
35
39
  あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のようにします。
40
+
41
+
42
+
43
+ **修正後:**
36
44
 
37
45
  ```javascript
38
46
 
@@ -48,6 +56,8 @@
48
56
 
49
57
 
50
58
 
59
+  
60
+
51
61
  参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
52
62
 
53
63
 

6

テキスト修正

2018/02/11 01:31

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -32,20 +32,24 @@
32
32
 
33
33
  ```
34
34
 
35
+ あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のようにします。
36
+
37
+ ```javascript
38
+
39
+ filterdata = $.grep(alldata,function(n){
40
+
41
+ return n.category.includes(cate);
42
+
43
+ });
44
+
45
+
46
+
47
+ ```
48
+
49
+
50
+
35
51
  参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
36
52
 
37
53
 
38
54
 
39
- [http://jsfiddle.net/jun68ykt/8fm81f8z/3/](http://jsfiddle.net/jun68ykt/8fm81f8z/3/)
55
+ [http://jsfiddle.net/jun68ykt/8fm81f8z/4/](http://jsfiddle.net/jun68ykt/8fm81f8z/4/)
40
-
41
-
42
-
43
-  
44
-
45
- あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のほうがより良いコードかもしれません。
46
-
47
- ```javascript
48
-
49
- return n.category.includes(cate);
50
-
51
- ```

5

テキスト修正

2018/02/11 01:22

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
 
38
38
 
39
- [http://jsfiddle.net/jun68ykt/8fm81f8z/2/](http://jsfiddle.net/jun68ykt/8fm81f8z/2/)
39
+ [http://jsfiddle.net/jun68ykt/8fm81f8z/3/](http://jsfiddle.net/jun68ykt/8fm81f8z/3/)
40
40
 
41
41
 
42
42
 

4

テキスト修正

2018/02/11 01:19

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -32,8 +32,6 @@
32
32
 
33
33
  ```
34
34
 
35
-  
36
-
37
35
  参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
38
36
 
39
37
 
@@ -42,6 +40,8 @@
42
40
 
43
41
 
44
42
 
43
+  
44
+
45
45
  あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のほうがより良いコードかもしれません。
46
46
 
47
47
  ```javascript

3

テキスト修正

2018/02/11 01:12

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
 
20
20
 
21
- の `return` で返す boolean の式を、以下のように修正するといかがでしょうか?
21
+ の `return` で返す boolean の式を、[indexOf](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)を使って以下のように修正するといかがでしょうか?
22
22
 
23
23
 
24
24
 

2

テキスト修正

2018/02/11 01:11

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -39,3 +39,13 @@
39
39
 
40
40
 
41
41
  [http://jsfiddle.net/jun68ykt/8fm81f8z/2/](http://jsfiddle.net/jun68ykt/8fm81f8z/2/)
42
+
43
+
44
+
45
+ あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のほうがより良いコードかもしれません。
46
+
47
+ ```javascript
48
+
49
+ return n.category.includes(cate);
50
+
51
+ ```

1

テキスト修正

2018/02/11 01:10

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -8,11 +8,11 @@
8
8
 
9
9
  ```javascript
10
10
 
11
- filterdata=$.grep(alldata,function(n){
11
+ filterdata = $.grep(alldata,function(n){
12
12
 
13
- return n.category===cate;
13
+ return n.category === cate;
14
14
 
15
- });
15
+ });
16
16
 
17
17
  ```
18
18
 
@@ -24,10 +24,18 @@
24
24
 
25
25
  ```javascript
26
26
 
27
- filterdata=$.grep(alldata,function(n){
27
+ filterdata = $.grep(alldata,function(n){
28
28
 
29
- return n.category.indexOf(cate) >= 0;
29
+ return n.category.indexOf(cate) >= 0;
30
30
 
31
- });
31
+ });
32
32
 
33
33
  ```
34
+
35
+  
36
+
37
+ 参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
38
+
39
+
40
+
41
+ [http://jsfiddle.net/jun68ykt/8fm81f8z/2/](http://jsfiddle.net/jun68ykt/8fm81f8z/2/)