2025年版：フロントエンド開発を劇的に変える「脱ライブラリ」標準機能 15選
Web標準（Web APIおよびCSS）の進化により、かつては巨大な外部ライブラリを必要としていた機能が、ブラウザだけで安全かつ高速に動くようになっています。本稿では、実務ですぐに役立つ機能15選を、技術的な背景を交えて解説します。
1. 国際化対応の決定版：Intl.DateTimeFormat
Day.jsやMoment.jsを卒業できる強力な理由
ブラウザに組み込まれた Intl オブジェクトは、実行環境のOS設定や言語設定に基づいた最適なフォーマットを提供します。
- メリット: 外部ライブラリのバンドルサイズ（数十KB〜）を削減でき、かつパフォーマンスが極めて高い。
- 実用例: 「令和」などの和暦、曜日付きの日時、24時間表記の制御などが一行で完結します。
const date = new Date();
const formatter = new Intl.DateTimeFormat('ja-JP', {
dateStyle: 'full', // 「2025年12月28日日曜日」
timeStyle: 'short' // 「21:20」
});
console.log(formatter.format(date));
2. 金額・単位のフォーマット：Intl.NumberFormat
通貨記号や桁区切りの手動実装を廃止
通貨だけでなく、キログラムやパーセント、さらには「約〜万円」のようなコンパクトな表記もサポートしています。
const amount = 1234567;
// 通貨表記：¥1,234,567
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(amount));
// 単位表記：1,234.6 kg
console.log(new Intl.NumberFormat('ja-JP', { style: 'unit', unit: 'kilogram' }).format(1234.567));
3. 通信の中断制御：AbortController
不要なネットワークリクエストによるリソース浪費を防ぐ
ユーザーがページを離れたり、検索フォームで連続入力（インクリメンタルサーチ）をした際、古いリクエストを明示的にキャンセルできます。
- 重要性: サーバー負荷の軽減だけでなく、遅れて届いた古いデータでUIが上書きされる「競合状態（Race Condition）」を防げます。
const controller = new AbortController();
fetch('/api/data', { signal: controller.signal });
// 特定のタイミングで中断
controller.abort();
4. 交差判定の最適化：Intersection Observer API
スクロールイベント監視の「重さ」を解消
要素が画面内（ビューポート）に入ったかどうかを判定します。
-
メリット: 従来の
window.onscrollはメインスレッドを圧迫しますが、こちらはブラウザ側で効率的に管理されるため、パフォーマンスへの影響が極めて少ないです。
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 画像の遅延読み込みや無限スクロールの発火
entry.target.classList.add('visible');
}
});
});
observer.observe(document.querySelector('#target'));
5. 要素単位のリサイズ監視：Resize Observer API
ウィンドウではなく「その箱」の大きさに反応する
サイドバーの開閉などで、特定の div の幅が変わった時にレイアウトを調整したい場合に必須です。
const ro = new ResizeObserver(entries => {
for (let entry of entries) {
console.log('幅:', entry.contentRect.width);
}
});
ro.observe(document.querySelector('.card'));
6. OS標準の共有を呼び出す：Web Share API
SNSボタンの自作を卒業
OS（iOS/Android/Windows等）が提供するネイティブの共有メニューを呼び出します。
- 実用性: ユーザーが普段使い慣れているアプリ（LINE, Slack, X等）へ直接情報を送れるため、コンバージョン率が高まります。
async function shareContent() {
if (navigator.share) {
await navigator.share({ title: 'タイトル', url: 'https://...' });
}
}
7. 高精度な色抽出：EyeDropper API
ブラウザを超えてデスクトップの色も取得可能
カラーピッカーを自作せずとも、OSレベルのスポイトツールを呼び出せます。
const eyeDropper = new EyeDropper();
const { sRGBHex } = await eyeDropper.open();
8. セキュアなクリップボード操作：Clipboard API
モダンな「コピー」の実装
非同期（Promise）ベースで動作し、古い execCommand よりも安全かつ確実にテキストや画像を扱えます。
await navigator.clipboard.writeText('コピーしたい文字');
9. モバイルキーボードの制御：Visual Viewport API
キーボードで入力フォームが隠れる問題を解決
仮想的なビューポートのサイズを監視することで、キーボードが表示された際の位置調整を正確に行えます。
10. タブ間の連携：Broadcast Channel API
状態の同期を数行で実装
「あるタブでログアウトしたら、別のタブもログアウトさせる」といった挙動を、サーバーを介さずに実現します。
const channel = new BroadcastChannel('app_auth');
channel.postMessage('logout'); // 送信
channel.onmessage = (e) => { if (e.data === 'logout') location.reload(); }; // 受信
11. ページ離脱時の確実なデータ送信：navigator.sendBeacon
分析ログの取りこぼしを防ぐ
ページが閉じられる直前に、ブラウザのバックグラウンドで非同期にデータを送信します。読み込みを遅延させません。
12. ユーザーの可視性監視：Page Visibility API
「今見ていないタブ」の負荷を下げる
ユーザーがタブを切り替えた際に、自動的に動画を一時停止したり、APIのポーリングを止めることで、バッテリーや通信量を節約します。
13. 親要素への革新的指定：CSS :has()
「条件付きスタイル」をCSSだけで
「エラーメッセージを含んでいるフォームだけ赤枠にする」といった指定が、JSなしで可能になりました。
/* inputがチェックされているときだけ、親の.cardを強調 */
.card:has(input:checked) {
border: 2px solid blue;
}
14. コンポーネント指向のレスポンシブ：Container Queries
画面サイズではなく「置かれた場所」で見た目を変える
サイドバーにある時とメインコンテンツにある時で、同じカードのレイアウトを自動で切り替えます。
15. 入力に応じたtextareaの自動伸長：field-sizing: content
2024年末〜最新機能
「入力された文字数に合わせて高さが自動で変わるtextarea」を、CSS一行で実現します。
textarea {
field-sizing: content;
min-height: 5lh; /* 5行分は最低確保 */
}
まとめ：これからのフロントエンド開発
外部ライブラリは便利ですが、**「ブラウザがネイティブで提供している機能」**は、実行速度、アクセシビリティ、セキュリティにおいて常に優位にあります。
2025年は、ライブラリを追加する前に、一度Web標準で解決できないかを検討する「Web Native First」な開発を推奨します。