Yokoyama Nana Web開発では、HTMLやCSSなどのWeb標準を活用し、必要な部分だけJavaScriptを使うことが望ましいとされています。
もちろん、JavaScriptは現在のWeb開発に欠かせない技術ですが、重要なのは必要以上にJavaScriptへ依存しないことです。
近年はWeb標準の進化によって、そのような設計を実現しやすくなっています。
この記事では、実際にJavaScriptを減らす具体的な実装例、メリット、注意点について解説します。
目次
JavaScriptを減らすWeb開発とは？
「JavaScriptを減らす」とは、JavaScriptを一切使わないという意味ではありません。
HTMLやCSS、Web APIなど、ブラウザが標準で備えている機能で実現できる部分にはWeb標準を使い、JavaScriptが必要な機能にだけJavaScriptを使うという考え方です。
これまでは、モーダルダイアログやツールチップ、カルーセルなどを実装するために、JavaScriptや外部ライブラリを利用することが一般的でした。
しかし近年は、Web標準の進化によって、以前はJavaScriptが必要だった機能の一部をHTMLやCSSを中心に実装できるようになっています。
JavaScriptを減らす開発が必要な理由
JavaScriptを減らすという考え方は、一時的な流行ではありません。
その背景には、Web標準の進化に加え、Webパフォーマンスや保守性への意識の高まりがあります。
JavaScriptの量や処理内容が増えるほど、ページの表示や操作への反応に影響する可能性があり、性能や通信環境が限られるスマートフォンでは、その影響が大きくなる場合があります。
GoogleのWebパフォーマンスガイドでも、JavaScriptを必要になるまで遅延して読み込むことや、コード分割によって初期表示時の読み込み量を減らすことが推奨されています。
HTMLやCSSなどのWeb標準で実現できる部分を積極的に活用することで、コード量を抑え、表示速度や保守性の向上につながる可能性があるのです。
参考
【2025〜2026年】新しいWeb標準
ここからは、2025〜2026年にブラウザ対応が進んだ機能や、今後のWeb制作で活用が広がると考えられる新しいWeb標準を紹介します。
以前は多くのJavaScriptや外部ライブラリが必要だったUIも、HTML属性やCSS、新しいWeb APIを活用することで、より少ないコードで実装できるようになっています。
完全にJavaScriptが不要になるとは限りませんが、ブラウザが標準で持つ機能を活用することで、実装の簡略化やパフォーマンスの改善、保守性の向上が期待できます。
ただし、今回紹介する機能の中には比較的新しいものも含まれるため、利用する際は対応ブラウザやバージョンを事前に確認することが重要です。
実際の開発では、必要に応じてフォールバックを用意したり、対応状況を確認したうえで導入を検討しましょう。
HTMLだけでモーダルダイアログを開閉する（commandfor・command属性）
現在は、<button>要素のcommandfor属性とcommand属性を使うことで、JavaScriptを書かずに<dialog>要素を開閉できます。
従来はクリックイベントを登録し、showModal()やclose()を実行する必要がありましたが、基本的な開閉操作をHTMLだけで宣言できるようになりました。
モーダルの背景は::backdrop疑似要素を使ってCSSで調整できます。
ポップオーバーをボタンの近くに表示する（Popover API・CSS Anchor Positioning）
Popover APIを使うと、簡易メニューや補足情報をJavaScriptなしで開閉できます。
さらにCSSアンカー位置指定を組み合わせることで、ポップオーバーを開閉ボタンの上側や下側など、基準となる要素に合わせて配置できます。
画面端に近い場合の表示位置を切り替える仕組みもCSSで指定できるため、ドロップダウンメニューやツールチップの実装を簡略化できます。
入力内容に合わせてフォームの大きさを変更する（field-sizing）
field-sizing: contentを使うと、入力された内容に合わせて<input>や<textarea>の大きさを自動で調整できます。
特にテキストエリアでは、入力内容が増えるたびにJavaScriptで高さを計算する実装がよく使われていました。
現在は最小サイズと最大サイズをCSSで指定し、その範囲内で入力欄を自動的に広げることができます。
スクロール状態に応じてスタイルを変更する（Scroll-state Container Queries）
スクロール状態コンテナークエリを使うと、要素がposition: stickyによって固定されたか、スクロールスナップ位置に到達したかといった状態をCSSから判定できます。
これまではスクロールイベントやIntersectionObserverを利用してクラスを付け替えることが多かった処理です。
固定されたヘッダーに影を付ける、現在表示中のスライドを強調する、といった表現をCSSだけで実装できるようになります。
MDN：Scroll-state Container Queries
CSSだけでカルーセルの操作ボタンを表示する（::scroll-button()・::scroll-marker）
2025年にChrome系ブラウザへ導入されたCSSカルーセル機能では、スクロール領域に前後の操作ボタンやページネーションを生成できます。
::scroll-button()で前後ボタン、::scroll-markerで現在位置を示すマーカーを追加できます。
これまでSwiperやSlickなどのライブラリで実装していたシンプルなカルーセルを、CSSを中心に構築できる可能性が広がっています。
ただし、ブラウザによって対応状況に差があるため、未対応環境では通常の横スクロールとして操作できる設計にしておくことが重要です。
HTMLの選択フォームを柔軟にデザインする（Customizable Select）
カスタマイズ可能な<select>では、選択肢の中にアイコン、画像、補足テキストなどを含められるようになります。
これまではデザイン性の高い選択メニューを作るために、標準の<select>を使わず、JavaScriptで独自のドロップダウンを構築するケースがありました。
新しい仕組みでは、フォームとしての基本的な意味や操作性を維持しながら、CSSで見た目を柔軟に変更できます。
非常に新しい機能であるため、現時点では対応ブラウザを確認しながら段階的に導入する必要があります。
MDN：Customizable select elements
ページ切り替えを滑らかに見せる（View Transition API）
View Transition APIを使うと、ページ内の表示切り替えやページ遷移に、滑らかなアニメーションを付けられます。
以前は要素の位置や大きさをJavaScriptで取得し、遷移前後の状態を細かく制御する必要がありました。
現在はHTMLやCSSを中心に、画像やカードが次の画面へ移動するような視覚効果を実装できます。
アニメーションを利用する場合は、prefers-reduced-motionを使い、動きを抑えたいユーザーへの配慮も必要です。
JavaScriptを減らすメリット
表示速度やユーザー体験の改善が期待できる
JavaScriptの読み込み量や実行処理が減ることで、ページの表示や操作への反応が速くなる可能性があります。
また、不要なJavaScriptを減らすことは、ユーザー操作への応答性を評価するCore Web Vitalsの指標であるINP（Interaction to Next Paint）の改善につながる可能性もあります。
保守コストを抑えやすい
ブラウザの標準機能で置き換えられる部分を整理すると、独自に管理するJavaScriptや外部ライブラリを減らせます。
コード量が少なくなることで、修正や機能追加の影響範囲を把握しやすくなり、保守性の向上も期待できます。
外部ライブラリへの依存を減らせる
ライブラリの読み込み容量を抑えられるだけでなく、アップデートや脆弱性対応、メンテナンスの負担も軽減できます。
また、ライブラリ固有の仕様に依存しにくくなるため、将来的な技術選定の自由度も高まります。
JavaScriptを減らすときの注意点
JavaScriptを減らせば必ず高速になるわけではない
画像、Webフォント、CSS、サーバー応答時間などもページ速度に影響します。
Googleが提供する「PageSpeed Insights」で、JavaScript以外も含めたボトルネックを確認しましょう。
参考
新しいWeb標準はブラウザ対応を確認する
対象ブラウザやユーザー環境を確認し、必要に応じてフォールバックを用意してください。
GoogleなどはWeb機能のブラウザ対応状況を確認できる「Baseline」を公開しています。
Baselineを参考にすることで、その機能が主要ブラウザで利用できるのか、対応状況を確認しながら採用を判断できます。
さらに、「Can I use」では、ブラウザごとの対応状況をより詳しく調べることができます。
参考
アクセシビリティを損なわない
キーボード操作やフォーカス管理が必要なUIでは、JavaScriptを使って適切に実装する必要があります。
Chrome DevToolsの「Lighthouse」や、GoogleのAccessibility診断を利用すると、アクセシビリティ上の問題を確認できます。
参考
生成AIを活用する場合も最新のWeb標準をキャッチアップしよう
生成AIはWeb制作やプログラミングを効率化できる便利なツールです。
一方で、提案されるコードは、従来の実装方法や広く使われてきたパターンをもとにしている場合があります。
そのため、<dialog>やPopover API、Scroll-driven Animationsなどの比較的新しいWeb標準が利用できる場面でも、JavaScriptや外部ライブラリを使った実装が提案されることがあります。
AIが提案したコードをそのまま採用するのではなく、「現在はHTMLやCSSだけで実現できないか」「ブラウザ標準の機能を利用できないか」という視点で確認することが大切です。
Web標準は継続的に進化しているため、BaselineやCan I useなどを活用しながら最新情報をキャッチアップすることで、よりシンプルで保守しやすい実装につながります。
まとめ
Web標準の進化により、これまでJavaScriptや外部ライブラリで実装していた機能の一部を、HTMLやCSS、Web APIだけで実現できるようになりました。
Web標準は今後も進化していきます。最新の仕様をキャッチアップすることで、よりシンプルで保守しやすいWebサイトやWebアプリを実装できるでしょう。
Web標準を活用した開発をご検討の方へ
- 古いJavaScriptやライブラリを見直したい…
- 表示速度や保守性を改善したい…
- 最新のWeb標準を取り入れたWebサイトを構築したい…
このようなお悩みがありましたら、お気軽にご相談ください。
当社では、Webサイト・Webシステムの開発だけでなく、HTML・CSS・Web APIなどの最新Web標準を活用したフロントエンド設計、表示速度改善、既存コードのリファクタリング、保守性を考慮した改修までサポートしています。
