LEFログ:学習記録ノート

leflog: 学習の記録をどんどんアップしていきます

CSSを決めるとコードがシンプルになる

今個人のプロジェクトとしてChrome拡張機能を作っているのだけど、書いていたJavaScriptのコードを全消しした。

理由としては、全く同じ機能をCSSのみで実装できることに気づいたからである。36行もあったJavaScriptのコードが、3行のCSSに収まった。これはとても気持ちいい。

これと同じことが timer.team の開発でもあって、例えば一時停止中に数字が点滅するアニメーションはCSSで実装している。

クライアントサイドをプログラミングをしていると、ついついJavaScriptでDOM操作して力技で画面を書き換えたくなるけど、これは大変だしバグも生みかねない。CSSに頼れるときはCSSに頼ったほうが安全だし、動作も安定するし、保守性も高いことを改めて感じたレフ蔵であった。

作ってる拡張機能は金曜日辺りに公開できるといいけど、できるかな……

追記(2024-04-26):拡張機能を公開しました!

Chromeの拡張機能「GitHub Prevent Thumbs Down Click」をリリースしました!✨ - LEFログ:学習記録ノート