４．値を可視化しよう　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を出力する

するとターミナル２には以下の文言が表示された

undefined

と。

req.body.itemName属性とnameフォーム属性が一致していない

このように予想される

１．上記にて作成したconsole.logを削除する。

不要なログを出力させてしまうリスク回避のため。

２．EJSコードに問題があった事を突き止めた

name属性はinput要素に指定するはずなのになかった

フォールを受け取る準備において不備があった。ということで修正。

name="itemName" の表記をinput要素にname属性を指定した

localhost:3000/index

にアクセスし、もういちど更新機能の正常化を確認する。

本日はここまでになります。頑張って原因究明。デバッカーとして優秀になれるよう、考えながら行動しよう。

お疲れ様でした。