|
| 1 | +--- |
| 2 | +title: "JavaScript Primer v7.0.0リリース: ES2025対応とIterator Helpersの新章追加" |
| 3 | +author: azu |
| 4 | +layout: post |
| 5 | +date : 2025-08-18T09:00 |
| 6 | +category: JavaScript |
| 7 | +tags: |
| 8 | + - JavaScript |
| 9 | + - ECMAScript |
| 10 | + - Node.js |
| 11 | + - Book |
| 12 | + |
| 13 | +--- |
| 14 | + |
| 15 | +<!-- textlint-disable ja-technical-writing/no-exclamation-question-mark --> |
| 16 | + |
| 17 | +JavaScript Primer v7.0.0をリリースしました 🎉。 |
| 18 | + |
| 19 | +JavaScript Primer v7.0.0では、ECMAScript 2025への対応と、新しく「イテレータとジェネレータ」の章を追加しています。 |
| 20 | +Iterator Helpersをはじめとした、ES2025の新機能を学ぶことができます。 |
| 21 | + |
| 22 | +# JavaScript Primer Sponsors |
| 23 | + |
| 24 | +JavaScript Primer(jsprimer)では、Open Collectiveを通じてプロジェクトの更新に関わる資金を募っています。 |
| 25 | + |
| 26 | +- [JavaScript Primer - Open Collective](https://opencollective.com/jsprimer) |
| 27 | + |
| 28 | +今回のv7リリースにおいては、次の方々にご支援いただきました! |
| 29 | + |
| 30 | +**Gold Sponsors** |
| 31 | + |
| 32 | +[](https://opencollective.com/jsprimer#sponsors) |
| 33 | + |
| 34 | +**Supporters** |
| 35 | + |
| 36 | +[](https://opencollective.com/jsprimer#backers) |
| 37 | + |
| 38 | + |
| 39 | +ご支援ありがとうございます! |
| 40 | + |
| 41 | +JavaScript Primerスポンサーについては、次のページを参照してください。 |
| 42 | + |
| 43 | +- [JavaScript Primerスポンサー · JavaScript Primer #jsprimer](https://jsprimer.net/intro/sponsors/) |
| 44 | + |
| 45 | +また、ご支援いただいた資金は、jsprimerにcontributionしてくれた方へ還元できるような仕組みを引き続き運用しています。 |
| 46 | + |
| 47 | +- [Contributing Expenses Policy](https://github.com/asciidwango/js-primer/blob/master/CONTRIBUTING_EXPENSE.md) |
| 48 | + |
| 49 | +# JavaScript Primer v7.0.0の変更点 |
| 50 | + |
| 51 | +JavaScript Primer v7.0.0の変更点について紹介します。 |
| 52 | + |
| 53 | +リリースノートは次のページからも確認できます。 |
| 54 | + |
| 55 | +- [Release v7.0.0: ES2025の対応/Iterator Helpersの新章追加 · asciidwango/js-primer](https://github.com/asciidwango/js-primer/releases/tag/v7.0.0) |
| 56 | + |
| 57 | +更新をメールで受け取りたい方は、次のフォームから登録できます。 |
| 58 | + |
| 59 | +<!-- Begin Mailchimp Signup Form --> |
| 60 | +<link href="//cdn-images.mailchimp.com/embedcode/classic-071822.css" rel="stylesheet" type="text/css"> |
| 61 | +<style type="text/css"> |
| 62 | + #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; padding: 4px; max-width:600px;} |
| 63 | + /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block. |
| 64 | + We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ |
| 65 | +</style> |
| 66 | +<div id="mc_embed_signup"> |
| 67 | + <form action="https://jsprimer.us13.list-manage.com/subscribe/post?u=fc41e11a2b9dc6f05350e0de0&id=7ab1594ae8&f_id=00f796e2f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> |
| 68 | + <div id="mc_embed_signup_scroll"> |
| 69 | + <h2>JavaScript Primerの更新情報を購読</h2> |
| 70 | + <div class="indicates-required"><span class="asterisk">*</span> indicates required</div> |
| 71 | +<div class="mc-field-group"> |
| 72 | + <label for="mce-EMAIL">Email Address <span class="asterisk">*</span> |
| 73 | +</label> |
| 74 | + <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required> |
| 75 | + <span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span> |
| 76 | +</div> |
| 77 | + <div id="mce-responses" class="clear foot"> |
| 78 | + <div class="response" id="mce-error-response" style="display:none"></div> |
| 79 | + <div class="response" id="mce-success-response" style="display:none"></div> |
| 80 | + </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> |
| 81 | + <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_fc41e11a2b9dc6f05350e0de0_7ab1594ae8" tabindex="-1" value=""></div> |
| 82 | + <div class="optionalParent"> |
| 83 | + <div class="clear foot"> |
| 84 | + <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> |
| 85 | + <p class="brandingLogo"><a href="http://eepurl.com/h44CST" title="Mailchimp - email marketing made easy and fun"><img src="https://eep.io/mc-cdn-images/template_images/branding_logo_text_dark_dtp.svg"></a></p> |
| 86 | + </div> |
| 87 | + </div> |
| 88 | + </div> |
| 89 | +</form> |
| 90 | +</div> |
| 91 | +<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);</script> |
| 92 | +<!--End mc_embed_signup--> |
| 93 | + |
| 94 | + |
| 95 | +フォームが表示されない人は <https://github.us13.list-manage.com/subscribe/post?u=fc41e11a2b9dc6f05350e0de0&id=7ab1594ae8> から登録できます。 |
| 96 | + |
| 97 | +## 変更のサマリ |
| 98 | + |
| 99 | +### ES2025 |
| 100 | + |
| 101 | +- Iterator Helpers(`Iterator.from()`, `.map()`, `.filter()`など) |
| 102 | +- [`RegExp.escape`](https://jsprimer.net/basic/string/#regexp-escape) |
| 103 | +- [Set Methods](https://jsprimer.net/basic/map-and-set/#set-methods)(`.intersection()`, `.union()`, `.difference()`など) |
| 104 | +- [Import Attributes](https://jsprimer.net/basic/module/#import-attributes) |
| 105 | + |
| 106 | +### その他 |
| 107 | + |
| 108 | +- 新章追加([イテレータとジェネレータ](https://jsprimer.net/basic/iterator-generator/)) |
| 109 | +- Dynamic Import(ES2020) |
| 110 | +- [`Array.prototype.flatMap`](https://jsprimer.net/basic/array/#array-flat-map)(ES2019) |
| 111 | +- 環境更新(Node.js 22.18.0) |
| 112 | + |
| 113 | +# [新章: イテレータとジェネレータ](https://github.com/asciidwango/js-primer/pull/1838) |
| 114 | + |
| 115 | +## 概要 |
| 116 | + |
| 117 | +ES2025で追加されたIterator Helpersを含む、イテレータとジェネレータに関する新しい章を追加しました。 |
| 118 | +これは、v7での最も大きな追加です。 |
| 119 | + |
| 120 | +## 変更されたページ |
| 121 | + |
| 122 | +- [イテレータとジェネレータ · JavaScript Primer #jsprimer](https://jsprimer.net/basic/iterator-generator/) |
| 123 | + |
| 124 | +## 内容 |
| 125 | + |
| 126 | +この章では次の内容をカバーしています。 |
| 127 | + |
| 128 | +### イテレータの基礎 |
| 129 | +- `Symbol.iterator`を使ったイテレータの実装 |
| 130 | +- `for...of`文での反復処理 |
| 131 | +- 組み込みのイテレータブルオブジェクト(配列、文字列、Map、Setなど) |
| 132 | + |
| 133 | +### Iterator Helpers (ES2025新機能) |
| 134 | +- `Iterator.from()`でイテレータの作成 |
| 135 | +- `Iterator.prototype`メソッド |
| 136 | + - `.map()` - 値の変換 |
| 137 | + - `.filter()` - 値のフィルタリング |
| 138 | + - `.take()` - 指定数の要素を取得 |
| 139 | + - `.drop()` - 指定数の要素をスキップ |
| 140 | + - `.flatMap()` - 平坦化しながら変換 |
| 141 | + - `.forEach()` - 副作用のある処理 |
| 142 | + - `.reduce()` - 畳み込み演算 |
| 143 | + - `.toArray()` - 配列への変換 |
| 144 | + |
| 145 | +```javascript |
| 146 | +// Iterator.prototype.toArray の使用例 |
| 147 | +const iterator = Iterator.from([1, 2, 3]).map((x) => x * 2); |
| 148 | +// Iteratorを配列に変換 |
| 149 | +const array = iterator.toArray(); |
| 150 | +console.log(array); // => [2, 4, 6] |
| 151 | +``` |
| 152 | + |
| 153 | +### ジェネレータ関数 |
| 154 | +- `function*`構文 |
| 155 | +- `yield`式による値の生成 |
| 156 | +- 遅延評価により必要な要素のみを逐次生成し、メモリ消費を抑えて大きなデータでも処理可能 |
| 157 | +- 無限イテレータの実装 |
| 158 | + |
| 159 | +```javascript |
| 160 | +// ジェネレータ関数の例 |
| 161 | +function* generatorFunction() { |
| 162 | + yield 1; // 最初の値を生成 |
| 163 | + yield 2; // 次の値を生成 |
| 164 | + yield 3; // 最後の値を生成 |
| 165 | +} |
| 166 | + |
| 167 | +const generator = generatorFunction(); |
| 168 | +console.log(generator.next()); // => { value: 1, done: false } |
| 169 | +console.log(generator.next()); // => { value: 2, done: false } |
| 170 | +console.log(generator.next()); // => { value: 3, done: false } |
| 171 | +console.log(generator.next()); // => { value: undefined, done: true } |
| 172 | +``` |
| 173 | + |
| 174 | +# [`RegExp.escape`の追加](https://github.com/asciidwango/js-primer/pull/1781) |
| 175 | + |
| 176 | +## 概要 |
| 177 | + |
| 178 | +ES2025で追加された`RegExp.escape`メソッドは、文字列内の正規表現の特殊文字を自動的にエスケープします。 |
| 179 | +ユーザー入力を正規表現で安全に扱うための重要な機能です。 |
| 180 | + |
| 181 | +## 変更されたページ |
| 182 | + |
| 183 | +- [文字列 · JavaScript Primer #jsprimer](https://jsprimer.net/basic/string/#regexp-escape) |
| 184 | + |
| 185 | +## 変更内容 |
| 186 | + |
| 187 | +```javascript |
| 188 | +// RegExp.escape の例 |
| 189 | +const escaped = RegExp.escape("+"); |
| 190 | +console.log(escaped); // \+ |
| 191 | +``` |
| 192 | + |
| 193 | +# [Set Methodsの追加](https://github.com/asciidwango/js-primer/pull/1784) |
| 194 | + |
| 195 | +## 概要 |
| 196 | + |
| 197 | +ES2025でSetに数学的な集合演算を行うメソッドが追加されました。 |
| 198 | +これにより、複数のSet間の演算が簡潔に書けるようになりました。 |
| 199 | + |
| 200 | +## 変更されたページ |
| 201 | + |
| 202 | +- [Map/Set · JavaScript Primer #jsprimer](https://jsprimer.net/basic/map-and-set/#set-methods) |
| 203 | + |
| 204 | +## 追加されたメソッド |
| 205 | + |
| 206 | +```javascript |
| 207 | +// Set メソッドの例 |
| 208 | +const setA = new Set([1, 2, 3, 4, 5]); |
| 209 | +const setB = new Set([3, 4, 5, 6, 7]); |
| 210 | + |
| 211 | +// 和集合 (A∪B): セットAとセットBのすべての要素を含む集合 |
| 212 | +const unionSet = setA.union(setB); |
| 213 | +console.log([...unionSet]); // => [1, 2, 3, 4, 5, 6, 7] |
| 214 | + |
| 215 | +// 積集合 (A∩B): セットAとセットBの両方に存在する要素のみの集合 |
| 216 | +const intersectionSet = setA.intersection(setB); |
| 217 | +console.log([...intersectionSet]); // => [3, 4, 5] |
| 218 | + |
| 219 | +// 差集合 (A-B): セットAからセットBに含まれる要素を除いた集合 |
| 220 | +const differenceSet = setA.difference(setB); |
| 221 | +console.log([...differenceSet]); // => [1, 2] |
| 222 | + |
| 223 | +// 対称差集合 (A△B): セットAとセットBのどちらか一方にのみ存在する要素の集合 |
| 224 | +const symmetricDifferenceSet = setA.symmetricDifference(setB); |
| 225 | +console.log([...symmetricDifferenceSet]); // => [1, 2, 6, 7] |
| 226 | + |
| 227 | +// 部分集合の判定 |
| 228 | +console.log(new Set([3, 4]).isSubsetOf(setA)); // => true |
| 229 | + |
| 230 | +// 上位集合の判定 |
| 231 | +console.log(setA.isSupersetOf(new Set([3, 4]))); // => true |
| 232 | + |
| 233 | +// 互いに素(共通要素がない)の判定 |
| 234 | +console.log(setA.isDisjointFrom(new Set([6, 7]))); // => false |
| 235 | +``` |
| 236 | + |
| 237 | +# [Import Attributesの追加](https://github.com/asciidwango/js-primer/pull/1783) |
| 238 | + |
| 239 | +## 概要 |
| 240 | + |
| 241 | +ES2025で標準化されたImport Attributesは、JSONファイルなどのJavaScript以外のファイルをインポートする際の属性を指定する構文です。 |
| 242 | + |
| 243 | +## 変更されたページ |
| 244 | + |
| 245 | +- [ECMAScriptモジュール · JavaScript Primer #jsprimer](https://jsprimer.net/basic/module/#import-attributes) |
| 246 | + |
| 247 | +## 変更内容 |
| 248 | + |
| 249 | +```javascript |
| 250 | +// 静的インポートの例 |
| 251 | +import jsonData from "./data.json" with { type: "json" }; |
| 252 | +console.log(jsonData.name); // => "John" |
| 253 | +console.log(jsonData.age); // => 30 |
| 254 | +``` |
| 255 | + |
| 256 | +```javascript |
| 257 | +// Dynamic Import で属性を指定 |
| 258 | +const jsonData = await import("./data.json", { with: { type: "json" } }); |
| 259 | +``` |
| 260 | + |
| 261 | +# その他の追加 |
| 262 | + |
| 263 | +## [Dynamic Import (ES2020)](https://github.com/asciidwango/js-primer/pull/1737) |
| 264 | + |
| 265 | +動的にモジュールをインポートする`import()`関数の説明を追加しました。 |
| 266 | + |
| 267 | +```javascript |
| 268 | +// async/await を使った Dynamic Import |
| 269 | +async function loadModule() { |
| 270 | + try { |
| 271 | + const module = await import("./math-utils.js"); |
| 272 | + console.log(module.add(1, 2)); // => 3 |
| 273 | + } catch (error) { |
| 274 | + console.error(error); |
| 275 | + } |
| 276 | +} |
| 277 | +``` |
| 278 | + |
| 279 | +## [`Array.prototype.flatMap` (ES2019)](https://github.com/asciidwango/js-primer/pull/1749) |
| 280 | + |
| 281 | +配列の変換と平坦化を同時に行う`flatMap`メソッドの説明を追加しました。 |
| 282 | + |
| 283 | +```javascript |
| 284 | +const sentences = ["Hello World", "Good Morning"]; |
| 285 | +const words = sentences.flatMap(sentence => sentence.split(" ")); |
| 286 | +console.log(words); // ["Hello", "World", "Good", "Morning"] |
| 287 | +``` |
| 288 | + |
| 289 | +## Node.js 22.18.0への更新 |
| 290 | + |
| 291 | +Node.jsのバージョンを22.18.0に更新し、最新のLTS環境に対応しました。 |
| 292 | + |
| 293 | +## おわりに |
| 294 | + |
| 295 | +jsprimerでは毎年更新していけるような仕組み作りの一環として[JavaScript Primer - Open Collective](https://opencollective.com/jsprimer)での支援を募集しています。サイト上へのロゴの掲載やリリースノートへのロゴの掲載などの特典を含んでいます。 |
| 296 | + |
| 297 | +- [JavaScript Primerスポンサー · JavaScript Primer #jsprimer](https://jsprimer.net/intro/sponsors/) |
| 298 | + |
| 299 | +また、文章の修正やコード的なコミットはいつでも歓迎しています! |
| 300 | + |
| 301 | +- [Contribution Guide](https://github.com/asciidwango/js-primer/blob/master/CONTRIBUTING.md) |
| 302 | +- [文章の間違いに気づいたら · JavaScript Primer #jsprimer](https://jsprimer.net/intro/feedback/) |
| 303 | + |
| 304 | +毎年1月頃には、次のECMAScriptのリリースに合わせた計画を立て始めています。 |
| 305 | + |
| 306 | +この時期になると次のリリースに向けてのIssueが立ち始めるので、興味がある人はリポジトリをWatchしてください! |
| 307 | + |
| 308 | +- [asciidwango/js-primer: :book: JavaScript Primer - 迷わないための入門書](https://github.com/asciidwango/js-primer) |
| 309 | +- [JavaScript PrimerのES2025対応を手伝ってくれるContributorとSponsorを募集しています | Web Scratch](https://efcl.info/2025/04/25/jsprimer-es2025-proposal/) |
0 commit comments