この記事の要点

JavaScript の現場でよく書く「定番の小さなコード」を 1 ページにまとめたチートシート DOM 取得 / 表示切替 / クリックイベント / フォーム値取得など、ブラウザ開発の必須パターンを掲載 配列処理（map / filter / reduce）、非同期処理（async/await）、localStorage の使い方も整理 個別の詳細解説は子記事へ。本ページはコピペで動くレシピ集として活用する ES2015 以降のモダン記法（const / アロー関数 / テンプレ文字列 / 分割代入）で統一

はじめに

本ページは、JavaScript を書いていて「こういうの、よく書くな」というパターンをそのままコピペで動く小さなレシピ集としてまとめたものです。各レシピは ES2015（ES6）以降のモダン記法を前提にしています。

1. DOM の取得と書き換え

// 要素の取得
const btn = document.getElementById('myBtn');
const items = document.querySelectorAll('.item');

// テキストを書き換え
document.getElementById('title').textContent = '新タイトル';

// HTML を差し込む（XSS 注意）
document.getElementById('box').innerHTML = '<p>こんにちは</p>';

// クラスの付け外し
btn.classList.add('active');
btn.classList.remove('active');
btn.classList.toggle('active');

// 属性
btn.setAttribute('disabled', 'true');
btn.removeAttribute('disabled');

2. クリックイベントを付ける

// 単発
document.getElementById('btn').addEventListener('click', () => {
    alert('クリックされた');
});

// 複数要素にまとめて
document.querySelectorAll('.item').forEach((el, i) => {
    el.addEventListener('click', () => {
        console.log(`${i} 番目がクリックされた`);
    });
});

// イベント委譲（動的に増える子要素にも対応）
document.getElementById('list').addEventListener('click', (e) => {
    if (e.target.matches('li.item')) {
        console.log('リスト項目:', e.target.textContent);
    }
});

3. 表示／非表示を切り替える

const box = document.getElementById('box');

// CSS で .hidden { display: none } を用意しておく
function show() { box.classList.remove('hidden'); }
function hide() { box.classList.add('hidden'); }
function toggle() { box.classList.toggle('hidden'); }

4. フォーム入力を取得・検証する

const form = document.getElementById('myForm');

form.addEventListener('submit', (e) => {
    e.preventDefault();   // ページ遷移を止める

    // 個別取得
    const name = form.elements['name'].value.trim();
    const age  = Number(form.elements['age'].value);

    // FormData で一括
    const data = Object.fromEntries(new FormData(form));
    console.log(data);     // { name: 'taro', age: '20', ... }

    // 簡易検証
    if (!name) {
        alert('名前を入力してください');
        return;
    }
});

5. 配列処理（map / filter / reduce）

const nums = [1, 2, 3, 4, 5];

// 全要素を 2 倍に
const doubled = nums.map(n => n * 2);          // [2,4,6,8,10]

// 偶数だけ抽出
const evens = nums.filter(n => n % 2 === 0);   // [2, 4]

// 合計
const sum = nums.reduce((acc, n) => acc + n, 0); // 15

// 重複排除
const uniq = [...new Set([1,1,2,3,3])];        // [1,2,3]

// オブジェクト配列のソート
const users = [{age:30},{age:20},{age:25}];
users.sort((a, b) => a.age - b.age);

6. 非同期 API 通信（fetch + async/await）

async function loadUser(id) {
    try {
        const res = await fetch(`/api/users/${id}`);
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const user = await res.json();
        return user;
    } catch (e) {
        console.error('取得失敗', e);
        return null;
    }
}

// 使い方
loadUser(123).then(u => console.log(u));

7. localStorage で値を保存

// 文字列で保存
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');   // 'dark'

// オブジェクトは JSON 化
const profile = { name: 'taro', age: 20 };
localStorage.setItem('profile', JSON.stringify(profile));
const p = JSON.parse(localStorage.getItem('profile'));

// 削除
localStorage.removeItem('theme');
localStorage.clear();   // 全削除

8. デバウンス（連打抑制）

function debounce(fn, delay = 300) {
    let timer;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => fn.apply(this, args), delay);
    };
}

// 検索ボックスの onInput でリクエスト連打を抑える
input.addEventListener('input', debounce((e) => {
    fetch('/search?q=' + e.target.value);
}, 400));

9. クリップボードにコピー

async function copy(text) {
    try {
        await navigator.clipboard.writeText(text);
        alert('コピーしました');
    } catch (e) {
        console.error(e);
    }
}

10. 日付の整形

const d = new Date();

// YYYY-MM-DD
const ymd = d.toISOString().slice(0, 10);

// 日本語フォーマット
const jp = d.toLocaleDateString('ja-JP', {
    year: 'numeric', month: 'long', day: 'numeric', weekday: 'long'
});

// 加算
const next = new Date(d);
next.setDate(d.getDate() + 7);

11. URL クエリパラメータの取得

// ?id=123&color=red
const params = new URLSearchParams(location.search);
const id = params.get('id');       // '123'
const all = Object.fromEntries(params);

関連

• JavaScript — 親カテゴリ