スライダー、モーダル、スムーススクロール、アコーディオン。Web制作をしていると、サイトが変わっても「結局いつも同じ機能を作っているな」と感じる場面がよくあります。毎回ゼロから書くのは正直しんどいですし、車輪の再発明になりがちです。
かつてはこうした定番機能を、jQueryのプラグインやライブラリでサクッと済ませるのが王道でした。ところが2026年のいま、状況は少し複雑になっています。jQuery自体はまだ手堅く保守されているのに、新しい案件では素のJavaScript（Vanilla JS）やフレームワークへの移行が進み、新規採用は確実に減っているのです。「昔みたいに、定番のjQueryプラグインを貼れば終わり」という時代ではなくなりました。
この記事では、2026年の今でも現役で使えるjQuery系・脱jQuery系の定番ライブラリを、スライダー・モーダル・スムーススクロール・アコーディオン・遅延読み込みといった機能別に、実例コードつきで紹介します。古くて配布が終わったライブラリは思い切って外し、公式サイトやGitHubで「今も更新が続いている」と確認できたものだけに絞りました。
長年Web制作をしてきた私自身、ここ数年で「とりあえずjQuery」という長年の手癖を、かなり意識して手放してきました。素のJavaScriptが強くなったぶん、ライブラリに頼らず書ける場面が一気に増えたからです。とはいえ、jQueryを全否定するつもりもありません。既存サイトの改修ではjQueryのほうがラクなことも多いですから。
そこでこの記事では、jQueryとの今どきの正しい距離感と、定番機能をできるだけラクに実装する具体的な手段を、jQuery系・脱jQuery系の両面からお伝えします。読み終えるころには、機能ごとに「どの道具を選べばいいか」が自分で判断できるようになるはずです。
そもそも、2026年にjQueryはまだ使っていいの？
結論から言うと、jQueryは「終わったライブラリ」ではありません。2026年1月には約10年ぶりのメジャーアップデートとなるjQuery 4.0がリリースされ、OpenJS Foundationのもとで今もきちんとメンテナンスが続いています。古いバージョン（1.x・2.x）はとっくにサポート終了していますが、最新の4系は安定して使える現役の選択肢です。
世の中のWebサイトの実に7〜8割が、いまだに何らかの形でjQueryを読み込んでいるという調査もあります。WordPressやShopify、長く運用されている企業サイトが標準で同梱しているからです。私が触る既存案件でも、jQuery前提で組まれているものは本当に多いです。
つまり「既存サイトの保守・改修ならjQueryで進めるのが合理的、新規でゼロから作るなら素のJavaScriptやフレームワークを基本に」というのが、今のリアルな住み分けです。
素のJavaScriptが強くなったのも大きな理由です。querySelector・addEventListener・classList・fetch・IntersectionObserverといった、かつてjQueryで楽をしていた処理が、今やブラウザに標準で備わっています。だからこそ、jQueryを使う・使わないを機能ごとに見極めるのが2026年のコツになります。
たとえば、jQueryで要素をフェードさせる定番のコードは次のようなものでした。
// jQuery の場合
$('.btn').on('click', function() {
$('#box').fadeToggle(300);
});これを素のJavaScriptとCSSで書くと、こうなります。ライブラリなしでも十分に短く書けるのが、今の時代の感覚です。
// Vanilla JS の場合
document.querySelector('.btn').addEventListener('click', () => {
document.querySelector('#box').classList.toggle('is-hidden');
});参考： jQuery公式（ダウンロード） ／ MDN: querySelector
関連記事：jQueryの基本的な使い方｜WordPressでの注意点を初心者向けに解説
スライダー・カルーセル：SwiperとSplideが二強
トップページのメインビジュアルや、おすすめ商品の横スクロール。スライダーは依頼の多い定番機能ですが、自前で作るとスワイプ操作やレスポンシブ対応で泥沼にハマりがちです。ここはライブラリに任せるのが鉄板です。
2026年のスライダーは、jQuery不要の「Swiper」と「Splide」がほぼ二強と言っていい状況です。
Swiper（スワイパー）
Swiperはモバイルのタッチ操作に強い、現在もっとも普及しているスライダーライブラリです。jQueryに依存せず単体で動き、React・Vue・Web Componentsなど主要な環境にひと通り対応しています。最近のバージョンではWeb Componentsを使う書き方が主流になり、よりモダンになりました。
サムネイル連動、ループ、自動再生、ページネーションといった「欲しい機能」がほぼ揃っているので、凝ったスライダーを作りたいときの第一候補です。私も近年の案件ではまずSwiperを検討します。
参考： Swiper公式サイト ／ Swiper（GitHub）
Splide（スプライド）
Splideはより軽量で、外部依存ゼロ・TypeScript製のスライダーです。「Lighthouseでエラーを出さない」「アクセシビリティに配慮」を掲げていて、表示速度やSEOを気にする現場と相性が良いのが特徴です。
基本的なHTMLはとてもシンプルです。リストを所定のクラスで囲み、JavaScriptで1行マウントするだけで動きます。
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">スライド1</li>
<li class="splide__slide">スライド2</li>
</ul>
</div>
</div>
<script>
new Splide('.splide').mount();
</script>多機能で柔軟なSwiper、軽さと素直さのSplide。どちらも甲乙つけがたいので、案件の重さで選ぶと失敗が少ないです。
参考： Splide公式サイト ／ Splide（GitHub）
モーダル・ポップアップ：軽量なMicromodalで十分
「お問い合わせ完了」「画像の拡大表示」など、モーダル（ポップアップ）も需要の高い機能です。ただ、自前で実装するとキーボード操作やフォーカス管理がおろそかになり、アクセシビリティ的に微妙なものになりがちです。
そこでおすすめなのが、わずか2KB前後で動く軽量モーダルライブラリ「Micromodal」です。圧縮後で約1.8KBと極小ながら、アクセシビリティの作法はきちんと押さえています。
具体的には、開閉に合わせてaria属性を自動で切り替え、オーバーレイのクリックやEscキーで閉じ、モーダル内にTabのフォーカスを閉じ込めてくれます。アクセシブルなモーダルを自力で書くのは想像以上に大変なので、これを使うだけで品質がぐっと上がります。
// 表示
MicroModal.show('modal-1');
// 非表示
MicroModal.close('modal-1');なお、シンプルな表示・非表示だけなら、いまはHTML標準の<dialog>要素という選択肢もあります。要件が軽ければまず標準機能を検討し、フォーカス制御まできっちりやりたいときにMicromodalを使う、という順番がおすすめです。
参考： Micromodal公式 ／ Micromodal（GitHub）
関連記事：CSSだけで実装！オンマウスでポップアップ表示する簡単な方法
スムーススクロール：もうライブラリは要らない
ページ内リンクをふわっと滑らかにスクロールさせる演出。昔はjQueryでanimateを書くのが定番でしたが、ここは2026年の今、最も「脱ライブラリ」が進んだ機能です。
スムーススクロールは、CSS1行とJavaScript数行だけで、ライブラリなしで実装できます。CSSのscroll-behavior: smoothはすでに主要ブラウザで95%以上サポートされていて、安心して使えます。
/* これだけでページ内リンクが滑らかになる */
html {
scroll-behavior: smooth;
}
/* 固定ヘッダーの分だけ着地位置をずらす */
:target {
scroll-margin-top: 80px;
}固定ヘッダーでリンク先が隠れてしまう問題も、かつてはjQueryで補正していましたが、今はscroll-margin-topというCSSプロパティで解決できます。これも95%以上のブラウザで使えるので、もうスクリプトを書く必要はほとんどありません。私はこの2行を知ってから、スクロール関連のコードが激減しました。
JavaScriptから細かく制御したい場合も、標準のscrollIntoViewで十分にまかなえます。
document.querySelector('#target').scrollIntoView({
behavior: 'smooth'
});参考： MDN: scroll-behavior ／ MDN: scroll-margin-top
関連記事：【jQuery】固定ヘッダによるページ内リンク位置ずれの解消方法
アコーディオン・タブ：Alpine.jsで宣言的に書く
アコーディオン（折りたたみ）やタブ切り替え、ちょっとした表示の出し分け。こうした「小さなインタラクション」をたくさん抱えるサイトで、私が近年とても重宝しているのがAlpine.jsです。
Alpine.jsは「モダン版のjQuery」とも呼ばれる、わずか7KBほどの軽量フレームワークです。ビルド環境もnpmも不要で、HTMLに属性を書くだけで動く手軽さが魅力です。
たとえばアコーディオンなら、x-dataで状態を持たせ、@clickで切り替え、x-showで表示を制御するだけ。JavaScriptファイルを別に用意しなくても、HTMLの中で完結します。
<div x-data="{ open: false }">
<button @click="open = !open">開閉する</button>
<div x-show="open">
ここに折りたたみの中身が入ります。
</div>
</div>jQueryでイベントを登録して、クラスを付け外しして……という手続き的な書き方に慣れていると、最初は不思議な感覚かもしれません。ですが、状態と見た目をHTMLの中でひとまとめにできるので、小規模なUIなら圧倒的にスッキリします。Reactを持ち出すほどでもない案件の、ちょうど良い受け皿です。
参考： Alpine.js公式サイト ／ Alpine.js（GitHub）
画像の遅延読み込み：まずは標準のloading属性から
ページ表示を速くする定番テクニックが、画面外の画像を後回しで読み込む「遅延読み込み（Lazy Load）」です。表示速度はSEOにも直結するので、外せないポイントです。
うれしいことに、基本的な遅延読み込みはHTMLのloading="lazy"属性だけで実現できます。追加のライブラリは一切不要です。まずはこれを付けるだけで、多くのサイトで十分な効果が得られます。
<img src="photo.jpg" loading="lazy" alt="写真">背景画像の遅延読み込みや、より細かい制御をしたい場合は、verlok氏のvanilla-lazyloadが定番です。素のJavaScriptで書かれていてIntersectionObserverを活用しており、軽量かつ高機能。背景画像や動画にも対応できるのが、標準機能との大きな違いです。
「画像にlazy属性、背景や凝った制御はvanilla-lazyload」と覚えておけば、たいていの遅延読み込みはカバーできます。
参考： MDN: img loading属性 ／ vanilla-lazyload（GitHub）
まとめ：jQueryを否定せず、機能ごとに最適な手を選ぶ
かつてこの記事で紹介していた「何でも入りのjQueryライブラリ」は、配布が終わってしまったものも多く、2026年の今となっては素直におすすめできなくなりました。時代の流れは正直なものです。
だからといって、jQueryそのものが消えたわけではありません。jQueryは今もメンテナンスが続く安定した選択肢で、既存サイトの保守・改修なら無理に剥がす必要はまったくありません。大事なのは、新規か保守か、そして機能ごとに最適な道具を選ぶ姿勢です。
あらためて、定番機能ごとのおすすめを整理しておきます。スライダーはSwiperかSplide、モーダルはMicromodalかHTML標準の<dialog>、スムーススクロールはCSSのscroll-behaviorだけ、アコーディオンやタブはAlpine.js、画像の遅延読み込みはloading="lazy"とvanilla-lazyload。これだけ押さえておけば、たいていの案件は迷わず形にできます。
私自身、長年の「とりあえずjQuery」という反射を手放してみて、コードが軽く読みやすくなったのを実感しています。一方で、jQuery前提の現場ではそのまま素直に使うのが一番ラクだ、とも思っています。大切なのは流行に振り回されず、目の前のサイトに合った道具を選ぶこと。今回紹介したライブラリが、その判断材料になればうれしいです。気になったものから、ぜひ一度さわってみてください！
