JavaScript

概要

JavaScript はブラウザおよび Node.js などのサーバーサイドで動作する、動的型付けのスクリプト言語です。本チートシートでは ECMAScript 最新仕様（ES2023/ES2024）を踏まえ、実務で頻繁に使用する構文・イディオムをまとめます。MDN の公式ドキュメントを第一次ソースとしています。

変数宣言と型

プリミティブ型

演算子

文字列操作

配列操作（基本）

配列操作（高階関数）

オブジェクト操作

関数定義

// 関数宣言
function add(a, b) {
  return a + b;
}

// 関数式
const mul = function (a, b) { return a * b; };

// アロー関数
const square = (x) => x * x;
const sumAll = (...xs) => xs.reduce((a, b) => a + b, 0);

// デフォルト引数 + 分割代入
function greet({ name = "world", lang = "en" } = {}) {
  return lang === "ja" ? `こんにちは、${name}` : `Hello, ${name}`;
}

制御構文

if (x > 0) { /* ... */ } else if (x === 0) { /* ... */ } else { /* ... */ }

for (let i = 0; i < 10; i++) { /* ... */ }
for (const v of arr) { /* ... */ }          // 値を反復
for (const k in obj) { /* ... */ }          // キーを反復（enumerable）
for (const [k, v] of Object.entries(obj)) { /* ... */ }

while (cond) { /* ... */ }
do { /* ... */ } while (cond);

switch (kind) {
  case "a": break;
  case "b":
  case "c": break;
  default: break;
}

非同期処理

// Promise
fetch("/api/users")
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => console.error(err))
  .finally(() => console.log("done"));

// async / await
async function loadUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error(err);
    throw err;
  }
}

// 並列実行
const [a, b, c] = await Promise.all([fa(), fb(), fc()]);

// どれか 1 つ解決
const winner = await Promise.race([fa(), fb()]);

// すべての結果（失敗を含む）
const results = await Promise.allSettled([fa(), fb()]);

// 最初に成功したもの
const ok = await Promise.any([fa(), fb()]);

実用スニペット集

1. 重複を除外

const unique = [...new Set(arr)];

2. 配列をチャンクに分割

const chunk = (arr, size) =>
  Array.from({ length: Math.ceil(arr.length / size) }, (_, i) =>
    arr.slice(i * size, i * size + size)
  );

3. オブジェクトをグループ化

const groupBy = (arr, key) =>
  arr.reduce((acc, item) => {
    (acc[item[key]] ??= []).push(item);
    return acc;
  }, {});

4. ディープマージ（単純版）

const deepMerge = (a, b) => {
  const out = { ...a };
  for (const [k, v] of Object.entries(b)) {
    out[k] = v && typeof v === "object" && !Array.isArray(v)
      ? deepMerge(a[k] ?? {}, v)
      : v;
  }
  return out;
};

5. デバウンス

const debounce = (fn, ms) => {
  let t;
  return (...args) => {
    clearTimeout(t);
    t = setTimeout(() => fn(...args), ms);
  };
};

6. スロットル

const throttle = (fn, ms) => {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= ms) {
      last = now;
      fn(...args);
    }
  };
};

7. 指定ミリ秒待機

const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
await sleep(500);

8. 数値を範囲に制限

const clamp = (x, min, max) => Math.min(Math.max(x, min), max);

9. 安全な JSON パース

const safeParse = (s, fallback = null) => {
  try { return JSON.parse(s); } catch { return fallback; }
};

10. クエリ文字列の構築

const qs = new URLSearchParams({ page: 1, q: "js" }).toString();
// "page=1&q=js"

11. URL からクエリを取得

const params = Object.fromEntries(new URL(location.href).searchParams);

12. 配列のシャッフル（Fisher–Yates）

const shuffle = (arr) => {
  const a = [...arr];
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
};

13. オブジェクトから不要キーを除外

const omit = (obj, keys) =>
  Object.fromEntries(Object.entries(obj).filter(([k]) => !keys.includes(k)));

14. オブジェクトから指定キーのみ抽出

const pick = (obj, keys) =>
  Object.fromEntries(keys.filter((k) => k in obj).map((k) => [k, obj[k]]));

15. リトライ付き fetch

async function retry(fn, times = 3, delay = 300) {
  for (let i = 0; i < times; i++) {
    try { return await fn(); }
    catch (err) {
      if (i === times - 1) throw err;
      await new Promise((r) => setTimeout(r, delay * 2 ** i));
    }
  }
}

16. 日付フォーマット（Intl）

new Intl.DateTimeFormat("ja-JP", {
  year: "numeric", month: "2-digit", day: "2-digit",
}).format(new Date());

17. 数値フォーマット

new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY" })
  .format(12345); // "￥12,345"

モジュール

// export
export const PI = 3.14;
export function area(r) { return PI * r * r; }
export default class Circle { /* ... */ }

// import
import Circle, { PI, area } from "./circle.js";
import * as mod from "./circle.js";
const mod = await import("./circle.js"); // 動的 import

クラス

class Animal {
  #name;              // プライベートフィールド
  static kind = "animal"; // 静的フィールド

  constructor(name) { this.#name = name; }
  get name() { return this.#name; }
  speak() { return `${this.#name} makes a sound`; }
  static create(n) { return new Animal(n); }
}

class Dog extends Animal {
  speak() { return `${super.speak()} (woof)`; }
}

エラー処理

class AppError extends Error {
  constructor(message, { cause, code } = {}) {
    super(message, { cause });
    this.name = "AppError";
    this.code = code;
  }
}

try {
  throw new AppError("bad", { cause: new Error("io"), code: "E001" });
} catch (err) {
  console.error(err.message, err.cause);
}

オプション・フラグ早見表（Node.js 実行時）

トラブルシューティング

Tips

• 等価比較は必ず === を使い、暗黙変換を避ける。
• 非破壊の新 API（toSorted など）を使うと副作用を防ぎやすい。
• 深いコピーは自作せず structuredClone を使う（関数・DOM は不可）。
• fetch のエラーは HTTP ステータスを自分でチェックする必要がある。
• Top-level await は ESM モジュール内でのみ使用可能。
• console.table(arr) は配列・オブジェクトの可視化に便利。
• performance.now() で高精度タイミング計測ができる。
• 大きな整数は BigInt を使う（Number.MAX_SAFE_INTEGER を超える場合）。

参考リソース

• MDN Web Docs: JavaScript
• MDN: JavaScript リファレンス
• ECMAScript 言語仕様 (TC39)
• Node.js Documentation