はじめに

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

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

デバッグのステップ

1. 問題を明確にする

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

サイトを再読み込むと、世界地図のSVGが正常に表示されない
画像読み込み前にDOM要素は空白で表示される
10回くらいに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 :)