編集履歴

回答編集履歴

修正

2019/10/22 21:41

投稿

take-t.t.

スコア360

answer CHANGED Viewed

@@ -10,12 +10,12 @@
 ご提示の[ToDoリスト例](https://jp.vuejs.org/v2/examples/todomvc.html)に関しても、ウォッチャが監視している`todos`はオブジェクトを値に持つ配列なので、`handler`を消してしまうと正しく機能せず`todoStorage.save`が発火していないのが分かると思います。
 試しに`todoStorageのsaveメソッド`に`alert('fired')`を追記し、どのタイミングで呼ばれているのか確認すると分かりやすいです。
 例えば、リストの左にあるチェックボックス（`.toggle`）にチェックを入れると該当の`todos[index].completed`を`true`に変更するので、このタイミングでウォッチャが反応しますが、`handler`を消してしまうと変更を感知できず`todoStorage.save`は発火しません。
-また`todos[index].title`を編集して`doneEdit`が発火した時も同じです。
+またテキストボックス(`.edit`)から`todos[index].title`を編集する時も同じです。
 変更後にリロードしてみると、ローカルストレージに保存できていないのが分かると思います。
 恐らく__Nero1129さん__が「handlerを消しても動作する」と仰っているのは、`addTodo`を実行した時の事だと思いますが、この場合は配列にオブジェクトをpushしているだけなので`handler`が無くてもウォッチャは変更を感知できます。
 そのため`todoStorage.save`が発火しローカルストレージに保存できています。
 **まとめ：**
-`handler`を消してしまうと、`addTodo`での変更はローカルストレージに保存されるが、`doneEdit`と`.toggle`でのプロパティの変更はウォッチャが感知できずにローカルストレージに保存されない。
+`handler`を消してしまうと、`addTodo`での変更はローカルストレージに保存されるが、`.edit`や`.toggle`でのプロパティの変更はウォッチャが感知できずにローカルストレージに保存されない。
 そのため、一見すると問題無く動いているように見えるが、実際は期待された動作が正しく行われていない。

脱字を修正

2019/10/22 21:41

投稿

take-t.t.

スコア360

answer CHANGED Viewed

@@ -9,7 +9,7 @@
 **追記：**
 ご提示の[ToDoリスト例](https://jp.vuejs.org/v2/examples/todomvc.html)に関しても、ウォッチャが監視している`todos`はオブジェクトを値に持つ配列なので、`handler`を消してしまうと正しく機能せず`todoStorage.save`が発火していないのが分かると思います。
 試しに`todoStorageのsaveメソッド`に`alert('fired')`を追記し、どのタイミングで呼ばれているのか確認すると分かりやすいです。
-リストの左にあるチェックボックス（`.toggle`）にチェックを入れると該当の`todos[index].completed`を`true`に変更するので、このタイミングでウォッチャが反応しますが、`handler`を消してしまうと変更を感知できず`todoStorage.save`は発火しません。
+例えば、リストの左にあるチェックボックス（`.toggle`）にチェックを入れると該当の`todos[index].completed`を`true`に変更するので、このタイミングでウォッチャが反応しますが、`handler`を消してしまうと変更を感知できず`todoStorage.save`は発火しません。
 また`todos[index].title`を編集して`doneEdit`が発火した時も同じです。
 変更後にリロードしてみると、ローカルストレージに保存できていないのが分かると思います。

記入漏れを修正

2019/10/22 21:25

投稿

take-t.t.

スコア360

answer CHANGED Viewed

@@ -1,7 +1,7 @@
 ウォッチャがオブジェクト内の変更を感知した際に実行する処理を記載する場所が`handler`です。
 例えば以下の①の場合のコードは`handler`が無くても動きますが、②のコードは**動きません**。
-そのため③のコードのように`deep: true`とhandlerを用いて値の変更を監視します。
+そのため③のコードのように`deep: true`と`handler`を用いて値の変更を監視します。
 ①[https://jsfiddle.net/svudfLoc/](https://jsfiddle.net/svudfLoc/)
 ②[https://jsfiddle.net/5gxa10cy/](https://jsfiddle.net/5gxa10cy/)
 ③[https://jsfiddle.net/w0kv2b6x/](https://jsfiddle.net/w0kv2b6x/)
@@ -9,7 +9,7 @@
 **追記：**
 ご提示の[ToDoリスト例](https://jp.vuejs.org/v2/examples/todomvc.html)に関しても、ウォッチャが監視している`todos`はオブジェクトを値に持つ配列なので、`handler`を消してしまうと正しく機能せず`todoStorage.save`が発火していないのが分かると思います。
 試しに`todoStorageのsaveメソッド`に`alert('fired')`を追記し、どのタイミングで呼ばれているのか確認すると分かりやすいです。
-リストの左にあるチェックボックス（`.toggle`）にチェックを入れると該当の`todos[index].completed`を`true`に変更するので、このタイミングでウォッチャが反応しますが、`handler`を消してしまうと変更を検知できず`todoStorage.save`は発火しません。
+リストの左にあるチェックボックス（`.toggle`）にチェックを入れると該当の`todos[index].completed`を`true`に変更するので、このタイミングでウォッチャが反応しますが、`handler`を消してしまうと変更を感知できず`todoStorage.save`は発火しません。
 また`todos[index].title`を編集して`doneEdit`が発火した時も同じです。
 変更後にリロードしてみると、ローカルストレージに保存できていないのが分かると思います。

誤字を修正

2019/10/22 20:29

投稿

take-t.t.

スコア360

answer CHANGED Viewed

@@ -7,7 +7,7 @@
 ③[https://jsfiddle.net/w0kv2b6x/](https://jsfiddle.net/w0kv2b6x/)
 **追記：**
-ご提示の[ToDoリスト例](https://jp.vuejs.org/v2/examples/todomvc.html)に関しても、ウォッチャーが監視している`todos`はオブジェクトを値に持つ配列なので、`handler`を消してしまうと正しく機能せず`todoStorage.save`が発火していないのが分かると思います。
+ご提示の[ToDoリスト例](https://jp.vuejs.org/v2/examples/todomvc.html)に関しても、ウォッチャが監視している`todos`はオブジェクトを値に持つ配列なので、`handler`を消してしまうと正しく機能せず`todoStorage.save`が発火していないのが分かると思います。
 試しに`todoStorageのsaveメソッド`に`alert('fired')`を追記し、どのタイミングで呼ばれているのか確認すると分かりやすいです。
 リストの左にあるチェックボックス（`.toggle`）にチェックを入れると該当の`todos[index].completed`を`true`に変更するので、このタイミングでウォッチャが反応しますが、`handler`を消してしまうと変更を検知できず`todoStorage.save`は発火しません。
 また`todos[index].title`を編集して`doneEdit`が発火した時も同じです。

文章を微修正

2019/10/22 19:06

投稿

take-t.t.

スコア360

answer CHANGED Viewed

@@ -1,4 +1,4 @@
-ウォッチャがオブジェクト内の変更を検知した際に実行する処理を記載する場所が`handler`です。
+ウォッチャがオブジェクト内の変更を感知した際に実行する処理を記載する場所が`handler`です。
 例えば以下の①の場合のコードは`handler`が無くても動きますが、②のコードは**動きません**。
 そのため③のコードのように`deep: true`とhandlerを用いて値の変更を監視します。
@@ -6,7 +6,7 @@
 ②[https://jsfiddle.net/5gxa10cy/](https://jsfiddle.net/5gxa10cy/)
 ③[https://jsfiddle.net/w0kv2b6x/](https://jsfiddle.net/w0kv2b6x/)
-追記：
+**追記：**
 ご提示の[ToDoリスト例](https://jp.vuejs.org/v2/examples/todomvc.html)に関しても、ウォッチャーが監視している`todos`はオブジェクトを値に持つ配列なので、`handler`を消してしまうと正しく機能せず`todoStorage.save`が発火していないのが分かると思います。
 試しに`todoStorageのsaveメソッド`に`alert('fired')`を追記し、どのタイミングで呼ばれているのか確認すると分かりやすいです。
 リストの左にあるチェックボックス（`.toggle`）にチェックを入れると該当の`todos[index].completed`を`true`に変更するので、このタイミングでウォッチャが反応しますが、`handler`を消してしまうと変更を検知できず`todoStorage.save`は発火しません。
@@ -16,6 +16,6 @@
 恐らく__Nero1129さん__が「handlerを消しても動作する」と仰っているのは、`addTodo`を実行した時の事だと思いますが、この場合は配列にオブジェクトをpushしているだけなので`handler`が無くてもウォッチャは変更を感知できます。
 そのため`todoStorage.save`が発火しローカルストレージに保存できています。
-**まとめ**
+**まとめ：**
 `handler`を消してしまうと、`addTodo`での変更はローカルストレージに保存されるが、`doneEdit`と`.toggle`でのプロパティの変更はウォッチャが感知できずにローカルストレージに保存されない。
 そのため、一見すると問題無く動いているように見えるが、実際は期待された動作が正しく行われていない。

表現を分かりやすく修正

2019/10/22 19:05

投稿

take-t.t.

スコア360

answer CHANGED Viewed

@@ -9,11 +9,11 @@
 追記：
 ご提示の[ToDoリスト例](https://jp.vuejs.org/v2/examples/todomvc.html)に関しても、ウォッチャーが監視している`todos`はオブジェクトを値に持つ配列なので、`handler`を消してしまうと正しく機能せず`todoStorage.save`が発火していないのが分かると思います。
 試しに`todoStorageのsaveメソッド`に`alert('fired')`を追記し、どのタイミングで呼ばれているのか確認すると分かりやすいです。
-リストの左にあるチェックボックスにチェックを入れると該当の`todos[index].completed`を`true`に変更するので、このタイミングでウォッチャが反応しますが、`handler`を消してしまうと変更を検知できず`todoStorage.save`は発火しません。
+リストの左にあるチェックボックス（`.toggle`）にチェックを入れると該当の`todos[index].completed`を`true`に変更するので、このタイミングでウォッチャが反応しますが、`handler`を消してしまうと変更を検知できず`todoStorage.save`は発火しません。
 また`todos[index].title`を編集して`doneEdit`が発火した時も同じです。
-変更後にリロードしてみると、変更が保存できていないのが分かると思います。
+変更後にリロードしてみると、ローカルストレージに保存できていないのが分かると思います。
-恐らくNero1129さんが「handlerを消しても動作する」と仰っているのは、`addTodo`を実行した時の事だと思いますが、この場合は配列にオブジェクトをpushしているだけなので`handler`が無くてもウォッチャは変更を検知できます。
+恐らく__Nero1129さん__が「handlerを消しても動作する」と仰っているのは、`addTodo`を実行した時の事だと思いますが、この場合は配列にオブジェクトをpushしているだけなので`handler`が無くてもウォッチャは変更を感知できます。
 そのため`todoStorage.save`が発火しローカルストレージに保存できています。
 **まとめ**

間違い箇所を訂正・処理流れを詳細に記述

2019/10/22 19:01

投稿

take-t.t.

スコア360

answer CHANGED Viewed

@@ -1,7 +1,21 @@
-ウォッチャーがネストされたものの変更を検知した際に実行する処理を記載する場所が`handler`です。
+ウォッチャがオブジェクト内の変更を検知した際に実行する処理を記載する場所が`handler`です。
 例えば以下の①の場合のコードは`handler`が無くても動きますが、②のコードは**動きません**。
 そのため③のコードのように`deep: true`とhandlerを用いて値の変更を監視します。
 ①[https://jsfiddle.net/svudfLoc/](https://jsfiddle.net/svudfLoc/)
 ②[https://jsfiddle.net/5gxa10cy/](https://jsfiddle.net/5gxa10cy/)
-③[https://jsfiddle.net/w0kv2b6x/](https://jsfiddle.net/w0kv2b6x/)
+③[https://jsfiddle.net/w0kv2b6x/](https://jsfiddle.net/w0kv2b6x/)
+追記：
+ご提示の[ToDoリスト例](https://jp.vuejs.org/v2/examples/todomvc.html)に関しても、ウォッチャーが監視している`todos`はオブジェクトを値に持つ配列なので、`handler`を消してしまうと正しく機能せず`todoStorage.save`が発火していないのが分かると思います。
+試しに`todoStorageのsaveメソッド`に`alert('fired')`を追記し、どのタイミングで呼ばれているのか確認すると分かりやすいです。
+リストの左にあるチェックボックスにチェックを入れると該当の`todos[index].completed`を`true`に変更するので、このタイミングでウォッチャが反応しますが、`handler`を消してしまうと変更を検知できず`todoStorage.save`は発火しません。
+また`todos[index].title`を編集して`doneEdit`が発火した時も同じです。
+変更後にリロードしてみると、変更が保存できていないのが分かると思います。
+恐らくNero1129さんが「handlerを消しても動作する」と仰っているのは、`addTodo`を実行した時の事だと思いますが、この場合は配列にオブジェクトをpushしているだけなので`handler`が無くてもウォッチャは変更を検知できます。
+そのため`todoStorage.save`が発火しローカルストレージに保存できています。
+**まとめ**
+`handler`を消してしまうと、`addTodo`での変更はローカルストレージに保存されるが、`doneEdit`と`.toggle`でのプロパティの変更はウォッチャが感知できずにローカルストレージに保存されない。
+そのため、一見すると問題無く動いているように見えるが、実際は期待された動作が正しく行われていない。

脱字を修正

2019/10/22 18:57

投稿

take-t.t.

スコア360

answer CHANGED Viewed

@@ -1,7 +1,7 @@
 ウォッチャーがネストされたものの変更を検知した際に実行する処理を記載する場所が`handler`です。
-例えば以下の①の場合のコードは`handler`が無くても動きますが、②のコードは動きません。
+例えば以下の①の場合のコードは`handler`が無くても動きますが、②のコードは**動きません**。
-そのため③のコードように`deep: true`とhandlerを用いて値の変更を監視します。
+そのため③のコードのように`deep: true`とhandlerを用いて値の変更を監視します。
 ①[https://jsfiddle.net/svudfLoc/](https://jsfiddle.net/svudfLoc/)
 ②[https://jsfiddle.net/5gxa10cy/](https://jsfiddle.net/5gxa10cy/)
 ③[https://jsfiddle.net/w0kv2b6x/](https://jsfiddle.net/w0kv2b6x/)

回答をよりわかり易い表現に修正

2019/10/22 16:27

投稿

take-t.t.

スコア360

answer CHANGED Viewed

@@ -1,2 +1,7 @@
-ウォッチャーが変更を検知した際に実行する処理を記載する場所が`handler`です。
+ウォッチャーがネストされたものの変更を検知した際に実行する処理を記載する場所が`handler`です。
+例えば以下の①の場合のコードは`handler`が無くても動きますが、②のコードは動きません。
-Vue.jsが用意しているものですね。
+そのため③のコードように`deep: true`とhandlerを用いて値の変更を監視します。
+①[https://jsfiddle.net/svudfLoc/](https://jsfiddle.net/svudfLoc/)
+②[https://jsfiddle.net/5gxa10cy/](https://jsfiddle.net/5gxa10cy/)
+③[https://jsfiddle.net/w0kv2b6x/](https://jsfiddle.net/w0kv2b6x/)