JSはもういらない？2025年ならHTML/CSSだけで実装できるリッチなUI 10選

「このUI、JSライブラリ入れなきゃ…」そう思っていた時期が私にもありました。
しかし、ブラウザの進化により、かつては数十行のJavaScriptを駆使していた実装が、今やHTMLタグひとつ、CSS数行で完結します。

2025年現在、積極的に使っていきたい「脱JS」な実装を、「昔のやり方」 と比較してまとめました。

1. ポップオーバー（Popover API）

ツールチップや簡易メニューを表示する際、もう座標計算は不要です。

【昔】JSで表示・非表示と位置を管理

// 昔はこう書いていた
const btn = document.querySelector('#btn');
const popover = document.querySelector('#popover');

btn.addEventListener('click', () => {
  popover.classList.toggle('active');
  // さらに外側をクリックした時に閉じる処理や
  // z-indexの管理、座標計算が必要だった...
});

【今】HTML属性だけで完結

<button popovertarget="my-popover">メニューを開く</button>

<div id="my-popover" popover>
  <p>これだけで最前面に表示。外側クリックで自動で閉じます。</p>
</div>

2. モーダルダイアログ（Dialog API）

アクセシブルなモーダルを自作するのは苦行でした。

【昔】divとJSで擬似モーダルを作成

// 昔の苦労
// 1. 背景を固定する
// 2. Escキー押下イベントを監視して閉じる
// 3. フォーカスがモーダルの外に出ないように制御(フォーカストラップ)
window.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && modal.isOpen) {
    closeModal();
  }
});

【今】`<dialog>` タグ

// 開くときだけ1行。Esc対応やフォーカス制御はブラウザ標準。
dialog.showModal();

3. アコーディオン（Details / Summary）

【昔】クリックイベントと高さ計算

// 昔のやり方（jQueryなど）
$('.summary').click(function() {
  $(this).next('.content').slideToggle();
});

【今】タグを置くだけ

<details>
  <summary>詳細を表示する</summary>
  <p>JS不要。検索(Ctrl+F)にもヒットするようになります（hidden=until-found）</p>
</details>

4. スムーズなカルーセル（Scroll Snap）

【昔】重いライブラリを導入

Slick.jsやSwiper.jsを読み込み、複雑なオプションを設定していました。

【今】CSS数行

.container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.item {
  scroll-snap-align: center;
}

5. ダークモード対応（light-dark() 関数）

【昔】JSでクラスを付け替える

const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (isDark) document.body.classList.add('dark-mode');

【今】CSS関数1つ

:root {
  color: light-dark(#333, #ccc);
  background-color: light-dark(#fff, #1a1a1a);
}

6. 入力候補（Datalist）

【昔】自作のサジェスト機能

inputの値を監視し、フィルタリングしたリストを絶対座標で表示させるJSが必要でした。

【今】`<datalist>`

<input list="langs">
<datalist id="langs">
  <option value="JavaScript">
  <option value="TypeScript">
</datalist>

7. 強力なバリデーション

【昔】送信時にJSで全チェック

form.onsubmit = (e) => {
  if (input.value.length < 8) {
    alert('8文字以上で入力してください');
    return false;
  }
};

【今】属性で指定

<input type="text" required minlength="8" pattern="^[a-z]+$">

8. 要素のリサイズ（CSS resize）

【昔】マウスドラッグの距離を計算

mousedown, mousemove, mouseup を組み合わせて自作。

【今】CSS 1行

.box {
  overflow: auto;
  resize: both;
}

9. 画像の遅延読み込み（Lazy Load）

【昔】スクロール位置を監視

Intersection Observerを使うか、外部ライブラリを使用していました。

【今】属性を追加

<img src="image.jpg" loading="lazy">

10. 計算結果の表示（Outputタグ）

【昔】spanのinnerHTMLを書き換える

const total = a + b;
document.getElementById('result').innerText = total;

【今】意味のあるタグで表示

<form oninput="res.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" name="a"> + <input type="number" name="b">
  = <output name="res">0</output>
</form>

まとめ：標準機能は「速くて、安全」

JSライブラリを減らすことは、単にコードが短くなるだけでなく、表示速度の向上とメンテナンスコストの削減に直結します。

2025年、新しい機能を実装する前に「これ、実はHTMLだけでいけるのでは？」と一度立ち止まってみるのが、モダンなエンジニアへの第一歩かもしれません。(自分は学生ですけどね)