4.値を可視化しよう console.logを使って処理中の値を可視化し原因を特定
エラーの例
課題
更新機能での不具合をデバックする
どんな問題なのかを把握するため、問題を可視化する。
演習問題
エラー内容
「ブラウザ中の編集ボタンを押すと、メモの内容が消えてしまう。」
つまり、更新機能の不具合によるエラーがでていた
と考えられる。
ここまでチェックしたこと
前回学習した「エラーを可視化しよう」において
'エラーを出力するクエリ'をもってしてもエラーは見つからなかった
Ex.チェック方法
app.post('/update/:id, (req, res) => {
connection.query(
'UPDATE items SET name = ? WHERE id= ?'
[req.body.itemName,req.params.id],
(error,results) => { ←ここから
console.log(error);
} ←ここまで
ここまでやって予想されるエラーは「保存方法についての値」が違うと考えられる。
req.body.itemNameはどのような値で受け取っているかチェックする
チェック方法
指定ルーティングの中でconsole.logを使ったreq.body.itemNameを出力する
するとターミナル2には以下の文言が表示された
undefined
と。
予想した内容
req.body.itemName属性とnameフォーム属性が一致していない
このように予想される
修正方法
1.上記にて作成したconsole.logを削除する。
不要なログを出力させてしまうリスク回避のため。
2.EJSコードに問題があった事を突き止めた
name属性はinput要素に指定するはずなのになかった
フォールを受け取る準備において不備があった。ということで修正。
name="itemName" の表記をinput要素にname属性を指定した
localhost:3000/index
にアクセスし、もういちど更新機能の正常化を確認する。
本日はここまでになります。頑張って原因究明。デバッカーとして優秀になれるよう、考えながら行動しよう。
お疲れ様でした。