はじめに｜情報不足によるエラー原因特定の遅れを解消したい
システム開発において 「バグ」 の発生は避けられません。
単純なコードミスから意図しない挙動、さらにはユーザーにとって使いづらい仕様まで、その種類は多岐にわたります。
理想的には、バグを発見した瞬間に修正できるのが望ましいですが、発見者と開発者が異なることが多く、情報共有に時間がかかる という課題があります。
バグレポートの情報が不足していると、調査が難航し、修正までの時間が大幅に伸びてしまいます。
この 「情報不足によるエラー原因特定の遅れ」 を解消するために、バグ報告を効率化するツール 「Alterly」 を開発しました。
バグ報告における、初期情報の重要性について
バグレポートでは、「最初の報告時点で必要な情報が揃っていること」 が極めて重要です。
情報が揃っていれば、エンジニアはすぐに原因を特定し、迅速に対応できます。
しかし、情報が不足していると、以下のような問題が発生します。
情報不足によるトラブルの例
①発見者の環境で発生したエラーが、開発者の環境で発生しない
OSやブラウザの違いが原因で、開発者側で再現できず、調査が難航する。
②発見者が不在で、追加情報が得られない
最初の報告だけでは不十分で、発見者に確認しようとしてもすぐに連絡が取れない。
③伝言ゲームによる情報の劣化
ユーザー → サポート担当 → プロジェクトマネージャー → 開発チーム の伝達プロセスで、重要な情報が抜け落ちる。
最初のバグレポートで欲しい情報
最初のバグレポートの段階で以下の情報が揃っていれば、エンジニアはすぐにエラーの原因を特定できます。
⚫︎必要な情報
・URL：https://sample.com/page
・スクリーンショット：エラー発生箇所のスクリーンショット
・OS： macOS 10.15
・ブラウザ： Chrome 131
・スクリーンサイズ: 1000px ×800px
・エラー内容：TypeError: Cannot set properties of null (setting 'onclick')
・エラー行数：index.js:26
・再現手順：バグが発生するまでの具体的な操作手順（動画）
・期待される結果：本来期待される動作や表示内容
・実際の結果：バグ発生時の具体的な状況や表示内容
・再現性：バグが毎回発生するのか、特定の条件下でのみ発生するのかの頻度
これらの情報が揃っていれば、エンジニアが 「どの環境で、どのような操作をしたときに、どんなエラーが発生したのか」 を正確に把握できるため、調査や修正のスピードが大幅に向上します。
検討したこと
バグ報告の際、必要な情報を テンプレートに沿ってクライアントに入力してもらう方法 を検討しました。
しかし、この方法には以下の課題がありました。
・クライアントの負担が増える（報告のたびに手入力が必要）
・入力内容のばらつきが発生する（情報が不足したり、誤記があったりする）
・必要な情報が揃わず、追加確認が発生する（結果として、エンジニアの対応が遅れる）
そこで、「必要な情報を自動取得する」 仕組みを導入するのが最も効率的と判断しました。
自動取得であれば、 クライアントの負担を軽減しつつ、エンジニアにとって必要な情報を漏れなく取得できる ため、報告から修正までのスピードが大幅に向上します。
バグ報告を効率化するツールを開発
そこで、バグ報告を効率化するツール 「Alterly」 を開発しました。
以下の点を重視して開発しました。
・非エンジニアでも簡単に使える
・エンジニアがバグの原因を特定するために必要な情報を、自動で取得できる
・必要な情報を極力自動取得して、必要であればテキストで補完する
・ブラウザ拡張機能として提供
ブラウザ拡張機能にした理由は、クライアント側での導入が容易で、特別な設定なしにすぐに利用できるからです。
使い方や機能の詳細は、後日他の記事にまとめます。
実際に案件で使ってみた
実際に、非エンジニアのクライアントとの案件で利用したところ、以下のような改善点がありました。
| Before | After |
|---|---|
| バグの原因調査に時間がかかる | コンソールログやネットワークログを自動取得し、デバッグ時間を短縮 |
| バグの発生環境（OS・ブラウザ情報など）を後で確認する必要がある | 自動で取得し、開発者へ提供 |
| 再現手順を説明するのが大変 | Alterlyなら画面キャプチャを自動取得し、すぐに共有可能 |
最初の報告の時点でバグ原因が特定でき、コミュニケーションコストが発生することは激減しました！
まとめ
エンジニアにとって、バグ修正は避けて通れない業務です。
しかし、バグを修正するには 「十分な情報が揃っていること」 が前提となります。
情報が不足していると、修正が難しくなるどころか、そもそも原因特定すらできません。
こうした課題を解決するために、「Alterly」 を導入しました。
Alterlyを使えば、バグの報告と同時に、必要な情報を自動取得できるため、開発者とのコミュニケーションが格段にスムーズになります。
ぜひ、この記事を読んで興味を持った方は Alterly を試してみてください！
👉 http://alterly.net/
