コーダーが知っておきたい「JavaScriptに頼らないUI設計」

こんにちは、masaです。
コンビニへアイスを買いに行っただけなのに、気づけば飲み物やお菓子までカゴに入っていた——そんな経験はありませんか？
必要なものだけを買うつもりだったのに、気づけば予定になかったものまで増えている。
実は、フロントエンド開発におけるJavaScriptも少し似ています。
「この機能も追加したい」「ついでにこちらも対応しておこう」と実装を進めるうちに、いつの間にかJavaScriptが増え、コードが複雑になってしまうことがあります。

もちろん、JavaScriptはWebサイトやECサイトの構築に欠かせない技術です。
しかし、UIによってはHTMLやCSSだけで実現できるケースも少なくありません。
必要な場所にだけJavaScriptを使うことで、コードはシンプルになり、保守性やパフォーマンスの向上にもつながります。
今回は、コーダーが知っておきたい「JavaScriptに頼らないUI設計」の考え方について紹介します。

JavaScriptが増えることで起こる課題

JavaScriptは便利な反面、実装量が増えるほど管理コストも増加します。
例えば以下のようなケースです。

・表示崩れの原因調査が難しくなる
・他機能への影響範囲が広がる
・CMSやカートシステムのアップデートで動作しなくなる
・ページ表示速度に影響する
・引き継ぎ時の理解コストが高くなる

特に複数人で運用する案件では、JavaScriptの複雑化が後々の負担になることもあります。
そのため、「まずはHTMLとCSSだけで実現できないか考える」という視点を持つことが重要です。

UIを設計する際の基本的な考え方

JavaScriptを使う前に、次の順番で考えることをおすすめします。

1. HTMLだけで成立するか
2. CSSを組み合わせれば実現できるか
3. JavaScriptが本当に必要か

この順番で検討すると、必要以上にJavaScriptを書かずに済むケースが増えます。

アコーディオンは本当にJavaScriptが必要？

よくある実装として、FAQのアコーディオンがあります。
以前はJavaScriptで開閉処理を実装することが一般的でしたが、現在ではHTML標準のdetails要素を利用できます。

<details>
  <summary>配送には何日かかりますか？</summary>
  <p>通常2〜5営業日でお届けします。</p>
</details>

ブラウザ標準機能のため、JavaScriptを書かなくても開閉動作が実現できます。
さらにCSSを追加すればデザインの調整も可能です。

ホバーアニメーションやフェードインはCSSで対応する

アニメーションもJavaScriptを使いがちなポイントです。
しかし、以下のような表現であればCSSだけで十分対応できます。

・ボタンのホバー演出
・フェードイン
・スライド表示
・画像の拡大縮小
・メニューの開閉アニメーション

例えばボタンのホバー演出であれば、

.button {
  transition: opacity 0.3s ease;
}

.button:hover {
  opacity: 0.7;
}

この程度であればJavaScriptは不要です。
まずはCSSで実現できないか検討してみましょう。

表示・非表示の切り替えをJavaScriptで行わない

実務では、

・ハンバーガーメニュー
・タブ切り替え
・フィルターUI
・モーダル表示

などでJavaScriptを使用することがあります。
もちろん必要なケースもありますが、単純な切り替えだけであればHTMLとCSSで対応できる場合があります。
重要なのは、「見た目を切り替えたいだけなのか」、「データの処理が必要なのか」を切り分けることです。
見た目だけであれば、JavaScriptが不要なケースも多くあります。

データ処理とUI制御を分けて考える

JavaScriptが必要になるのは、主に以下のような場面です。

・API通信
・カート処理
・検索機能
・フォームバリデーション
・非同期更新

つまり、「データを扱う処理」はJavaScriptが得意な領域です。

一方で、

・開閉
・表示切り替え
・アニメーション

などのUI表現はHTMLとCSSで完結できることがあります。
この役割分担を意識するだけでも、コードはシンプルになります。

システム依存を減らせる

CMSやカートシステムを利用したサイトでは、システム側のアップデートによってHTML構造が変わることがあります。
JavaScriptで細かくDOM操作をしている場合、ちょっとした変更でも動作しなくなる可能性があります。
一方で、HTMLとCSS中心の設計であれば影響を受けにくくなります。

結果として、

・改修しやすい
・保守しやすい
・不具合が起きにくい

というメリットにつながります。

JavaScriptを使わないことが目的ではない

誤解してはいけないのは、「JavaScriptを使わないことが正解ではない」ということです。
大切なのは、「JavaScriptが必要な場所だけに使う」という考え方です。
便利だから使うのではなく、本当に必要だから使う。
その判断ができるようになると、保守性の高いフロントエンドを構築しやすくなります。

まとめ

いかがだったでしょうか。
JavaScriptは非常に便利な技術ですが、すべてをJavaScriptで解決する必要はありません。

UI設計を行う際は、

・HTMLで実現できないか
・CSSで補えないか
・JavaScriptが本当に必要か

という順番で考えることが重要です。

JavaScriptに頼りすぎない設計を意識することで、コードはシンプルになり、保守性や安定性の向上にもつながります。
新しい機能を実装する際は、まず「JavaScriptなしで実現できる方法はないか」を考えてみてはいかがでしょうか。