JavaScript Primer v7.0.0をリリースしました 🎉

JavaScript Primer v7.0.0では、ECMAScript 2025への対応と、新しく「イテレータとジェネレータ」の章を追加しています。 Iterator Helpersをはじめとした、ES2025の新機能を学ぶことができます。

JavaScript Primer Sponsors

JavaScript Primer(jsprimer)では、Open Collectiveを通じてプロジェクトの更新に関わる資金を募っています。

今回のv7リリースにおいては、次の方々にご支援いただきました！

Gold Sponsors

jsprimer sponsors

Supporters

jsprimer backers

ご支援ありがとうございます！

JavaScript Primerスポンサーについては、次のページを参照してください。

また、ご支援いただいた資金は、jsprimerにcontributionしてくれた方へ還元できるような仕組みを引き続き運用しています。 今回から同じ金額を他のCollective(オープンソースプロジェクト)に寄付する仕組みも追加しました。 Contributorが受け取る代わりに、指定されたCollectiveへ同じ金額を寄付できます。

JavaScript Primer v7.0.0の変更点

JavaScript Primer v7.0.0の変更点について紹介します。

リリースノートは次のページからも確認できます。

更新をメールで受け取りたい方は、次のフォームから登録できます。

JavaScript Primerの更新情報を購読

* indicates required

変更のサマリ

ES2025

その他

新章: イテレータとジェネレータ

概要

ES2025で追加されたIterator Helpersを含む、イテレータとジェネレータに関する新しい章を追加しました。 これは、v7での最も大きな追加です。

変更されたページ

内容

この章では次の内容をカバーしています。

イテレータの基礎

  • Symbol.iteratorを使ったIterableプロトコルの実装とIteratorプロトコルについて
  • for...of文での反復処理
  • ビルトインオブジェクトとしてのIterableオブジェクト（配列、文字列、Map、Setなど）

Iterator Helpers (ES2025新機能)

  • Iterator.from()でイテレータの作成
  • Iterator.prototypeのメソッド
    • .map() - 値の変換
    • .filter() - 値のフィルタリング
    • .take() - 指定数の要素を取得
    • .drop() - 指定数の要素をスキップ
    • .flatMap() - 平坦化しながら変換
    • .reduce() - reduce
    • .toArray() - 配列への変換
// Iterator.prototype.toArray の使用例
const iterator = Iterator.from([1, 2, 3]).map((x) => x * 2);
// Iteratorを配列に変換
const array = iterator.toArray();
console.log(array); // => [2, 4, 6]

RegExp.escapeの追加

概要

ES2025で追加されたRegExp.escapeメソッドは、文字列内の正規表現の特殊文字を自動的にエスケープします。 ユーザー入力を正規表現で安全に扱うための重要な機能です。

変更されたページ

変更内容

// RegExp.escape の例
const escaped = RegExp.escape("+");
console.log(escaped); // \+

Set Methodsの追加

概要

ES2025でSetに数学的な集合演算を行うメソッドが追加されました。 これにより、複数のSet間の演算が簡潔に書けるようになりました。

変更されたページ

追加されたメソッド

集合演算のイメージ

集合演算のイメージ

// Set メソッドの例
const setA = new Set([1, 2, 3, 4, 5]);
const setB = new Set([3, 4, 5, 6, 7]);

// 和集合 (A∪B): セットAとセットBのすべての要素を含む集合
const unionSet = setA.union(setB);
console.log([...unionSet]); // => [1, 2, 3, 4, 5, 6, 7]

// 積集合 (A∩B): セットAとセットBの両方に存在する要素のみの集合
const intersectionSet = setA.intersection(setB);
console.log([...intersectionSet]); // => [3, 4, 5]

// 差集合 (A-B): セットAからセットBに含まれる要素を除いた集合
const differenceSet = setA.difference(setB);
console.log([...differenceSet]); // => [1, 2]

// 対称差集合 (A△B): セットAとセットBのどちらか一方にのみ存在する要素の集合
const symmetricDifferenceSet = setA.symmetricDifference(setB);
console.log([...symmetricDifferenceSet]); // => [1, 2, 6, 7]

// 部分集合の判定
console.log(new Set([3, 4]).isSubsetOf(setA)); // => true

// 上位集合の判定
console.log(setA.isSupersetOf(new Set([3, 4]))); // => true

// 互いに素（共通要素がない）の判定
console.log(setA.isDisjointFrom(new Set([6, 7]))); // => false

Import Attributesの追加

概要

ES2025で標準化されたImport Attributesは、JSONファイルなどのJavaScript以外のファイルをインポートする際の属性を指定する構文です。

変更されたページ

変更内容

// 静的インポートの例
import jsonData from "./data.json" with { type: "json" };
console.log(jsonData.name); // => "John"
console.log(jsonData.age); // => 30

// Dynamic Import で属性を指定
const jsonData = await import("./data.json", { with: { type: "json" } });

その他の追加

Dynamic Import (ES2020)

動的にモジュールをインポートするimport()関数の説明を追加しました。

// async/await を使った Dynamic Import
async function loadModule() {
    try {
        const module = await import("./math-utils.js");
        console.log(module.add(1, 2)); // => 3
    } catch (error) {
        console.error(error);
    }
}

Array.prototype.flatMap (ES2019)

配列の変換と平坦化を同時に行うflatMapメソッドの説明を追加しました。

const sentences = ["Hello World", "Good Morning"];
const words = sentences.flatMap(sentence => sentence.split(" "));
console.log(words); // ["Hello", "World", "Good", "Morning"]

おわりに

jsprimerでは毎年更新していけるような仕組み作りの一環としてJavaScript Primer - Open Collectiveでの支援を募集しています。サイト上へのロゴの掲載やリリースノートへのロゴの掲載などの特典を含んでいます。

また、文章の修正やコード的なコミットはいつでも歓迎しています！

毎年1月頃には、次のECMAScriptのリリースに合わせた計画を立て始めています。

この時期になると次のリリースに向けてのIssueが立ち始めるので、興味がある人はリポジトリをWatchしてください！

個人的なGitHub Sponsorsも募集しています。こちらも合わせてご支援いただけると嬉しいです。