質問編集履歴

5

質問の3を追加しました。質問の書き換えはこれまでにします。

2019/08/15 00:40

投稿

tara-tail
tara-tail

スコア32

test CHANGED
File without changes
test CHANGED
@@ -197,3 +197,7 @@
197
197
 
198
198
 
199
199
  2) `this.item = item`が「Product.vue」の`callback(database.find(el => el.id === id)) `に定義されていないのですが、これはどういう仕組みになっているのでしょうか(どこからこういう記載が出てくるのでしょうか)?
200
+
201
+
202
+
203
+ 3) 最初に載せてある元のソースからですが、「Product.vue」の`products.asyncFind`の第二引数にある`item =>`の部分の`item`ですが、これは「products.js」のcallbackで定義している`el`(`database`配列)と考えてよろしいでしょうか?

4

質問を二つに分けました。

2019/08/15 00:40

投稿

tara-tail
tara-tail

スコア32

test CHANGED
File without changes
test CHANGED
@@ -192,6 +192,8 @@
192
192
 
193
193
  ### 質問
194
194
 
195
+ 1) `callback`が`function`(元々はアロー関数)でラップされていますが、これは必要なのでしょうか?
195
196
 
196
197
 
198
+
197
- 再度お聞きしたいのが、`this.item = item`が「Product.vue」の`callback(database.find(el => el.id === id)) `に定義されていないのですが、これはどういう仕組みになっているのでしょうか(どこからこういう記載が出てくるのでしょうか)?
199
+ 2) `this.item = item`が「Product.vue」の`callback(database.find(el => el.id === id)) `に定義されていないのですが、これはどういう仕組みになっているのでしょうか(どこからこういう記載が出てくるのでしょうか)?

3

自分で試したことのコードを更新。質問をより具体的に変更。

2019/08/14 06:26

投稿

tara-tail
tara-tail

スコア32

test CHANGED
File without changes
test CHANGED
@@ -86,11 +86,13 @@
86
86
 
87
87
  ```
88
88
 
89
- ### 質問
89
+ ### 現在の状態
90
90
 
91
- 「products.js」内のコールバックの引数`database.find(el => el.id === id)`と、「Product.vue」の`products.asyncFind`の二つ目の引数`item => { this.item = item }`の関連付けが理解できません。~~わかりやすく説明していただけると助かります。~~
91
+ 「products.js」内のコールバックの引数`database.find(el => el.id === id)`と、「Product.vue」の`products.asyncFind`の二つ目の引数`item => { this.item = item }`の関連付けが理解できません。
92
92
 
93
+ 具体的には、「Product.vue」の`products.asyncFind`の`{ this.item = item }`は、「products.js」内のコールバックに定義されているような記載が無いのですが、この仕組みを理解しておりません。
94
+
93
- ~~なお配列を検索する` find() `メソッド基本的な使は、理解しております。~~
95
+ また、`item => { this.item = item }`の`item`は、`callback`の`el`(配列)とう指しているので無いかと推測してます。
94
96
 
95
97
 
96
98
 
@@ -100,23 +102,23 @@
100
102
 
101
103
  自分なりに理解を整理するために、コードを変更してみました。
102
104
 
103
- 具体的には`database`配列をエクスポトして、元々「products.js」でコールバック関数の引数設定されていた`database.find(el => el.id === id)`を「Product.vue」側実行するよう書き換えました。
105
+ まずアロー関数にれていないの、ES5の記載えました。
104
106
 
105
107
 
108
+
109
+ <products.js>
106
110
 
107
111
  ```js
108
112
 
109
113
  export default {
110
114
 
111
- database, // database配列をエクスポート
115
+ asyncFind(id, callback) {
112
116
 
113
- asyncFind(callback) { // 引数をコルバック関数のする
117
+ setTimeout(function() { // アロー関数をES5書き方変更
114
118
 
115
- setTimeout(
119
+ callback(database.find(el => el.id === id))
116
120
 
117
- callback() // コールバック関数から引数を削除する
118
-
119
- , 1000)
121
+ }, 1000)
120
122
 
121
123
  }
122
124
 
@@ -150,15 +152,11 @@
150
152
 
151
153
  },
152
154
 
153
- // コールバック関数の引数に指定するためのメソッドを追加
154
-
155
- // databaseをインポートしたので、ここで使えるようになった
155
+ // 理解できていない「this.item = item」の部分、関数とて独立させまし
156
156
 
157
157
  methods: {
158
158
 
159
- xxx() {
159
+ xxx(item) {
160
-
161
- let item = products.database.find(el => el.id === this.id)
162
160
 
163
161
  this.item = item
164
162
 
@@ -172,9 +170,9 @@
172
170
 
173
171
  handler() {
174
172
 
175
- // 引数に、上で追加した関数を指定
173
+ // 二つ目の引数に、上で追加した関数を指定
176
174
 
177
- products.asyncFind(this.xxx)
175
+ products.asyncFind(this.id, this.xxx)
178
176
 
179
177
  },
180
178
 
@@ -190,6 +188,10 @@
190
188
 
191
189
  ```
192
190
 
193
- 動くようましたが、setTimeoutが動作していないように見えます
191
+ うすること同じような動きが再現できました。
194
192
 
193
+ ### 質問
194
+
195
+
196
+
195
- コールバック引数式を指すると関数を指定するのでは、動作違っきてしまうのでしょうか?
197
+ 再度お聞きしたいが、`this.item = item`が「Product.vue」の`callback(database.find(el => el.id === id)) `に定義されていないが、これはどういう仕組みになっているのでしょうか(どこからこういう記載くるのでしょうか

2

コールバック関数から引数を削除しました。できるだけ不明点を明確にするよう、補足に疑問点を書き替えました。

2019/08/14 03:22

投稿

tara-tail
tara-tail

スコア32

test CHANGED
File without changes
test CHANGED
@@ -110,11 +110,11 @@
110
110
 
111
111
  database, // database配列をエクスポート
112
112
 
113
- asyncFind(id, callback) {
113
+ asyncFind(callback) { // 引数をコールバック関数のみにする
114
114
 
115
115
  setTimeout(
116
116
 
117
- callback(id) // コールバック関数引数をidのみにする
117
+ callback() // コールバック関数から引数を削除する
118
118
 
119
119
  , 1000)
120
120
 
@@ -150,15 +150,15 @@
150
150
 
151
151
  },
152
152
 
153
- // コールバック関数の引数にメソッドを追加
153
+ // コールバック関数の引数に指定するためのメソッドを追加
154
154
 
155
155
  // databaseをインポートしたので、ここで使えるようになった
156
156
 
157
157
  methods: {
158
158
 
159
- xxx(id) {
159
+ xxx() {
160
160
 
161
- let item = products.database.find(el => el.id === id)
161
+ let item = products.database.find(el => el.id === this.id)
162
162
 
163
163
  this.item = item
164
164
 
@@ -172,9 +172,9 @@
172
172
 
173
173
  handler() {
174
174
 
175
- // 二つ目の引数に、上で追加した関数を指定
175
+ // 引数に、上で追加した関数を指定
176
176
 
177
- products.asyncFind(this.id, this.xxx)
177
+ products.asyncFind(this.xxx)
178
178
 
179
179
  },
180
180
 
@@ -192,4 +192,4 @@
192
192
 
193
193
  これで動くようになりましたが、setTimeoutが動作していないように見えます。
194
194
 
195
- 修正前のと、やはり動作が違ってきてしまうのでしょうか?
195
+ コールバック引数に式を指定するのと関数を指定するのでは、動作が違ってきてしまうのでしょうか?

1

コードを自分なりに整理して変更しました。また、質問のタイトルを変更しました。

2019/08/14 01:00

投稿

tara-tail
tara-tail

スコア32

test CHANGED
@@ -1 +1 @@
1
- arrow関数を使用したコールバック
1
+ 引数に数式(関数を使用したコールバック
test CHANGED
@@ -88,6 +88,108 @@
88
88
 
89
89
  ### 質問
90
90
 
91
- 「products.js」内のコールバックの引数`database.find(el => el.id === id)`と、「Product.vue」の`products.asyncFind`の二つ目の引数`item => { this.item = item }`の関連付けが理解できません。わかりやすく説明していただけると助かります。
91
+ 「products.js」内のコールバックの引数`database.find(el => el.id === id)`と、「Product.vue」の`products.asyncFind`の二つ目の引数`item => { this.item = item }`の関連付けが理解できません。~~わかりやすく説明していただけると助かります。~~
92
92
 
93
- なお、配列を検索する` find() `メソッドの基本的な使い方は、理解しております。
93
+ ~~なお、配列を検索する` find() `メソッドの基本的な使い方は、理解しております。~~
94
+
95
+
96
+
97
+ ### 試したこと
98
+
99
+ コールバック関数に数式(アロー関数)が入っていることで、理解に苦しんでいます。
100
+
101
+ 自分なりに理解を整理するために、コードを変更してみました。
102
+
103
+ 具体的には、`database`配列をエクスポートして、元々「products.js」でコールバック関数の引数に設定されていた`database.find(el => el.id === id)`を「Product.vue」側で実行するように書き換えました。
104
+
105
+
106
+
107
+ ```js
108
+
109
+ export default {
110
+
111
+ database, // database配列をエクスポート
112
+
113
+ asyncFind(id, callback) {
114
+
115
+ setTimeout(
116
+
117
+ callback(id) // コールバック関数の引数をidのみにする
118
+
119
+ , 1000)
120
+
121
+ }
122
+
123
+ ```
124
+
125
+
126
+
127
+ <Product.vue>
128
+
129
+ ```vue
130
+
131
+ <script>
132
+
133
+ import products from 'products.js'
134
+
135
+ export default {
136
+
137
+ props: {
138
+
139
+ id: Number
140
+
141
+ },
142
+
143
+ data() {
144
+
145
+ return {
146
+
147
+ item: null
148
+
149
+ }
150
+
151
+ },
152
+
153
+ // コールバック関数の引数様にメソッドを追加
154
+
155
+ // databaseをインポートしたので、ここで使えるようになった
156
+
157
+ methods: {
158
+
159
+ xxx(id) {
160
+
161
+ let item = products.database.find(el => el.id === id)
162
+
163
+ this.item = item
164
+
165
+ }
166
+
167
+ },
168
+
169
+ watch: {
170
+
171
+ id: {
172
+
173
+ handler() {
174
+
175
+ // 二つ目の引数に、上で追加した関数を指定
176
+
177
+ products.asyncFind(this.id, this.xxx)
178
+
179
+ },
180
+
181
+ immediate: true
182
+
183
+ }
184
+
185
+ }
186
+
187
+ }
188
+
189
+ </script>
190
+
191
+ ```
192
+
193
+ これで動くようになりましたが、setTimeoutが動作していないように見えます。
194
+
195
+ 修正前のものと、やはり動作が違ってきてしまうのでしょうか?