【初学者向け】フロント：バグの解消方法
目的
フロントエンジニアになって約2年半、ここまでやってきて有用だったバグの解消方法をまとめておきたいと思います。
1. 問題の箇所を特定する
技術的な役割での分割
フロントエンド (クライアントサイド)、バックエンド (サーバーサイド)、インフラどの部分で問題が起こっているかを切り分ける必要があります。
curlコマンドでAPIを叩いてみる
ターミナルでcurlコマンドを使用してリクエストを送信し、正常に動作するかどうかを確認します。
ここで問題があった場合は、原因がバックエンド側にある可能性が高いです。
状況をまとめる
成功と失敗の状況を整理し、どの環境で問題が発生しているかを把握します。
成功する条件と失敗する条件を箇条書きで羅列していくと良いです。
例：local上では上手くいくが、デプロイすると上手くいかない
フロントエンドに原因があった場合(画面以外)
ログを確認
console.log(値) や console.dir(JSON.stringify(オブジェクトの値)) をコードに書いて、ログを確認していきます。これで
- どこまで値を持ってこれているのか？
- どこから空になってしまっているのか？
- どこから値の形が狂っているのか？
を特定します。
フロントエンドに原因があった場合(画面)
影響を与えているパーツを特定
CSS等に問題があった場合の原因特定方法です。
影響を与えている可能性のあるパーツをコメントアウトしていき、どのパーツに原因があるかを特定します。
2. 問題の解消
問題が特定されたら、バグを解消していきます。
- 問題の原因について仮説を立て、それを1つ1つ試してきます。
- 試す場合は1つずつ試すことが大事です。一気に試すと、どれが解消に繋がったのか分からなくなってしまいます。(理科の実験と同じ)
3. 解決しない場合
最初は仮説を立てる事が難しいかと思います。その場合は下記方法で対応しています。
情報漏洩に気を付けつつ、AIに聞いてみる
コードを教えてもらった場合、必ず「何をやっているのか」は把握しておくようにします。そのままコピペで利用しないようにしています。
エラー文をコピペしてブラウザで検索をかけてみる
これが一番解決する可能性が高いです。
Stack Overflowで答えが見つかった際の解決策は英語になりますが、翻訳機能を利用して活用します。
ライブラリのGitHubのIssueを確認する
同じ悩みを持っている人がいないか、検索してみます。
そもそもライブラリ側で解決していないバグの可能性もあります。(その場合はopenになっている)
別の方法をとる
そもそもバグが起きる箇所のやり方を変えて、別のやり方を取るのも1つの方法です。
ライブラリにバグがあった場合はそのライブラリの利用をやめたりします。
4. 解決後
ドキュメントをまとめる
同じバグが起こった際に、以前の知見を活用出来るようにするとかなりバグへの対応力が上がります。
説明出来るようにする
3で検索したコードをコピペしてそのまま使ったりすると、次同じバグが発生した際に応用が効かなくなります。また、予期せぬ挙動が発生する可能性もあります。
まとめ
今回は経験がまだまだ浅い私がどのように普段バグを解決しているのかについてまとめました。
とにかくバグが発生したら、
箇所の特定 → 仮説を立てる → 解消
の手順を意識しています。
余談
15分以上迷ったら人に聞きましょう。
Discussion