こんにちは、Ryuseiです！
今日は正直「もうダメだ…」ってなるくらい謎のバグに悩まされていました。でも最終的にはハンバーガーメニューがなぜか復活！その経緯を忘れないように、今回も備忘録を残しておきます。
グローバルCSSが原因だった…？
ある時点から、なぜか表示されていたはずのハンバーガーメニューが表示されなくなってしまいました。操作した記憶としては、まだ実装途中だった pop クラスのスタイルが邪魔になっていたので、一旦削除してみたところ……なんと！ハンバーガーメニューが復活していました。
「え、なんで？」の連続。pop はずっと前から書いてたのに急に問題を起こすようになったのが本当に謎です。
背景が二重になる謎バグ
さらに不可解だったのが、別の要素で背景が二重に表示される問題。
修正したつもりのコードで変な表示になっていたので「何が起きてるんだ…？」と悩んでいたのですが、犯人は明らかにこいつでした！
CSSを適用しているクラス名が思い込みと違っていたり、うっかり不要なプロパティが残っていたのが原因でした。
命名規則、大事すぎる
最近、Reactを使い始めたことでコンテナ単位で自動的にクラス名がつくことも増え、AIにも頼りっきりになっていたのですが、それが裏目に出てしまいました…。
やっぱり「自分でしっかり命名しておくこと」が大切。どの要素がどの役割を持っているのか、あとから見てすぐ分かるようにしておかないと、今回のようなトラブルの時に解決の糸口がつかめなくなります。
おわりに
今日はトラブル続きで精神的にきつかったけど、結果的に「命名規則の重要性」「CSSの影響範囲を意識すること」など、大事なことを再確認できた日でもありました。
次はまた pop を活かして、ふわっとしたアニメーションのあるサイトに仕上げていきたいと思います！