動画のコードをもと
にゲームを作成していますが、不具合が出てしまいます。...

いい　

動画のコードをもとにゲームを作成していますが、不具合が出てしまいます。
・タイピングゲームに全問正解し、ゲームが終了するはずなのですが、全問正解直後にスコアを表示させることができません。
・全問正解直後、問題の単語の最後のスペルの色だけが変わらず、黒のままです。その際、ブラウザのカウントダウンは止まります。
・全問正解後から、30秒経過するまで待つことによって、「あなたのスコア　〇〇」というように画面に表示されます（つまり、画面上のカウントダウンは停止していますが、内部ではカウントダウンしているようです）。

タイピングゲームに全問正解直後（問題の単語の最後のスペルの色は変わらず、黒のままで、ブラウザのカウントダウンが止まっている時）、Consoleには２つのエラーが繰り返し表示されます。
「[Vue warn]: Error in render: "TypeError: Cannot convert undefined or null to object"　app.js:38141

found in

---> <ExampleComponent> at resources/js/components/ExampleComponent.vue
<Root>」
と、

「TypeError: Cannot convert undefined or null to object　app.js:39404
at Function.from (<anonymous>)
at VueComponent.problemWords (app.js:1924)
at Watcher.get (app.js:41979)
at Watcher.evaluate (app.js:42084)
at VueComponent.computedGetter [as problemWords] (app.js:42333)
at Object.get (app.js:39611)
at Proxy.render (app.js:37359)
at VueComponent.Vue._render (app.js:41052)
at VueComponent.updateComponent (app.js:41568)
at Watcher.get (app.js:41979)」
の２つです。
内部のカウントダウンが終了するまで、上記の同じエラーが何度も繰り返し吐かれ続けます。

エラーと思われるapp.jsファイルの該当する行を見ても、処理が書かれているだけでエラーの原因では無さそうです。。
エラーに表示されている「Error in render:」あたりがヒントになるのかなと思いググりましたが、解決の糸口を見つけられずにいます。
考えられる原因を教えていただけますでしょうか。よろしくお願いします。

2019/09/14

回答 1件

ウェブカツコーチ　

講師からの回答

app.jsは.vueファイルをコンパイル(機械が読めるように翻訳すること)した結果のファイルなのでエラーに書いてある行を見ても原因はわかりません。
まずはコンパイルする前のコードを見る必要があります。

[Vue warn]: Error in render: "TypeError: Cannot convert undefined or null to object"　app.js:38141
（こんなエラーがでたよ)
found in
<ExampleComponent> at resources/js/components/ExampleComponent.vue
(found in 以降でね)
ということなので見るべきはExampleComponentということになります。

「Error in render」というのはレンダリング(書いたコードを機械が読み取って表示する)のエラーという意味で具体的なエラーの内容を書いているわけではありません。
"TypeError: Cannot convert undefined or null to object"
この部分がエラーの内容です。

2021/05/19

い　

ありがとうございます、頂いたアドバイスをもとに再度検討しました。

結局、全問終了してもカウントダウンが終了するまではエラーが繰り返し出てしまうというのが、動画のサンプルコードの挙動なのではないかなと思いました。
つまりサンプルコードでは、カウントダウンによってしか終了することができないと考えましたが、いかがでしょうか？

Lesson19の12分あたりから、window.clearInterval(timer)とthis.countTimer()の説明があります。サンプルコードでは、以下のカウントダウンが終わった後の部分でしかisEndをtrueにできません。
countTimer: function () {

const endSound = new Audio('../sounds/gong-played2.mp3')

let timer = window.setInterval(() => {
this.timerNum -= 1

if(this.timerNum <= 0){
this.isEnd = true

window.clearInterval(timer)
endSound.play()
}
}, 1000)
}
これは、カウントダウンによってのみ終了させることができるコードになっていると思います。
サンプルコードだと最終問題に答えて次の問題を出力させようとしても、問題を出すことができない（全ての問題を終わらせ、終了画面を表示させることができない）から、カウントダウンがあるたびにエラーが繰り返し出されてしまうのではないかと考えましたが、合っていますでしょうか？
動画内では、全問終了直後にタイピングゲームを終わらせるような挙動を見せている箇所は無さそうです（Lesson18の30秒あたりからゲームの挙動を見せていますが、「カウントダウンによる終了」なのか「全問回答による終了」なのかについては動画で示されていないようです）。

2019/01/24

ウェブカツコーチ　

>つまりサンプルコードでは、カウントダウンによってしか終了することができないと考えましたが、いかがでしょうか？
その認識で合っています。
サンプルコードでは、カウントダウンでのみ終了する実装までしか行っておりません。

そして、エラーの解説です。
最後の問題の最後の文字を入力した後に、vueファイルの147行目付近
++this.currentProblemNum
で、this.currentProblemNumの値が１つ増えます。
このとき、その値がその練習には存在しない質問のインデックス番号であるため、
>TypeError: Cannot convert undefined or null to object　app.js:39404
>at Function.from (<anonymous>)
>at VueComponent.problemWords (app.js:1924)
と、computedプロパティのメソッドproblemWordsで上記のエラーが発生しています。

また、１秒ごとにこのエラー表示が繰り返されるのは、
methodsプロパティのメソッドcountTimerの173行目付近の
this.timerNum -= 1
でthis.timeNumが更新されて、
その更新される度にcomputedの各メソッドが実行されるためです。
そのとき、メソッドproblemWordsが繰り返され、
上記の説明通りのエラーが生じ続けています。

ご自身で全問回答後に回答終了となるよう、このscript文中を修正しても勉強になると思います。
ですが、この部活のテーマはVue.jsではなくLaravelであることや、
Lesson20の最後でまとめているように、このレッスンのパートの目的はVue.jsの処理の大きな流れを掴むことなので、
このまま以降のレッスンに進んでも大丈夫です。

2019/07/02

動画のコードをもと
にゲームを作成していますが、不具合が出てしまいます。...

部活の学習一覧

ご意見箱

動画のコードをもとにゲームを作成していますが、不具合が出てしまいます。...

部活の学習一覧

ご意見箱

動画のコードをもと
にゲームを作成していますが、不具合が出てしまいます。...