はじめに
この記事を書くきっかけは、あるページの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 :)