こんにちは。かずです。
「これ、本当にJavaScriptが必要かな？」
そんなことを近年コーディング中に考えることが増えました。
少し前までは、動きを付けるならJavaScriptという考えが一般的でした。
アニメーションも、レイアウトの調整も、ちょっとした見た目の変化も、とりあえずJavaScriptを書いていましたよね。
でも最近は、まずCSSだけで実現できないかを考えることが増えました。
今回はそのあたりをまとめたいと思います！
CSSでできることがかなり増えた
昔と比べると、CSSだけでできることが本当に増えました。
「aspect-ratio」や「line-clamp」、「position: sticky」や「scroll-behavior」などなど・・・。
少し前ならJavaScriptで頑張っていたようなことも、今ではCSSだけで十分な場面が多くあります。
CSSがここまで進化すると、「まずCSSで考える」という流れが自然になってきますよね。
JavaScriptを書く理由が明確になった
もちろん、だからといってJavaScriptが不要にはなりません。
メニューの開閉やモーダル表示、タブ切り替え、APIとの連携等々。
こういった「状態を管理する処理」は、やはりJavaScriptが必要です。
でも逆に、見た目を変えるだけであれば、CSSのほうがシンプルに書けることも少なくありません。
最近は、JavaScriptを書く理由が以前より明確になった気がしています。
コードもシンプルになる
JavaScriptを減らすと、コードがシンプルになることも多いです。
例えば、ちょっとしたアニメーションなら、
CSSで「transition」を付けるだけで十分な場面もあります。
レイアウトも、「grid」を使えば、JavaScriptで高さを揃えるような処理を書く機会はほとんどなくなりました。
なにより、あとから見返したときに書いた本人だけでなく、他の人でも理解しやすいと感じています。
保守もしやすい
以前記事にも書いたのですが、公開して終わりではありません。
よければ読んでみてください！
数か月後に修正したり、他のスタッフが触ったりすることもあります。
そんなとき、見た目だけを変えるためのJavaScriptが増えていると、意外と追いかけるのが大変です。
この処理はどのファイルで書かれているのか、どの要素に影響しているのか、などなど。
CSSだけで済むなら、CSSだけで完結しているほうが調査も修正もしやすくなります。
JavaScriptを書かないことも選択肢
JavaScriptを書くこと自体は結構好きなんですよね。動きを作るのは今でも楽しいです。
でも最近は、書けるから書くのではなく、書かなくても実現できるなら、そのほうがいいと思う場面が増えました。
CSSとJavaScript、それぞれ得意なことがあります。
だからこそ、どちらを使うかを考えながら実装するのも、コーディングの面白さの一つだと感じています。
まとめ
昔は、動きを付けるならJavaScriptという考えが強かった気がします。
でも最近は、まずCSSでできるかを考えて、それでも難しい場合にJavaScriptを書くようになりました。
CSSの進化もありますし、コードの保守性を考えても、この順番のほうが自分にはしっくりきています。
小さな考え方の変化ですが、こうした積み重ねが、少しずつコーディングのしやすさにも繋がるかと思っています。
まぁAIが台頭してきているので、今後は「CSSでできることが増えた」なんて言っている場合ではないのかもしれませんが・・・。
それでは！
JOURNALが気に入ったら「いいね」してね！
