jQuery から標準 API (Vanilla JS) への書き換えリファレンス

code:vanilla.js

/**

* jQuery から標準 API (Vanilla JS) への書き換えリファレンス

*/

// --- 1. 要素の取得 (Selectors) ---

// jQuery: const $el = $('#foo'); / const $items = $('.item');

const el = document.querySelector('#foo'); // 単一（最初に見つかった1つ、なければnull）

const items = document.querySelectorAll('.item'); // 全て（NodeList、なければ空のリスト）

// --- 2. クラス・属性操作 (Attributes & Classes) ---

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

el.classList.add('active');

el.classList.remove('active');

el.classList.toggle('active');

const hasClass = el.classList.contains('active'); // $el.hasClass('active')

// jQuery: $el.attr('id', 'new-id'); / $el.attr('id');

el.setAttribute('id', 'new-id');

const idAttr = el.getAttribute('id');

// --- 3. Data 属性 (Dataset) ---

// jQuery: const val = $el.data('user-id'); / $el.data('user-id', '456');

// 注意: data-user-id は自動的にキャメルケースの userId に変換される

const userId = el.dataset.userId;

el.dataset.userId = '456';

delete el.dataset.userId; // $el.removeData('user-id')

// --- 4. DOM 操作 (Manipulation) ---

// jQuery: const $new = $('<div>Hello</div>'); / $parent.append($new);

const newEl = document.createElement('div');

newEl.textContent = 'Hello';

el.append(newEl); // 末尾に追加

// jQuery: $el.empty(); / $el.remove();

el.innerHTML = ''; // 中身を空にする

el.remove(); // 自身を削除

// --- 5. HTML 文字列からの生成 (Template) ---

// jQuery: $('<div>...</div>')

const template = document.createElement('template');

template.innerHTML = '<div class="box"><span>Hello</span></div>'.trim();

const fragment = template.content.firstElementChild;

// --- 6. イベント (Events) ---

// jQuery: $el.on('click', () => { ... });

el.addEventListener('click', (event) => {

console.log('Clicked!', event.target);

});

// イベント委譲 (Event Delegation)

// jQuery: $(document).on('click', '.btn', function() { ... });

document.addEventListener('click', (e) => {

const target = e.target.closest('.btn'); // 自分または先祖から.btnを探す

if (target) {

console.log('Delegated Click:', target);

}

});

// --- 7. ループ処理 (Iteration) ---

// jQuery: $('.item').each(function() { ... });

// NodeList には forEach が標準実装されている

document.querySelectorAll('.item').forEach((item) => {

item.style.color = 'red';

});

// map や filter を使いたい場合は配列に変換する

// --- 8. 非同期通信 (Ajax / Fetch) ---

// jQuery: $.getJSON('/url', (data) => { ... });

const loadData = async () => {

try {

const response = await fetch('/api/data');

if (!response.ok) throw new Error('Network response was not ok');

const data = await response.json();

console.log(data);

} catch (error) {

console.error('Fetch error:', error);

}

};

// --- 9. 安全なアクセス (Optional Chaining) ---

// jQuery: $('.none').text('hi'); // 要素がなくてもエラーにならない

// Modern JS:

document.querySelector('.none')?.textContent = 'hi'; // 要素がなければ何もしない

// --- 10. ローディング表示と二重送信防止 ---

const handleSubmit = async (e) => {

const btn = e.currentTarget;

btn.disabled = true; // 二重送信防止

// フェードイン (CSS transition と組み合わせ)

const loader = document.querySelector('#loader');

loader.classList.remove('is-hidden');

try {

await fetch('/api/save', { method: 'POST' });

} finally {

btn.disabled = false;

loader.classList.add('is-hidden'); // フェードアウト

}

};