jQuery使いだった人がJavaScriptに移行する際のあるある対比集

1. DOM要素の取得

// jQuery
const $element = $('#myElement');
const $elements = $('.myClass');

// モダンJavaScript
const element = document.getElementById('myElement');
const elements = document.getElementsByClassName('myClass');
// または
const modernElements = document.querySelectorAll('.myClass');

2. イベントリスナーの追加

// jQuery
$('#button').click(function() {
  console.log('クリックされました');
});

// モダンJavaScript
document.getElementById('button').addEventListener('click', () => {
  console.log('クリックされました');
});

3. クラスの追加・削除

// jQuery
$element.addClass('active');
$element.removeClass('active');
$element.toggleClass('active');

// モダンJavaScript
element.classList.add('active');
element.classList.remove('active');
element.classList.toggle('active');

4. スタイルの変更

// jQuery
$element.css('backgroundColor', 'red');
$element.hide();
$element.show();

// モダンJavaScript
element.style.backgroundColor = 'red';
element.style.display = 'none';
element.style.display = 'block';

5. 要素の作成と追加

// jQuery
const $newDiv = $('<div>新しい要素</div>');
$('#container').append($newDiv);

// モダンJavaScript
const newDiv = document.createElement('div');
newDiv.textContent = '新しい要素';
document.getElementById('container').appendChild(newDiv);

//もしくは
insertAdjacentHTML('beforeend', '<div>新しい要素</div>')
//挿入位置の指定
beforebegin //要素の直前
afterbegin //要素の内側の最初
beforeend //要素の内側の最後
afterend //要素の直後

6. AJAXリクエスト

// jQuery
$.ajax({
  url: '/api/data',
  method: 'GET',
  success: function(response) {
    console.log(response);
  },
  error: function(error) {
    console.error(error);
  }
});

// モダンJavaScript
fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

// または async/awaitを使用
async function getData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

7. アニメーション

// jQuery
$element.fadeIn();
$element.animate({ opacity: 0.5 }, 1000);

// モダンJavaScript
// CSSアニメーション
element.style.transition = 'opacity 1s';
element.style.opacity = '1';

// または Web Animations API
element.animate([
  { opacity: 0 },
  { opacity: 1 }
], {
  duration: 1000,
  fill: 'forwards'
});

8. 複数要素への処理

// jQuery
$('.items').each(function() {
  $(this).text('更新');
});

// モダンJavaScript
document.querySelectorAll('.items').forEach(item => {
  item.textContent = '更新';
});

9. フォーム値の取得

// jQuery
const value = $('#myInput').val();

// モダンJavaScript
const value = document.getElementById('myInput').value;

10. データの保存

// jQuery
$element.data('key', 'value');
const data = $element.data('key');

// モダンJavaScript
element.dataset.key = 'value';
const data = element.dataset.key;
// または
element.setAttribute('data-key', 'value');
const data2 = element.getAttribute('data-key');