Update v6-node-updates

.github/workflows/deploy.yml

@@ -11,11 +11,11 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
       - run: npm install
       - run: npm run build
       - name: Deploy

.github/workflows/test.yml

@@ -14,13 +14,13 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node-version: [18]
+        node-version: [20]
         os: [macOS-latest, windows-latest, ubuntu-latest]
     name: "Build on Node.js: ${{ matrix.node-version }} OS: ${{ matrix.os }}"
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: "Node.js ${{ matrix.node-version }}"
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm ci
@@ -29,12 +29,12 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18, 20]
+        node-version: [20, 22.5.1]
     name: "Test on Node.js ${{ matrix.node-version }}"
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: "Node.js ${{ matrix.node-version }}"
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm ci
@@ -43,10 +43,10 @@ jobs:
     runs-on: ubuntu-latest
     name: E2E
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
       - run: npm ci
       - run: npm run e2e

.node-version

@@ -1 +1 @@
-v20.11.1
+v22.4.1

README.md

@@ -12,7 +12,7 @@
 書籍版は次のページから購入できます。
 
 - 物理書籍とKindle: [JavaScript Primer 改訂2版 迷わないための入門書 | azu, Suguru Inatomi |本 | 通販 | Amazon](https://www.amazon.co.jp/dp/4048931105/)
-- PDFとepub: [JavaScript Primer 迷わないための入門書【委託】 - 達人出版会](https://tatsu-zine.com/books/javascript-primer) （2023-06-03時点では初版のままです）
+- PDFとepub: [JavaScript Primer 改訂2版【委託】 - 達人出版会](https://tatsu-zine.com/books/javascript-primer-2ed)
 
 ウェブ版と書籍版の内容は基本的には同じです。
 詳細は[ウェブ版と書籍版の違い](https://jsprimer.net/intro/#diff-with-print-version)を参照してください。
@@ -33,7 +33,13 @@ Open Collectiveでの支援には、サイト上にロゴを表示するとい
 
 - [JavaScript Primer - Open Collective](https://opencollective.com/jsprimer)
 
-[![jsprimer backers](https://opencollective.com/jsprimer/backers.svg?width=890)](https://opencollective.com/jsprimer#backers)
+**Gold Sponsors**
+
+[![jsprimer sponsors](https://opencollective.com/jsprimer/sponsors.svg?width=890&avatarHeight=80)](https://opencollective.com/jsprimer#sponsors)
+
+**Supporters**
+
+[![jsprimer backers](https://opencollective.com/jsprimer/backers.svg?width=890&avatarHeight=40)](https://opencollective.com/jsprimer#backers)
 
 
 また、書籍版へのレビューを書くことも支援に繋がります。
@@ -73,13 +79,13 @@ IssueやPull Requestについては、次のページを参照してください
 
     npm install
 
-Node.js v20.11.1以上とnpm 10.2.4以上が必要です。
+Node.js v22.4.1以上とnpm 10.8.2以上が必要です。
 
 ```
 $ node -v
-v20.11.1
+v22.4.1
 $ npm -v
-10.2.4
+10.8.2
 ```
 
 ## Usage

package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "version": "4.0.0",
   "description": "📖 JavaScript Primer - 迷わないための入門書",
-  "packageManager": "npm@10.2.4",
+  "packageManager": "npm@10.8.2+sha512.c7f0088c520a46596b85c6f8f1da943400199748a0f7ea8cb8df75469668dc26f6fb3ba26df87e2884a5ebe91557292d0f3db7d0929cdb4f14910c3032ac81fb",
   "type": "module",
   "directories": {
     "test": "test"
@@ -78,7 +78,7 @@
     "gitbook-plugin-custom-favicon": "0.0.4",
     "gitbook-plugin-github-issue-feedback": "^1.4.0",
     "gitbook-plugin-include-codeblock": "^3.2.3",
-    "gitbook-plugin-js-console": "^3.1.0",
+    "gitbook-plugin-js-console": "^3.2.0",
     "gitbook-plugin-page-toc-button": "^0.1.1",
     "gitbook-summary-to-path": "^1.1.0",
     "globby": "^11.0.4",

prh.yml

@@ -434,6 +434,16 @@ rules:
   - expected: $1個
     patterns: /([0-9]+)コ/i
     prh: "https://github.com/asciidwango/js-primer/issues/979"
+  - expected: 第一引数
+    patterns: 第1引数
+  - expected: 第二引数
+    patterns: 第2引数
+  - expected: 第三引数
+    patterns: 第3引数
+  - expected: 第四引数
+    patterns: 第4引数
+  - expected: 第五引数
+    patterns: 第5引数
 
   # 漢字開き
   - expected: 呼び出す

source/_layouts/website/header.html

@@ -4,6 +4,13 @@
 <link rel="author" href="https://www.hatena.ne.jp/efcl/"/>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"/>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+<!-- OGP -->
+<meta property="og:title" content="JavaScript Primer - 迷わないための入門書"/>
+<meta property="og:type" content="website"/>
+<meta property="og:url" content="https://jsprimer.net/"/>
+<meta property="og:image" content="https://jsprimer.net/landing/img/cover-optimized.jpg"/>
+<meta property="og:site_name" content="JavaScript Primer"/>
+<meta property="og:description" content="JavaScript Primerは、JavaScriptの基礎から応用までを一貫して学べる入門書です。"/>
 <style>
     .book-header {
         display: flex;

source/basic/array/README.md

@@ -978,7 +978,7 @@ console.log(totalValue); // => 6
 そのため、できる限り変数を`const`で宣言したい場合には`reduce`メソッドは有用です。
 一方で、`reduce`メソッドは可読性があまりよくないため、コードの意図が伝わりにくいというデメリットもあります。
 
-`reduce`メソッドには利点と可読性のトレードオフがありますが、利用する場合は`reduce`メソッドを扱う処理を関数で囲むなど処理の意図がわかるように工夫をする必要があります。
+`reduce`メソッドには利点と可読性のトレードオフがありますが、利用する場合は`reduce`メソッドを扱う処理を関数にするといった処理の意図がわかるように工夫をする必要があります。
 
 {{book.console}}
 ```js
@@ -991,6 +991,55 @@ function sum(array) {
 console.log(sum(array)); // => 6
 ```
 
+###  [ES2024] `Object.groupBy`静的メソッド {#object-group-by}
+
+`Array.prototype.reduce`メソッドを使うことで、配列から数値やオブジェクトなど任意の値を作成できます。
+
+先ほどは配列の合計の数値を計算する例でしたが、配列からオブジェクトを作成することもできます。
+配列からオブジェクトを作成したいユースケースとして、配列の要素を条件によってグループ分けしたいケースがあります。
+たとえば、数値からなる配列の要素を奇数と偶数の配列に分けたい場合などです。
+
+`Array.prototype.reduce`メソッドを使って、数値からなる配列を奇数と偶数に分けるコードは次のようになります。
+
+{{book.console}}
+```js
+const array = [1, 2, 3, 4, 5];
+const grouped = array.reduce((accumulator, currentValue) => {
+    // 2で割った余りが0なら偶数(even)、そうでないなら奇数(odd)
+    const key = currentValue % 2 === 0 ? "even" : "odd";
+    if (!accumulator[key]) {
+        accumulator[key] = [];
+    }
+    // グループ分けしたキーの配列に要素を追加
+    accumulator[key].push(currentValue);
+    return accumulator;
+}, {});
+console.log(grouped.even); // => [2, 4]
+console.log(grouped.odd); // => [1, 3, 5]
+```
+
+しかし、`reduce`メソッドは使い方がやや複雜であるため、可能なら避けたほうが読みやすいコードとなりやすいです。
+ES2024では、`Object.groupBy`静的メソッドが追加され、配列からグループ分けしたオブジェクトを作成できるようになっています。
+
+`Object.groupBy`静的メソッド[^1]には、第一引数に配列などのiterableオブジェクト、第二引数にグループ分けの条件を返すコールバック関数を渡します。
+第二引数のコールバック関数が返した値をキーとして、配列の要素をグループ分けしたオブジェクトが作成されます。
+
+先ほどのコードを`Object.groupBy`静的メソッドを使って書き換えると、次のようになります。
+
+{{book.console}}
+<!-- doctest:meta:{ "ECMAScript": "2024" } -->
+```js
+const array = [1, 2, 3, 4, 5];
+const grouped = Object.groupBy(array, (currentValue) => {
+    // currentValueが偶数なら"even"、そうでないなら"odd"の配列に追加される
+    return currentValue % 2 === 0 ? "even" : "odd";
+});
+console.log(grouped.even); // => [2, 4]
+console.log(grouped.odd); // => [1, 3, 5]
+```
+
+`Object.groupBy`静的メソッドを使うことで、配列からグループ分けしたオブジェクトを簡潔に作成できます。
+
 ## [コラム] Array-likeオブジェクト {#array-like}
 
 配列のように扱えるが配列ではないオブジェクトのことを、**Array-likeオブジェクト**と呼びます。
@@ -1030,7 +1079,7 @@ function myFunc() {
 myFunc("a", "b", "c");
 ```
 
-Array-likeオブジェクトは配列のようで配列ではないというもどかしさを持つオブジェクトです。`Array.from`メソッド<sup>[ES2015]</sup>を使うことでArray-likeオブジェクトを配列に変換して扱うことができます。一度配列に変換してしまえばArrayメソッドも利用できます。
+Array-likeオブジェクトは配列のようで配列ではないというもどかしさを持つオブジェクトです。`Array.from`静的メソッド<sup>[ES2015]</sup>を使うことでArray-likeオブジェクトを配列に変換して扱うことができます。一度配列に変換してしまえばArrayメソッドも利用できます。
 
 {{book.console}}
 ```js
@@ -1123,3 +1172,5 @@ console.log(versionNames); // => ["ECMAScript 1", "ECMAScript 2", "ECMAScript 3"
 [Lodash]: https://lodash.com/  "Lodash"
 [Immutable.js]: https://immutable-js.com/  "Immutable.js"
 [Arrayについてのドキュメント]: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
+
+[^1]: `Array.prototype.groupBy`メソッドのようなArrayのメソッドではないのは、同じメソッド名を実装するウェブサイトが多く存在しており後方互換性がなかったためです。

source/basic/async/README.md

@@ -390,7 +390,7 @@ delay(10).then(() => {
 ```
 
 一方、`then`メソッドでは失敗時のコールバック関数だけの登録もできます。
-このとき`then(undefined, onRejected)`のように第1引数には`undefined`を渡す必要があります。
+このとき`then(undefined, onRejected)`のように第一引数には`undefined`を渡す必要があります。
 `then(undefined, onRejected)`と同様のことを行う方法としてPromiseの`catch`メソッドが用意されています。
 
 次のコードでは`then`メソッドと`catch`メソッドで失敗時のエラー処理をしていますが、どちらも同じ意味となります。
@@ -1745,7 +1745,7 @@ ECMAScript 2015（ES2015）でPromiseが仕様に入るまで、非同期処理
 
 たとえば、Node.jsでは`fs.readFile`関数というファイルシステムからファイルをロードする非同期処理の関数があります。
 指定したパスのファイルを読むため、ファイルが存在しない場合やアクセス権限の問題から読み取りに失敗することがあります。
-そのため、`fs.readFile`関数の第2引数に渡すコールバック関数にはエラーファーストコールバックスタイルの関数を渡します。
+そのため、`fs.readFile`関数の第二引数に渡すコールバック関数にはエラーファーストコールバックスタイルの関数を渡します。
 
 ファイルを読み込むことに失敗した場合は、コールバック関数の1番目の引数に`Error`オブジェクトが渡されます。
 ファイルを読み込むことに成功した場合は、コールバック関数の1番目の引数に`null`、2番目の引数に読み込んだデータを渡します。
@@ -1767,10 +1767,10 @@ fs.readFile("./example.txt", (error, data) => {
 実際にエラーファーストコールバックで非同期な例外処理を扱うコードを書いてみましょう。
 
 次のコードの`dummyFetch`関数は、疑似的なリソースの取得をする非同期な処理です。
-第1引数に任意のパスを受け取り、第2引数にエラーファーストコールバックスタイルの関数を受け取ります。
+第一引数に任意のパスを受け取り、第二引数にエラーファーストコールバックスタイルの関数を受け取ります。
 
-この`dummyFetch`関数は、任意のパスにマッチするリソースがある場合には、第2引数のコールバック関数に`null`とレスポンスオブジェクトを渡して呼び出します。
-一方、任意のパスにマッチするリソースがない場合には、第2引数のコールバック関数にエラーオブジェクトを渡して呼び出します。
+この`dummyFetch`関数は、任意のパスにマッチするリソースがある場合には、第二引数のコールバック関数に`null`とレスポンスオブジェクトを渡して呼び出します。
+一方、任意のパスにマッチするリソースがない場合には、第二引数のコールバック関数にエラーオブジェクトを渡して呼び出します。
 
 {{book.console}}
 ```js