jQuery ↔ VanillaJSのチートシート


# 1. jQuery ↔ VanillaJSチートシート

以下は、**jQuery ↔ VanillaJSチートシート**です。jQueryに慣れたエンジニアがVanillaJSに移行する際に役立つよう、よく使われる構文を中心にまとめました。

## 🟦 基本操作

| 機能          | jQuery                                    | Vanilla JS                                                                                                  |
| ----------- | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| DOM読み込み後に実行 | `$(document).ready(function(){})`         | `document.addEventListener('DOMContentLoaded', function() {})`                                              |
| 要素の取得       | `$('#id')`<br>`$('.class')`<br>`$('tag')` | `document.getElementById('id')`<br>`document.querySelector('.class')`<br>`document.querySelectorAll('tag')` |
| 複数要素のループ    | `$('.item').each(function(i, el){})`      | `document.querySelectorAll('.item').forEach(function(el, i){})`                                             |

---

## 🟨 イベント操作

| 機能      | jQuery                                | Vanilla JS                                                               |
| ------- | ------------------------------------- | ------------------------------------------------------------------------ |
| イベント追加  | `$('#btn').on('click', function(){})` | `document.getElementById('btn').addEventListener('click', function(){})` |
| イベント削除  | `$('#btn').off('click')`              | `element.removeEventListener('click', handler)`                          |
| thisの扱い | `$(this)`                             | `this`（関数スコープに注意）<br>必要なら`event.target`を使用                               |

---

## 🟩 CSS・属性

| 機能      | jQuery                                                    | Vanilla JS                                                              |
| ------- | --------------------------------------------------------- | ----------------------------------------------------------------------- |
| クラス追加   | `$('#box').addClass('active')`                            | `element.classList.add('active')`                                       |
| クラス削除   | `$('#box').removeClass('active')`                         | `element.classList.remove('active')`                                    |
| クラス切替   | `$('#box').toggleClass('active')`                         | `element.classList.toggle('active')`                                    |
| スタイル変更  | `$('#box').css('color', 'red')`                           | `element.style.color = 'red'`                                           |
| 属性取得・設定 | `$('#el').attr('href')`<br>`$('#el').attr('href', 'url')` | `element.getAttribute('href')`<br>`element.setAttribute('href', 'url')` |

---

## 🟥 DOM操作

| 機能         | jQuery                                              | Vanilla JS                                                    |
| ---------- | --------------------------------------------------- | ------------------------------------------------------------- |
| HTMLの取得・設定 | `$('#el').html()`<br>`$('#el').html('<p>text</p>')` | `element.innerHTML`<br>`element.innerHTML = '<p>text</p>'`    |
| テキストの取得・設定 | `$('#el').text()`<br>`$('#el').text('text')`        | `element.textContent`<br>`element.textContent = 'text'`       |
| 要素の追加（末尾）  | `$('#el').append('<div>text</div>')`                | `element.insertAdjacentHTML('beforeend', '<div>text</div>')`  |
| 要素の追加（先頭）  | `$('#el').prepend('<div>text</div>')`               | `element.insertAdjacentHTML('afterbegin', '<div>text</div>')` |
| 要素の削除      | `$('#el').remove()`                                 | `element.remove()`                                            |
| 親要素の取得     | `$('#el').parent()`                                 | `element.parentElement`                                       |

---

## 🟪 AJAX

| 機能        | jQuery                           | Vanilla JS (Fetch API)                                                                                                   |
| --------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| GETリクエスト  | `$.get('/api', callback)`        | `fetch('/api').then(res => res.json()).then(callback)`                                                                   |
| POSTリクエスト | `$.post('/api', {key: 'value'})` | `fetch('/api', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({key: 'value'}) })` |
| 汎用AJAX    | `$.ajax({...})`                  | `fetch(url, options).then(...)`                                                                                          |

---

## 🟫 ユーティリティ関数

| 機能       | jQuery                            | Vanilla JS                        |
| -------- | --------------------------------- | --------------------------------- |
| 配列ループ    | `$.each(arr, function(i, val){})` | `arr.forEach(function(val, i){})` |
| 遅延処理     | `setTimeout(function(){}, 1000)`  | `setTimeout(() => {}, 1000)`      |
| 値が空かチェック | `$.isEmptyObject(obj)`            | `Object.keys(obj).length === 0`   |

---

# 2. コードスニペット付きjQuery ↔ VanillaJS チートシート

## 2-1. DOM読み込み

### ✅ jQuery

```js
$(document).ready(function() {
  console.log('DOM is ready!');
});
```

### ✅ VanillaJS

```js
document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM is ready!');
});
```

---

## 2-2. 要素の取得

### ✅ jQuery

```js
$('#myId');
$('.myClass');
$('div');
```

### ✅ VanillaJS

```js
document.getElementById('myId');
document.querySelector('.myClass');
document.querySelectorAll('div');
```

---

## 2-3. 要素のループ処理

### ✅ jQuery

```js
$('.item').each(function(index, el) {
  console.log(index, el);
});
```

### ✅ VanillaJS

```js
document.querySelectorAll('.item').forEach(function(el, index) {
  console.log(index, el);
});
```

---

## 2-4. イベントの追加

### ✅ jQuery

```js
$('#btn').on('click', function() {
  alert('Clicked!');
});
```

### ✅ VanillaJS

```js
document.getElementById('btn').addEventListener('click', function() {
  alert('Clicked!');
});
```

---

## 2-5. クラス操作

### ✅ jQuery

```js
$('#box').addClass('active');
$('#box').removeClass('active');
$('#box').toggleClass('active');
```

### ✅ VanillaJS

```js
const box = document.getElementById('box');
box.classList.add('active');
box.classList.remove('active');
box.classList.toggle('active');
```

---

## 2-6. CSS・属性操作

### ✅ jQuery

```js
$('#box').css('color', 'red');
$('#link').attr('href', 'https://example.com');
```

### ✅ VanillaJS

```js
document.getElementById('box').style.color = 'red';
document.getElementById('link').setAttribute('href', 'https://example.com');
```

---

## 2-7. HTML・テキストの操作

### ✅ jQuery

```js
$('#el').html('<p>Hello</p>');
$('#el').text('Hello');
```

### ✅ VanillaJS

```js
document.getElementById('el').innerHTML = '<p>Hello</p>';
document.getElementById('el').textContent = 'Hello';
```

---

## 2-8. 要素の追加・削除

### ✅ jQuery

```js
$('#el').append('<span>追加</span>');
$('#el').prepend('<span>最初に追加</span>');
$('#el').remove();
```

### ✅ VanillaJS

```js
document.getElementById('el').insertAdjacentHTML('beforeend', '<span>追加</span>');
document.getElementById('el').insertAdjacentHTML('afterbegin', '<span>最初に追加</span>');
document.getElementById('el').remove();
```

---

## 2-9. AJAX通信（Fetch）

### ✅ jQuery

```js
$.get('/api/data', function(response) {
  console.log(response);
});

$.post('/api/send', { name: 'John' }, function(response) {
  console.log(response);
});
```

### ✅ VanillaJS

```js
// GET
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data));

// POST
fetch('/api/send', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John' })
})
.then(res => res.json())
.then(data => console.log(data));
```

---

## 2-10. ユーティリティ

### ✅ jQuery

```js
$.each([1, 2, 3], function(i, val) {
  console.log(i, val);
});

$.isEmptyObject({});
```

### ✅ VanillaJS

```js
[1, 2, 3].forEach(function(val, i) {
  console.log(i, val);
});

Object.keys({}).length === 0;
```