ステップアップJavaScript フロントエンド開発の初級から中級へ進むために

● 付録A

コードがうまく動かない時・ デバッグについて

は じ め に

コードを書いて一発で思った通りに動かすのは私たち経験者でもなかなか難しいことです。ある時にはたった1文字の入れ忘れ、英単語の綴り間違い、必要な設定の入れ忘れなど、様々なシーンで「思った通りに動かない」ことを体験します。何度リロードしても画面にエラーの文字が出続けたり、ログに赤い文字がたくさん並ぶようなこともしょっちゅうです。

ここではそういう際に立ち向かう方法や考え方をまとめてみました。本書を進める途中、書いてあるものを真似しているだけでもうまく動かないことがあると思います。その時には写し間違いを一文字一文字確認するよりも、これからお伝えするようなことを試していただく方がきっと皆さんの成長に役立ちます。

　前半では具体的なツールや方法についてお伝えし、後半ではこれらを使う際の考え方やアプローチについて述べていきます。

Ａ １

エラーメッセージ、スタックトレース

◎ログチェックは基本中の基本。必ずチェック。

　ブラウザ上のJavaScriptであれば、開発者ツールのConsoleタブをチェックするのは必須です。これは他の言語などでも言えることですが、ログをチェックするのは不具合対応の基本中の基本です。

　最初の頃は適切な場所にログを入れることができない場合もあるかもしれません。そのような場合は不安な箇所に積極的にログを入れてみて、確認していくのも良いでしょう。不要になったら後で消せば良いですよね。 ...