【コピペOK】jQueryなしでOK！JavaScript（バニラJS）で実装できる便利な処理まとめ

2025年3月30日2025年3月31日

昨今のWeb制作ではjQueryから徐々に脱却する動きが強まっています。

理由としては、JavaScript（バニラJS）の記述が簡単になったのが大きな理由かと思います。

こういった背景からサイトを軽量化するため、jQueryが必要ない箇所はJavaScriptで置き換える事が多くなりました。

しかしこんな方もいるかもしれません。

jQueryの書き方しか知らんで・・・

しかし大丈夫です。

この記事ではjQueryで実装していた箇所をJavaScriptで簡単に置き換えられるコードをまとめました。

コピペでOKです。

これらを見ながらこれまでjQueryで実装していた箇所をJavaScriptに置き換えてください。

ブックマークでOK！

それでは始めます。

スムーススクロール

スムーススクロールとは、アンカータグをクリックした際、なめらかにそのセクションまで移動させる処理です。

ページ内リンクでよく使われます。

これをjQueryで再現しようすると以下になります。

$('a[href^="#"]').click(function (e) {
  e.preventDefault();
  var target = $($(this).attr('href'));
  if (target.length) {
    $('html, body').animate({ scrollTop: target.offset().top }, 500);
  }
});

そしてJavaScriptがこちらになります。

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    if (target) {
      target.scrollIntoView({
        behavior: 'smooth'
      });
    }
  });
});

あまり大きな違いはないです。

scrollIntoViewメソッドを使って動きを滑らかにするかどうかの設定を行います。

behavior: 'smooth'が動きの滑らかさを指定しています。

基本的にこれらはコピペでOKです。

アコーディオン（開閉メニュー)

アコーディオンとは、クリックなどの操作でコンテンツの表示・非表示を切り替える処理です。

Q&Aやサイドメニューなどでよく見かけるかもしれません。

jQueryで実装する場合以下になります。

$('.accordion-btn').on('click', function () {
  $(this).next('.accordion-content').slideToggle();
});

JavaScriptで実装する場合以下になります。

document.querySelectorAll('.accordion-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const content = btn.nextElementSibling;
    content.classList.toggle('is-open');
  });
});

少し記述量がjQueryと比較して多いですが、そこまで難しくないです。

クリックする要素の兄弟要素をnextElementSiblingを使って取得。
取得した兄弟要素にtoggleメソッドを使ってクラスのON/OFFの切り分け

だけです。

ただ、これだけでは実装されないのでCSSも必要です。

基本的なスタイルは必要ですが、デザイン部分は自由でOKです

.accordion-content {
//heightではなくmax-height推奨
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-content.is-open {
  max-height: 300px; 
}

こちらでは上下に開閉するQ&Aなどのアコーディオンを想定しています。

max-heightを指定することで、高さの上限を決めます。

max-height を使えば、文字数に応じて高さが調整されるため、無駄な余白を作らずに済みます。

タブ切り替え

タブ切り替えとは、ボタンをクリックすると対応するコンテンツを表示・非表示に切り替える処理です。

「料金プランの切り替え」や「カテゴリごとの表示切替」などで見かけるかもしれません。

HTMLは以下のものを想定しています。

<div class="tabs">
  <div class="tab active">タブ1</div>
  <div class="tab">タブ2</div>
  <div class="tab">タブ3</div>
</div>

<div class="tab-contents">
  <div class="tab-content active">タブ1の内容</div>
  <div class="tab-content">タブ2の内容</div>
  <div class="tab-content">タブ3の内容</div>
</div>

こちらをjQueryで実装すると以下になります。

$('.tab').on('click', function () {
  var index = $(this).index();
  $('.tab').removeClass('active');
  $('.tab').eq(index).addClass('active');
  $('.tab-content').removeClass('active');
  $('.tab-content').eq(index).addClass('active');
});

こちらをJavaScriptで表示すると以下になります。

const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.tab-content');

tabs.forEach((tab, i) => {
  tab.addEventListener('click', () => {
    tabs.forEach(t => t.classList.remove('active'));
    contents.forEach(c => c.classList.remove('active'));
    tab.classList.add('active');
    contents[i].classList.add('active');
  });
});

こちらでは以下の手順が取られています。

tabをquerySelectorAllで全て取得
取得したtabをforEachで分解
clickしたらまず全てのactiveクラスを削除
その後クリックしたタブとタブの中身にactiveクラスを追加

少し難しいかもしれませんが、シンプルです。

最後にCSSです。

こちらはだいたい以下のパターンが多いのでコピペでOKかもしれません。

.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

モーダル表示・非表示

モーダルとは、画面上にポップアップのようなものを表示する機能です。

特定のボタンを押したらり、特定の箇所までスクロールしたら画面全体に何らかの画面が表示された事があるかと思います。

Micromodal.jsを使用することもありますが、今回はjQueryとJavaScriptで比較します。

まずはjQueryからです。

$('#openModal').on('click', function () {
  $('#modal').fadeIn();
});

$('#closeModal').on('click', function () {
  $('#modal').fadeOut();
});

次にJavaScriptです。

const openBtn = document.getElementById('openModal');
const closeBtn = document.getElementById('closeModal');
const modal = document.getElementById('modal');

openBtn.addEventListener('click', () => {
  modal.classList.add('is-active');
});

closeBtn.addEventListener('click', () => {
  modal.classList.remove('is-active');
});

こちらはあまりjQueryと変わらないです。

そこまで難しくないのでコピペでOKです。

次にCSSも必要になってきます。

基本的には、以下の様に作る事が多いです。

#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
}

#modal.is-active {
  display: flex;
}

デザインの箇所はお好みでOKです。

スクロールアニメのトリガー

スクロールアニメのトリガーはスクロールしたら要素がふわっ。。と出てくる機能です。

こちらの記事でも詳しく解説してるので良ければご参照ください。

こちらでは簡易的に解説します。

まずjQueryで実装する時は以下になります。

$(window).on('scroll', function () {
  $('.animate-trigger').each(function () {
    var position = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();

    if (scroll + windowHeight > position + 100) {
      $(this).addClass('is-show');
    }
  });
});

JavaScriptで実装する際は以下になります。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-show');
    }
  });
});

document.querySelectorAll('.animate-trigger').forEach(el => {
  observer.observe(el);
});

基本的にはIntersectionObserverというAPIを活用する事が多いです。

こちらが基本的な形になるのでコピペでOKです。

CSSは自分の好みのアレンジで大丈夫ですが、一例を挙げるなら以下の様なコードになります。

.animate-trigger {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-trigger.is-show {
  opacity: 1;
  transform: translateY(0);
}

コピー機能

コピー機能は、クリックひとつでテキストをクリップボードにコピーする機能です。

新規案件でjQueryを使ってコピー機能を行う事はほとんどないので、JavaScriptで解説します。

const copyBtn = document.getElementById('copyBtn');
const copyText = document.getElementById('copyTarget');

copyBtn.addEventListener('click', () => {
  navigator.clipboard.writeText(copyText.textContent)
    .then(() => {
      alert('コピーしました！');
    })
    .catch(err => {
      alert('コピーに失敗しました');
      console.error(err);
    });
});

基本的にコピペでOKです。

簡単に解説すると、