このlessonを最後まで読めば、以下の3つを自信を持ってできるようになります。

• ▸✅ Array.at(-1) · structuredClone · Object.hasOwn などの新構文
• ▸✅ Top-level await + Error cause オプション
• ▸✅ Object.groupBy / using (ES2024) の導入時期

学習目標をチェックリストとして手元に置き、すべて答えられるようになったらlessonを閉じてください。

なぜ知っておく必要があるのか

2025年、AIが生成するJavaScriptコードの30%が ES2022以降の構文 を使っています。知らないと 読むのを止めて検索 — トークンも時間も無駄になります。

1. Array.at(-1) — 最後の要素 (ES2022)

const arr = [10, 20, 30];
console.log(arr.at(-1));            // 30   ← 末尾から1番目
console.log(arr.at(-2));            // 20   ← 末尾から2番目
console.log(arr[arr.length - 1]);   // 30   ← 旧方式（length - 1 の計算が必要）
//
// 💡 Pythonのarr[-1]のように負のインデックスをサポート → コードが短くなる

負のインデックスで末尾からアクセス。Pythonの arr[-1] と同じ利便性。

2. Object.hasOwn() — hasOwnPropertyの安全版 (ES2022)

Object.hasOwn(obj, 'key');     // ✅ 推奨
obj.hasOwnProperty('key');     // ❌ 旧方式 — オブジェクトがhasOwnPropertyをオーバーライドしていると壊れる

リンター (ESLint) が自動推奨する パターン。

3. structuredClone() — ディープコピーの標準 (Node 17+)

const deep = structuredClone(original);

JSON.parse(JSON.stringify(...)) の限界（Date・Map・Setの消失）を解消。組み込み関数 — ライブラリ不要。

4. Top-level await (ES2022 modules)

// ESMモジュールのトップレベル
const data = await fetch('/config.json').then(r => r.json());
export default data;

async関数でラップしなくても モジュールのトップレベルで await が使用可能。動的import と組み合わせて使うことが多い。

5. Error cause (ES2022)

throw new Error('商品取得失敗', { cause: originalError });

6. Array.fromAsync() (ES2024)

const urls = ['/a', '/b', '/c'];
const results = await Array.fromAsync(
    urls,
    async url => (await fetch(url)).json()
);

Promise の配列を 順次解決して収集。Promise.all + map のよりクリーンな形（ただし 順次処理 なので並列処理には引き続きPromise.allを使う）。

7. Object.groupBy() (ES2024)

const arr = [
    { type: 'fruit', name: 'apple' },
    { type: 'veg',   name: 'carrot' },
    { type: 'fruit', name: 'banana' }
];

// 🪣 第2引数のコールバック関数の結果を「キー」としてグループ化
const grouped = Object.groupBy(arr, item => item.type);
console.log(grouped);
// {
//   fruit: [ { type: 'fruit', name: 'apple' }, { type: 'fruit', name: 'banana' } ],
//   veg:   [ { type: 'veg',   name: 'carrot' } ]
// }

Lodashの _.groupBy が 標準ライブラリ に組み込まれた。ライブラリ依存が1つ減る。

8. using / await using (TC39 Stage 4)

{
    using db = await openDB();
    // ブロック終了時に自動でdb[Symbol.dispose]()が呼ばれる
}

try-finallyのリソース解放パターン を言語レベルで実現。C#の using、Pythonの with と同じ思想。TypeScript 5.2以降から使用可能。

まとめ

この8つを知っておけば、AI生成コードのほぼすべての新構文を 止まらずに 読めるようになります。「この構文って何ですか？」とAIに再確認する必要がなくなります — トークン節約に直結。

このlessonの概念を理解すれば、AIに 具体的に 指示できるようになります。漠然とした「直して」ではなく 語彙を持ったリクエスト — それがトークン節約の出発点です。

• ▸「このコードにArray.at(-1) · structuredClone · Object.hasOwn などの新構文を適用して」
• ▸「このディープコピーをstructuredCloneに置き換えて」

なぜこれがトークンを減らすのか

概念を知らないと、AI の回答を受け取った後でも 「それって何ですか？」 と再び聞かなければなりません。その「再質問」がトークンを消費します。概念を一度習得しておけば、 会話が一度で完結 します。