初心者向けのデバッグ術

はじめに

この記事を書くきっかけは、あるページのsvg図のアニメーションに不具合があり、修正したいと思ったことです。不具合の内容として、SVG図が読み込み終わっていない場合、10回に1回は空白で表示されることがありました。

この問題を解決するための考え方を共有したいと思います。

デバッグのステップ

1. 問題を明確にする

まず、問題を把握することが重要です。今回の場合：

• サイトを再読み込むと、世界地図のSVGが正常に表示されない
• 画像読み込み前にDOM要素は空白で表示される
• 10回くらいに1回程度の頻度で発生

2. 問題を分解する

大きな問題を小さな部分に分けて考えましょう。今回の例では、以下のように分解して考えました：

1. 画像の読み込み
2. アニメーションの実行

3. 仮説を立てる

問題の原因について、ブレインストーミングでいくつかの仮説を立てます。

• SVG画像の読み込みの実装方法
• アニメーション開始のタイミングが早すぎる？
• キャッシュの問題？
• 非同期処理？
• ...

4. 一つずつ検証する

SVG画像の読み込み改善

<!-- Before -->
<object id="world-map" type="image/svg+xml" data="/path/to/map.svg"></object>

<!-- After -->
<img id="world-map" src="/path/to/map.svg" @load="onSvgLoaded" />

<object>タグを<img>タグに変更することで、読み込みを解決できるようになりました。

アニメーション開始タイミングの調整

キャッシュされた画像の場合、@loadイベントが発火しない可能性があります。そこで：

onMounted(() => {
  onSvgLoaded();
})

これにより、キャッシュされた画像でもアニメーションが正しく開始されるようになりました。

まとめ

具体的な例の紹介よりも、向上すべきなのは根本的な問題解決能力です。では、デバッグとエラーを解消するための基本的な考え方をいくつか紹介します：

• ロジックのどこかに問題があるか
• 系統的に問題を小さく分割し、一つずつ検証
  • ドキュメントを読む
  • stackoverflowなどの技術コミュニティに記事を検索する
  • genAIに聞く
• 問題が発生している箇所を特定し
  • 開発者ツール
  • console.log
• 条件分岐が正しく設定されているか、変数の値や関数の実行かどうかを確認
• エラーメッセージを徹底的に理解する: エラーメッセージは大切な情報源です

好きな言葉

computer is never wrong :)