優れたWebサイトを作るには必須！「デバック」を簡単・効率的に行うコツ

開発者の仕事はコードを書くことだけではありません。

優れた開発者になるためには、デバッグにも精通している必要があります。

・問題を隔離する

問題の隔離はデバッグにおいて非常に重要です。

コードは様々なライブラリやフレームワークにより肥大化しがちです。問題のある部分のみを特定して他とは隔離することで、次のような利点が生まれます。

• ・見当をつけている根本の問題かどうかが判別できる
• ・時間ベースのタスクの場合には、競合状態が起こっているかどうかがわかる
• ・コードがもっとシンプルにできないか考えることで、コードの記述や維持に役に立つ
• ・詳しく調査することでその部分のみの問題かどうかがわかる

問題を再現できるようにすることも重要です。再現を行うには原因を特定する必要がありますが、それが行えないと問題を解決することも難しいでしょう。

問題の隔離を行う方法はいくつかありますが、ローカルインスタンスに同じ状況を再現したり、コード中にブレークポイントを作ったりするといいでしょう。

・整然と行う

勉強会での生徒の様子を見ていると、デバッグを理路整然と行えない人が目立ちます。

急ぐあまり様々な部分を一斉に変更してしまい、何が起こったか判別できなくなるのです。開発環境が高度化したおかげでこうしたことができてしまうのですが、これではウサギとカメのように余計な時間がかかります。迷ったら一旦止まって、一つずつ解決していきましょう。

・良いツールを選ぶ

問題に膨大な種類があるように、それを解決するためのツールも多数用意されています。最近ではブラウザの拡張機能でもデバッグが行えます。簡単に有効・無効を切り替えることができるため手軽に使えます。もし特定のライブラリやフレームワークを使って開発している場合、専用のデバッグツールが存在していることもあります。今回は特におすすめのものを紹介しましょう。

• ・Accessibility extension：アクセシビリティの確認用です。
• ・React DevTools：Reactを使っているなら必須です。仮想DOMを見ることができます。
• ・Vue DevTools：React DevToolsのVue向けバージョンです。
• ・Codopen：CodePenを編集モードから簡単にデバッグモードにできる拡張です。
• ・Pageruler：ページ上にあるものならなんでもピクセル単位で長さを計測することができます。

優れたサイト作りにデバッグは欠かせません。大変な作業ですが、慎重かつ効率よく行いましょう。

※本記事は、Debugging Tips and Tricksを翻訳・再構成したものです。