Skip to content

Commit 003abe3

Browse files
committed
Implement code changes to enhance functionality and improve performance
1 parent 29f37d0 commit 003abe3

5 files changed

Lines changed: 8111 additions & 4207 deletions

File tree

.textlintrc.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
{
2+
"filters": {
3+
"comments": true
4+
},
25
"rules": {
36
"@textlint-ja/preset-ai-writing": true,
47
"preset-ja-technical-writing": true,
Lines changed: 309 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,309 @@
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+
[![jsprimer sponsors](https://opencollective.com/jsprimer/sponsors.svg?width=890&avatarHeight=80)](https://opencollective.com/jsprimer#sponsors)
33+
34+
**Supporters**
35+
36+
[![jsprimer backers](https://opencollective.com/jsprimer/backers.svg?width=890&avatarHeight=40)](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&amp;id=7ab1594ae8&amp;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

Comments
 (0)