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

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

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

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

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

2024/12/12 追記

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

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

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

zenn.dev

ベースのHTML

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

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

チートシート

1// セレクタ
2// jQuery: ID選択
3$('#myElement')
4// JavaScript:
5document.getElementById('myElement');
6
7// jQuery: クラス選択
8$('.myClass')
9// JavaScript:
10document.getElementsByClassName('myClass'); // または
11document.querySelectorAll('.myClass');
12
13// jQuery: タグ選択
14$('p')
15// JavaScript:
16document.getElementsByTagName('p'); // または
17document.querySelectorAll('p');
18
19// イベント
20// jQuery: クリックイベント
21$('#myButton').on('click', function(event) {
22  console.log('Button clicked!');
23});
24// JavaScript:
25document.getElementById('myButton').addEventListener('click', function(event) {
26  console.log('Button clicked!');
27});
28
29// jQuery: DOM読み込み完了イベント
30$(document).ready(function() {
31  console.log('DOM is ready!');
32});
33// JavaScript:
34document.addEventListener('DOMContentLoaded', function() {
35  console.log('DOM is ready!');
36});
37
38// DOM操作
39// jQuery: HTML内容の設定
40$('#myElement').html('<span>新しい内容</span>');
41// JavaScript:
42document.getElementById('myElement').innerHTML = '<span>新しい内容</span>';
43
44// jQuery: テキスト内容の設定
45$('#myElement').text('新しいテキスト');
46// JavaScript:
47document.getElementById('myElement').textContent = '新しいテキスト';
48
49// jQuery: 入力値の設定
50$('#myInput').val('新しい値');
51// JavaScript:
52document.getElementById('myInput').value = '新しい値';
53
54// jQuery: 属性の設定
55$('#myElement').attr('data-custom', 'カスタム値');
56// JavaScript:
57document.getElementById('myElement').setAttribute('data-custom', 'カスタム値');
58
59// jQuery: クラスの追加
60$('#myElement').addClass('newClass');
61// JavaScript:
62document.getElementById('myElement').classList.add('newClass');
63
64// jQuery: クラスの削除
65$('#myElement').removeClass('myClass');
66// JavaScript:
67document.getElementById('myElement').classList.remove('myClass');
68
69// jQuery: クラスのトグル
70$('#myElement').toggleClass('toggleClass');
71// JavaScript:
72document.getElementById('myElement').classList.toggle('toggleClass');
73
74// 要素の作成と挿入
75// jQuery: 新しい要素の作成
76var newElement = $('<li>新しいアイテム</li>');
77// JavaScript:
78var newElement = document.createElement('li');
79newElement.textContent = '新しいアイテム';
80
81// jQuery: 要素の追加（末尾）
82$('#myList').append(newElement);
83// JavaScript:
84document.getElementById('myList').appendChild(newElement);
85
86// jQuery: 要素の追加（先頭）
87$('#myList').prepend(newElement);
88// JavaScript:
89document.getElementById('myList').insertBefore(newElement, document.getElementById('myList').firstChild);
90
91// Ajax
92// jQuery: GET リクエスト
93$.ajax({
94  url: 'https://jsonplaceholder.typicode.com/todos/1',
95  method: 'GET',
96  success: function(response) {
97    console.log('データを受信:', response);
98  },
99  error: function(xhr, status, error) {
100    console.error('エラーが発生:', error);
101  }
102});
103// JavaScript:
104fetch('https://jsonplaceholder.typicode.com/todos/1')
105  .then(function(response) {
106    if (!response.ok) {
107      throw new Error('ネットワークレスポンスが正常ではありません');
108    }
109    return response.json();
110  })
111  .then(function(data) {
112    console.log('データを受信:', data);
113  })
114  .catch(function(error) {
115    console.error('エラーが発生:', error);
116  });
117
118// jQuery: POST リクエスト
119$.post('https://jsonplaceholder.typicode.com/posts', 
120  { 
121    title: '新しい投稿', 
122    body: '投稿の本文', 
123    userId: 1 
124  }, 
125  function(response) {
126    console.log('データを送信し、レスポンスを受信:', response);
127  }
128);
129// JavaScript:
130fetch('https://jsonplaceholder.typicode.com/posts', {
131  method: 'POST',
132  headers: {
133    'Content-Type': 'application/json',
134  },
135  body: JSON.stringify({
136    title: '新しい投稿',
137    body: '投稿の本文',
138    userId: 1
139  })
140})
141  .then(function(response) {
142    if (!response.ok) {
143      throw new Error('ネットワークレスポンスが正常ではありません');
144    }
145    return response.json();
146  })
147  .then(function(data) {
148    console.log('データを送信し、レスポンスを受信:', data);
149  })
150  .catch(function(error) {
151    console.error('エラーが発生:', error);
152  });
153
154// エフェクト
155// jQuery: 要素を隠す
156$('#myElement').hide();
157// JavaScript:
158document.getElementById('myElement').style.display = 'none';
159
160// jQuery: 要素を表示
161$('#myElement').show();
162// JavaScript:
163document.getElementById('myElement').style.display = '';
164
165// jQuery: フェードイン
166$('#myElement').fadeIn();
167// JavaScript: (CSS transitionsを使用)
168var element = document.getElementById('myElement');
169element.style.transition = 'opacity 0.5s';
170element.style.opacity = '1';
171
172// jQuery: フェードアウト
173$('#myElement').fadeOut();
174// JavaScript: (CSS transitionsを使用)
175var element = document.getElementById('myElement');
176element.style.transition = 'opacity 0.5s';
177element.style.opacity = '0';

実践方法を学ぶにはJavaScript学習ロードマップ本がおすすめ！

書き換えはわかったけど、具体的にどんな場面で使うの？って気になりますよね。

そこで「圧倒的に頻出のUIパーツ8つの作り方」を徹底解説した、JavaScript学習ロードマップを販売しています！あなたのJavaScriptのお悩みを全て解決！これさえあれば単価数百万円を超えるサイトの案件も問題なく対応可能！

いつでもどこでもフルリモートで働きたいならWeb制作！購入して今すぐ自由を手に入れましょう！

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

zenn.dev

より詳しい書き換えリストを知りたい方はこちら

HubSpotというマーケティング支援ツールを作っている会社がjQuery→JavaScriptの完全書き換えリストを作っているようです。

英語なのと内容が細かいため初心者の方にとってはこの記事で十分かなと思いますが、勉強がてら書き換えについて詳しく知りたい人にはおすすめです！

You Might Not Need jQuery

Examples of how to do common event, element, ajax and utility operations with plain javascript.

youmightnotneedjquery.com