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だけでいけるのでは？」と一度立ち止まってみるのが、モダンなエンジニアへの第一歩かもしれません。(自分は学生ですけどね)