【2024年版】jQuery→JavaScript変換チートシート！

Web制作学習中の皆さん、こんにちは！

Web制作を学んでいて、JavaScriptは必ず出てきますよね！かつてはjQueryがよく使われていましたが、最近は生のJavaScript（Vanilla JSとも呼びます）でも簡単に機能を作れるようになりました。

ReactやVueなどのモダンなフレームワークを使う上ではVanilla JSを使いますから、今のうちに学んでおくのが圧倒的におすすめです！

そこでjQueryからJavaScriptにスムーズに移行できるよう、頻出の構文を書き換えるチートシートを作りました！ぜひこの記事をブックマーク、参考になったらSNSでシェアもしてくださいね！

【20万字以上の大ボリューム！！】案件単価を爆上げするJavaScriptの学習ロードマップ+タブメニュー、アコーディオンメニューなどの必須パーツを学べる本の購入はこちらから！

【改訂版】【完全案件特化】JavaScriptをどこまで学ぶべきかの学習ロードマップ＋頻出UIの作り方8選 - セカヤサBooks

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉　200円セール中！　7/23まで！　 🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉【2024年へ向けた最新版！】・HTML/CSSの次は何を勉強

2024/12/12 追記

jQueryをJavaScriptに正しく変換するツールは残念ながら存在していないようです。この記事を参考にしてもらうか、動作を確かめながらChatGPTなどのAIツールを利用するのがおすすめです！

「次のjQueryコードをVanilla JSに完全に変換してください」などのプロンプトで試してみてください！

ベースのHTML
チートシート
実践方法を学ぶにはJavaScript学習ロードマップ本がおすすめ！
より詳しい書き換えリストを知りたい方はこちら

ベースのHTML

チートシートでは次のHTMLのクラスやidを使います。

<!-- サンプルHTML -->
<div id="myElement" class="myClass">
  <p>Hello, World!</p>
</div>
<button id="myButton">Click me</button>
<input id="myInput" type="text" value="Initial value">
<ul id="myList"></ul>

チートシート

// セレクタ
// jQuery: ID選択
$('#myElement')
// JavaScript:
document.getElementById('myElement');

// jQuery: クラス選択
$('.myClass')
// JavaScript:
document.getElementsByClassName('myClass'); // または
document.querySelectorAll('.myClass');

// jQuery: タグ選択
$('p')
// JavaScript:
document.getElementsByTagName('p'); // または
document.querySelectorAll('p');

// イベント
// jQuery: クリックイベント
$('#myButton').on('click', function(event) {
  console.log('Button clicked!');
});
// JavaScript:
document.getElementById('myButton').addEventListener('click', function(event) {
  console.log('Button clicked!');
});

// jQuery: DOM読み込み完了イベント
$(document).ready(function() {
  console.log('DOM is ready!');
});
// JavaScript:
document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM is ready!');
});

// DOM操作
// jQuery: HTML内容の設定
$('#myElement').html('<span>新しい内容</span>');
// JavaScript:
document.getElementById('myElement').innerHTML = '<span>新しい内容</span>';

// jQuery: テキスト内容の設定
$('#myElement').text('新しいテキスト');
// JavaScript:
document.getElementById('myElement').textContent = '新しいテキスト';

// jQuery: 入力値の設定
$('#myInput').val('新しい値');
// JavaScript:
document.getElementById('myInput').value = '新しい値';

// jQuery: 属性の設定
$('#myElement').attr('data-custom', 'カスタム値');
// JavaScript:
document.getElementById('myElement').setAttribute('data-custom', 'カスタム値');

// jQuery: クラスの追加
$('#myElement').addClass('newClass');
// JavaScript:
document.getElementById('myElement').classList.add('newClass');

// jQuery: クラスの削除
$('#myElement').removeClass('myClass');
// JavaScript:
document.getElementById('myElement').classList.remove('myClass');

// jQuery: クラスのトグル
$('#myElement').toggleClass('toggleClass');
// JavaScript:
document.getElementById('myElement').classList.toggle('toggleClass');

// 要素の作成と挿入
// jQuery: 新しい要素の作成
var newElement = $('<li>新しいアイテム</li>');
// JavaScript:
var newElement = document.createElement('li');
newElement.textContent = '新しいアイテム';

// jQuery: 要素の追加（末尾）
$('#myList').append(newElement);
// JavaScript:
document.getElementById('myList').appendChild(newElement);

// jQuery: 要素の追加（先頭）
$('#myList').prepend(newElement);
// JavaScript:
document.getElementById('myList').insertBefore(newElement, document.getElementById('myList').firstChild);

// Ajax
// jQuery: GET リクエスト
$.ajax({
  url: 'https://jsonplaceholder.typicode.com/todos/1',
  method: 'GET',
  success: function(response) {
    console.log('データを受信:', response);
  },
  error: function(xhr, status, error) {
    console.error('エラーが発生:', error);
  }
});
// JavaScript:
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(function(response) {
    if (!response.ok) {
      throw new Error('ネットワークレスポンスが正常ではありません');
    }
    return response.json();
  })
  .then(function(data) {
    console.log('データを受信:', data);
  })
  .catch(function(error) {
    console.error('エラーが発生:', error);
  });

// jQuery: POST リクエスト
$.post('https://jsonplaceholder.typicode.com/posts', 
  { 
    title: '新しい投稿', 
    body: '投稿の本文', 
    userId: 1 
  }, 
  function(response) {
    console.log('データを送信し、レスポンスを受信:', response);
  }
);
// JavaScript:
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    title: '新しい投稿',
    body: '投稿の本文',
    userId: 1
  })
})
  .then(function(response) {
    if (!response.ok) {
      throw new Error('ネットワークレスポンスが正常ではありません');
    }
    return response.json();
  })
  .then(function(data) {
    console.log('データを送信し、レスポンスを受信:', data);
  })
  .catch(function(error) {
    console.error('エラーが発生:', error);
  });

// エフェクト
// jQuery: 要素を隠す
$('#myElement').hide();
// JavaScript:
document.getElementById('myElement').style.display = 'none';

// jQuery: 要素を表示
$('#myElement').show();
// JavaScript:
document.getElementById('myElement').style.display = '';

// jQuery: フェードイン
$('#myElement').fadeIn();
// JavaScript: (CSS transitionsを使用)
var element = document.getElementById('myElement');
element.style.transition = 'opacity 0.5s';
element.style.opacity = '1';

// jQuery: フェードアウト
$('#myElement').fadeOut();
// JavaScript: (CSS transitionsを使用)
var element = document.getElementById('myElement');
element.style.transition = 'opacity 0.5s';
element.style.opacity = '0';