もう知らないと損！モダンJavaScript新機能12選【2026】

const items = [
  { name: "りんご", type: "果物" },
  { name: "にんじん", type: "野菜" },
  { name: "みかん", type: "果物" },
];

const grouped = Object.groupBy(items, (item) => item.type);
// {
//   果物: [{ name: "りんご", ... }, { name: "みかん", ... }],
//   野菜: [{ name: "にんじん", ... }],
// }

// キーにオブジェクトを使いたいなら Map.groupBy()
const byLen = Map.groupBy(["a", "bb", "cc"], (s) => s.length);
// Map(2) { 1 => ["a"], 2 => ["bb", "cc"] }

const nums = [3, 1, 2];

const sorted = nums.toSorted((a, b) => a - b); // [1, 2, 3]
const reversed = nums.toReversed();            // [2, 1, 3]
const replaced = nums.with(0, 99);             // [99, 1, 2]

console.log(nums); // [3, 1, 2] ← 元配列はそのまま！

// state を安全に更新（React などで有効）
setTodos((prev) => prev.with(index, { ...prev[index], done: true }));

const logs = [
  { level: "info", msg: "start" },
  { level: "error", msg: "boom" },
  { level: "info", msg: "retry" },
  { level: "error", msg: "fatal" },
];

const lastError = logs.findLast((l) => l.level === "error");
// { level: "error", msg: "fatal" }

const lastErrorIdx = logs.findLastIndex((l) => l.level === "error"); // 3

const arr = [10, 20, 30];
arr.at(-1); // 30
arr.at(-2); // 20

"hello".at(-1); // "o"

const a = new Set([1, 2, 3, 4]);
const b = new Set([3, 4, 5]);

a.union(b);        // Set {1, 2, 3, 4, 5}  和集合
a.intersection(b); // Set {3, 4}           積集合（共通）
a.difference(b);   // Set {1, 2}           差集合（aだけ）
a.symmetricDifference(b); // Set {1, 2, 5}  対称差

a.isSubsetOf(b);     // false  a は b の部分集合か？
a.isDisjointFrom(b); // false  交わりが無いか？

// 100万件でも、必要な3件しか処理されない
const result = Array(1_000_000)
  .keys()          // イテレータを取得
  .filter((n) => n % 2 === 0)
  .map((n) => n * 10)
  .take(3)         // ここで打ち切り
  .toArray();      // [0, 20, 40]

// 無限ジェネレータも安全に扱える
function* naturals() {
  let i = 1;
  while (true) yield i++;
}
const first5 = naturals().take(5).toArray(); // [1, 2, 3, 4, 5]

// Before: おなじみの定型句
// let resolve, reject;
// const promise = new Promise((res, rej) => { resolve = res; reject = rej; });

// After:
const { promise, resolve, reject } = Promise.withResolvers();

button.addEventListener("click", () => resolve("clicked!"), { once: true });

const value = await promise; // クリックされるまで待つ

async function* fetchPages() {
  for (let page = 1; page <= 3; page++) {
    const res = await fetch(`/api/items?page=${page}`);
    yield await res.json();
  }
}

// 全ページを1つの配列に（await を1回書くだけ）
const pages = await Array.fromAsync(fetchPages());

// Promise の配列にも使える（順番に await される）
const data = await Array.fromAsync([fetch("/a"), fetch("/b")]);

const original = {
  when: new Date(),
  tags: new Set(["a", "b"]),
  meta: new Map([["k", "v"]]),
  nested: { deep: [1, 2, 3] },
};

const copy = structuredClone(original);
copy.nested.deep.push(4);

original.nested.deep; // [1, 2, 3] ← 影響なし
copy.when instanceof Date; // true（Date もちゃんと維持）

const seg = new Intl.Segmenter("ja", { granularity: "grapheme" });

const count = (str) => [...seg.segment(str)].length;

count("👨‍👩‍👧");     // 1（家族の絵文字も1文字）
count("café");     // 4
"👨‍👩‍👧".length;    // 8 ← 素朴に数えると壊れる

// 単語単位の分割にも使える
const words = new Intl.Segmenter("ja", { granularity: "word" });
[...words.segment("今日は良い天気")]
  .filter((s) => s.isWordLike)
  .map((s) => s.segment); // ["今日", "は", "良い", "天気"]

function parse(input) {
  if (!input) throw new Error("入力が空です"); // 同期例外
  return JSON.parse(input);
}

// 同期エラーも非同期エラーも、全部 catch で受けられる
Promise.try(parse, userInput)
  .then((data) => render(data))
  .catch((err) => showError(err.message));

// async 関数と同期関数が混在する処理を統一的に書ける
await Promise.try(() => maybeAsyncTask());

// null / undefined のときだけ代入
options.timeout ??= 3000;

// falsy（0や""含む）のときだけ代入
name ||= "ゲスト";

// truthy のときだけ代入
user.token &&= refresh(user.token);

// キャッシュ初期化の定番
const cache = {};
function get(key) {
  return (cache[key] ??= expensiveCompute(key));
}

// 実行時の機能検出
const groupBy =
  typeof Object.groupBy === "function"
    ? Object.groupBy
    : (arr, fn) => arr.reduce((acc, x) => {
        (acc[fn(x)] ??= []).push(x);
        return acc;
      }, {});