From ef14ff99391a0c6ef9506c17c5bdce8eeb8643d6 Mon Sep 17 00:00:00 2001 From: na-trium-144 <100704180+na-trium-144@users.noreply.github.com> Date: Thu, 27 Aug 2026 00:53:30 +0900 Subject: [PATCH 1/3] javascript 0,1 --- .../docs/javascript/0-intro/2-0-environment.md | 2 +- public/docs/javascript/0-intro/4-1-repl.md | 3 ++- public/docs/javascript/0-intro/4-3-browser.md | 3 ++- .../docs/javascript/1-basics/1-0-variable.md | 10 ++++++++-- .../javascript/1-basics/2-0-primitive-type.md | 7 +++++-- public/docs/javascript/1-basics/2-1-string.md | 7 ++++++- public/docs/javascript/1-basics/2-2-number.md | 7 ++++++- public/docs/javascript/1-basics/2-3-boolean.md | 6 ++++++ .../javascript/1-basics/2-4-undefined-null.md | 8 ++++++-- public/docs/javascript/1-basics/3-0-object.md | 6 ++++-- .../javascript/1-basics/3-1-const-object.md | 2 +- .../docs/javascript/1-basics/4-0-equality.md | 3 +++ .../javascript/1-basics/5-1-add-operator.md | 2 +- public/docs/javascript/1-basics/6-0-summary.md | 8 ++++---- .../docs/javascript/1-basics/6-1-practice1.md | 2 +- .../docs/javascript/1-basics/6-2-practice2.md | 4 ++-- .../docs/javascript/2-control/1-1-if-truthy.md | 18 ++++++++++-------- public/docs/javascript/2-control/1-2-switch.md | 2 +- .../docs/javascript/2-control/3-0-iteration.md | 4 ++-- public/docs/javascript/2-control/3-1-for-in.md | 4 ++-- public/docs/javascript/2-control/3-2-for-of.md | 18 +++++++++--------- public/docs/javascript/2-control/4-2-throw.md | 2 +- .../docs/javascript/2-control/5-0-summary.md | 6 +++--- .../docs/javascript/2-control/5-1-practice1.md | 2 +- .../docs/javascript/2-control/5-2-practice2.md | 6 +++--- .../javascript/3-functions-closures/-intro.md | 2 +- .../1-2-function-expression.md | 2 +- .../3-functions-closures/3-1-default-arg.md | 2 +- .../3-functions-closures/3-2-rest-arg.md | 2 +- .../3-functions-closures/4-0-scope-chain.md | 2 +- .../3-functions-closures/5-0-closure.md | 6 +++--- .../3-functions-closures/6-2-practice2.md | 2 +- .../docs/javascript/4-this/1-0-this-basic.md | 7 ++++--- .../docs/javascript/4-this/2-0-bind-basic.md | 2 +- .../docs/javascript/4-this/2-1-call-apply.md | 2 +- .../docs/javascript/4-this/3-0-arrow-func.md | 3 ++- public/docs/javascript/4-this/4-0-summary.md | 2 +- public/docs/javascript/4-this/4-2-practice2.md | 2 +- .../5-objects-prototype/1-0-obj-literal.md | 2 +- .../5-objects-prototype/1-1-properties.md | 2 +- .../2-0-method-this-recall.md | 4 ++-- .../5-objects-prototype/3-0-prototype-basic.md | 4 ++-- .../5-objects-prototype/4-0-prototype-chain.md | 8 ++++---- .../5-0-object-create-basic.md | 2 +- .../5-objects-prototype/5-1-object-create.md | 2 +- .../5-objects-prototype/6-0-summary.md | 4 ++-- .../5-objects-prototype/6-1-practice1.md | 4 ++-- .../javascript/6-classes/1-1-class-expr.md | 2 +- .../javascript/7-arrays/2-2-destructuring.md | 2 +- .../7-arrays/3-0-higher-order-func.md | 2 +- .../javascript/7-arrays/4-0-other-method.md | 6 +++--- .../javascript/8-promise/4-0-promise-basic.md | 4 ++-- .../docs/javascript/8-promise/6-0-summary.md | 2 +- .../docs/javascript/8-promise/7-2-practice2.md | 2 +- .../docs/javascript/9-async-await/3-0-fetch.md | 4 ++-- .../javascript/9-async-await/3-1-fetch-post.md | 2 +- 56 files changed, 138 insertions(+), 98 deletions(-) diff --git a/public/docs/javascript/0-intro/2-0-environment.md b/public/docs/javascript/0-intro/2-0-environment.md index 5b4ab82a..79194b80 100644 --- a/public/docs/javascript/0-intro/2-0-environment.md +++ b/public/docs/javascript/0-intro/2-0-environment.md @@ -15,7 +15,7 @@ JavaScriptはどこで動くのでしょうか？ かつてはブラウザの中 * **Webブラウザ (クライアントサイド):** * DOM (Document Object Model) 操作により、HTML/CSSを動的に書き換えます。 - * `window` オブジェクトがグローバルスコープです。 + * `window` [[オブジェクト]]がグローバルスコープです。 * セキュリティ上の制約（サンドボックス）があり、ローカルファイルへの直接アクセスなどは制限されています。 * **Node.js (サーバーサイド):** diff --git a/public/docs/javascript/0-intro/4-1-repl.md b/public/docs/javascript/0-intro/4-1-repl.md index 790ea5fc..3523555a 100644 --- a/public/docs/javascript/0-intro/4-1-repl.md +++ b/public/docs/javascript/0-intro/4-1-repl.md @@ -22,4 +22,5 @@ undefined 3 ``` -※ `undefined` は `console.log` 関数の戻り値が表示されています。 +> [!TIP] +> [[`undefined`]] は `console.log` 関数の戻り値が表示されています。 diff --git a/public/docs/javascript/0-intro/4-3-browser.md b/public/docs/javascript/0-intro/4-3-browser.md index dba004fb..93857c66 100644 --- a/public/docs/javascript/0-intro/4-3-browser.md +++ b/public/docs/javascript/0-intro/4-3-browser.md @@ -26,5 +26,6 @@ question: ブラウザの開発者ツール（Consoleタブ）にメッセージが表示され、ポップアップウィンドウが出れば成功です。 -my.code(); のチュートリアルでは主にJavaScriptの文法や基本的な機能を中心に扱います。 +> [!NOTE] +> my.code(); のチュートリアルでは主にJavaScriptの文法や基本的な機能を中心に扱います。 HTMLやCSSとあわせたウェブアプリケーション開発の基礎については [ut.code(); Learn](https://learn.utcode.net) で学ぶことができます。 diff --git a/public/docs/javascript/1-basics/1-0-variable.md b/public/docs/javascript/1-basics/1-0-variable.md index 0d12f8bc..e7d2a4d9 100644 --- a/public/docs/javascript/1-basics/1-0-variable.md +++ b/public/docs/javascript/1-basics/1-0-variable.md @@ -8,6 +8,11 @@ question: - varを使うべきではないとありますが、varを使うとどのような悪いことが起こるのですか？ - 巻き上げ（Hoisting）とは、具体的にどのような現象ですか？ - '`console.log("let output:", blockScoped);` がReferenceErrorになるのはなぜですか？' +term: + - let + - const + - var + - 変数 --- ## 変数宣言: let, const, var @@ -20,8 +25,9 @@ ES6（2015年）で導入された `const` と `let` は、C++やJava、C\#な * **const**: 再代入不可能な変数を宣言します。定数だけでなく、再代入しない変数はすべてこれで宣言します。 * **let**: 再代入可能な変数を宣言します。ループカウンタや、状態が変わる値に使用します。 - -なぜ `var` を使うべきではないのでしょうか。それは `var` が**関数スコープ**であり、意図しない変数の共有や「巻き上げ（Hoisting）」によるバグを引き起こしやすいからです。 +> [!WARNING] +> もう一つの変数を宣言する古いキーワードとして `var` があります。 +> `var` は**関数スコープ**であり、意図しない変数の共有や「巻き上げ（Hoisting）」によるバグを引き起こしやすいため、現在は `const` や `let` を使うことが推奨されています。 以下のコードで、スコープの違いを確認してみましょう。 diff --git a/public/docs/javascript/1-basics/2-0-primitive-type.md b/public/docs/javascript/1-basics/2-0-primitive-type.md index d0c4a815..f44c5241 100644 --- a/public/docs/javascript/1-basics/2-0-primitive-type.md +++ b/public/docs/javascript/1-basics/2-0-primitive-type.md @@ -6,11 +6,14 @@ question: - プリミティブ型とは、ざっくり言うとどういう値のことですか？ - プリミティブ型がイミュータブル（変更不可）というのは、どういう状態を指しますか？ - SymbolやBigIntは、通常の開発でどのくらいの頻度で使うものですか？ +term: + - プリミティブ + - プリミティブ型 --- ## データ型: プリミティブ型 -JavaScriptは動的型付け言語であり、変数は特定の型に紐付きませんが、値自体は型を持っています。JavaScriptの値は大きく分けて「プリミティブ型」と「オブジェクト（参照）型」に分類されます。 +JavaScriptは動的型付け言語であり、[[変数]]は特定の型に紐付きませんが、値自体は型を持っています。JavaScriptの値は大きく分けて「プリミティブ型」と「オブジェクト（参照）型」に分類されます。 プリミティブ型はイミュータブル（変更不可）であり、以下の7種類が存在します。 @@ -19,7 +22,7 @@ JavaScriptは動的型付け言語であり、変数は特定の型に紐付き 3. **Boolean**: `true` または `false` 4. **undefined**: 「値が未定義である」ことを表す型 5. **null**: 「値が存在しない」ことを意図的に示す型 -6. **Symbol**: 一意で不変な識別子（主にオブジェクトのプロパティキー用途） +6. **Symbol**: 一意で不変な識別子（主に[[オブジェクト]]のプロパティキー用途） 7. **BigInt**: `Number`型では表現できない巨大な整数を扱う型（末尾に `n`） この章では、まず最もよく使う `String` / `Number` / `Boolean` / `undefined` / `null` を順に見ていきます。`Symbol` と `BigInt` は用途が限定的なため、ここでは「プリミティブ型の一種」であることだけ押さえれば十分です。 diff --git a/public/docs/javascript/1-basics/2-1-string.md b/public/docs/javascript/1-basics/2-1-string.md index 4049c6de..d1e346d5 100644 --- a/public/docs/javascript/1-basics/2-1-string.md +++ b/public/docs/javascript/1-basics/2-1-string.md @@ -6,13 +6,18 @@ question: - シングルクォートとダブルクォートで文字列を囲むことの違いは何ですか？ - テンプレートリテラルは、どんな場面で使うと便利ですか？ - テンプレートリテラルの `${}` の中に計算式を書けますか？ +term: + - 文字列 + - String + - string + - テンプレートリテラル --- ### 文字列（String） JavaScriptの文字列は、シングルクォート (`'`) またはダブルクォート (`"`) で作成します。 -また、バッククォート (`` ` ``) で囲む**テンプレートリテラル**を使うと、変数や式を文字列に埋め込めます。文字列の連結（`+`）より読みやすくなることが多いため、こちらを使うのが一般的です。 +また、バッククォート (`` ` ``) で囲む**テンプレートリテラル**を使うと、[[変数]]や式を文字列に埋め込めます。文字列の連結（`+`）より読みやすくなることが多いため、こちらを使うのが一般的です。 ```js-repl > const name = "Ada"; diff --git a/public/docs/javascript/1-basics/2-2-number.md b/public/docs/javascript/1-basics/2-2-number.md index 1aef07a8..99a3c317 100644 --- a/public/docs/javascript/1-basics/2-2-number.md +++ b/public/docs/javascript/1-basics/2-2-number.md @@ -6,6 +6,10 @@ question: - JavaScriptで整数と小数を区別しないのは、どういう意味ですか？ - 除算や剰余など、基本的な計算はどのように書けば良いですか？ - 小数計算で誤差が出ることがあるのはなぜですか？ +term: + - 数値 + - Number + - number --- ### 数値（Number） @@ -35,4 +39,5 @@ undefined 0.30000000000000004 ``` -`0.1 + 0.2` のような小数計算で誤差が出るのは、JavaScriptが数値を内部的に2進数の浮動小数点として扱うためです。 +> [!TIP] +> `0.1 + 0.2` のような小数計算で誤差が出るのは、JavaScriptが数値を内部的に2進数の浮動小数点として扱うためです。 diff --git a/public/docs/javascript/1-basics/2-3-boolean.md b/public/docs/javascript/1-basics/2-3-boolean.md index b2492797..2f59067c 100644 --- a/public/docs/javascript/1-basics/2-3-boolean.md +++ b/public/docs/javascript/1-basics/2-3-boolean.md @@ -5,6 +5,12 @@ level: 3 question: - Boolean型はどんな場面で使いますか？ - '`true` / `false` は文字列の `"true"` / `"false"` と何が違いますか？' +term: + - 真偽値 + - Boolean + - boolean + - "true" + - "false" --- ### 真偽値（Boolean） diff --git a/public/docs/javascript/1-basics/2-4-undefined-null.md b/public/docs/javascript/1-basics/2-4-undefined-null.md index 4b856986..7e721252 100644 --- a/public/docs/javascript/1-basics/2-4-undefined-null.md +++ b/public/docs/javascript/1-basics/2-4-undefined-null.md @@ -6,13 +6,16 @@ question: - undefinedとnullは、どう使い分けるのが良いですか？ - 変数を宣言しただけの状態がundefinedになるのはなぜですか？ - '`typeof null` が `''object''` になるのは本当に正しいのですか？' +term: + - "undefined" + - "null" --- ### undefined と null 他言語経験者が最初に混乱しやすいのが、この `undefined` と `null` の違いです。 -- **undefined**: JavaScriptエンジンが「値がまだない」ことを示すときに現れます（例: 宣言だけして代入していない変数）。 +- **undefined**: JavaScriptエンジンが「値がまだない」ことを示すときに現れます（例: 宣言だけして代入していない[[変数]]）。 - **null**: プログラマが「ここには値がない」と明示したいときに代入します。 ```js-repl @@ -28,4 +31,5 @@ undefined 'object' ``` -`typeof null` が `'object'` になるのは、JavaScript初期から残っている歴史的な仕様です。`null` 自体はオブジェクトではなく、プリミティブ型の値です。 +> [!INFO] +> `typeof null` が `'object'` になるのは、JavaScript初期から残っている歴史的な仕様です。`null` 自体は[[オブジェクト]]ではなく、[[プリミティブ型]]の値です。 diff --git a/public/docs/javascript/1-basics/3-0-object.md b/public/docs/javascript/1-basics/3-0-object.md index 085f07b6..8748b936 100644 --- a/public/docs/javascript/1-basics/3-0-object.md +++ b/public/docs/javascript/1-basics/3-0-object.md @@ -6,17 +6,19 @@ question: - オブジェクト（参照型）とプリミティブ型は、メモリ上で具体的にどのように違うのですか？ - JavaScriptでは関数もオブジェクトとありますが、これはどういうメリットがありますか？ - キーと値のペアの集合、というのは具体的にどんなものですか？ +term: + - オブジェクト --- ## データ型: オブジェクト型 -プリミティブ以外のすべての値は**オブジェクト（参照型）**です。これらはメモリ上のアドレス（参照）として扱われます。 +[[プリミティブ]]以外のすべての値は**オブジェクト（参照型）**です。これらはメモリ上のアドレス（参照）として扱われます。 主なオブジェクト型には以下があります。 * **Object**: キーと値のペアの集合（辞書、ハッシュマップに近い）。詳しくは[[./5]]で解説します。 * **Array**: 順序付きリスト。詳しくは[[./7]]で解説します。 - * **Function**: JavaScriptでは関数もオブジェクトであり、変数に代入したり引数として渡すことができます（第一級関数）。 + * **Function**: JavaScriptでは関数もオブジェクトであり、[[変数]]に代入したり引数として渡すことができます（第一級関数）。 ```js-repl > // Object: キーと値のペアの集合 diff --git a/public/docs/javascript/1-basics/3-1-const-object.md b/public/docs/javascript/1-basics/3-1-const-object.md index 0356d712..d9e7ff54 100644 --- a/public/docs/javascript/1-basics/3-1-const-object.md +++ b/public/docs/javascript/1-basics/3-1-const-object.md @@ -10,7 +10,7 @@ question: ### const とオブジェクトの変更 -重要な点として、`const` で宣言した変数は「再代入」ができませんが、中身がオブジェクトの場合、**プロパティの変更は可能**です。これは `const` が「参照先のメモリアドレス」を固定するものであり、ヒープ領域にあるデータそのものを不変にするわけではないためです。 +重要な点として、[[`const`]] で宣言した変数は「再代入」ができませんが、中身が[[オブジェクト]]の場合、**プロパティの変更は可能**です。これは [[`const`]] が「参照先のメモリアドレス」を固定するものであり、ヒープ領域にあるデータそのものを不変にするわけではないためです。 ```js:object_mutation.js const user = { diff --git a/public/docs/javascript/1-basics/4-0-equality.md b/public/docs/javascript/1-basics/4-0-equality.md index e68d9b59..7df51b79 100644 --- a/public/docs/javascript/1-basics/4-0-equality.md +++ b/public/docs/javascript/1-basics/4-0-equality.md @@ -7,6 +7,9 @@ question: - 「暗黙的な型変換」とは、具体的にJavaScriptが何をしているのですか？ - '`1 == "1"` がtrueになるのは、どのようなプロセスでそうなるのですか？' - '`null == undefined` がtrueになるのは、特別なルールがあるのですか？' +term: + - 等価演算子 + - 厳密等価演算子 --- ## 演算子と等価性 (== vs ===) diff --git a/public/docs/javascript/1-basics/5-1-add-operator.md b/public/docs/javascript/1-basics/5-1-add-operator.md index 1779c9de..60fcae64 100644 --- a/public/docs/javascript/1-basics/5-1-add-operator.md +++ b/public/docs/javascript/1-basics/5-1-add-operator.md @@ -12,7 +12,7 @@ question: JavaScriptは文脈に応じて勝手に型を変換しようとします。 -`+` 演算子は、数値の加算だけでなく文字列の連結にも使われます。片方が文字列であれば、もう片方も文字列に変換されて連結されます。 +`+` 演算子は、[[数値]]の加算だけでなく[[文字列]]の連結にも使われます。片方が[[文字列]]であれば、もう片方も文字列に変換されて連結されます。 ```js-repl > 10 + 20 diff --git a/public/docs/javascript/1-basics/6-0-summary.md b/public/docs/javascript/1-basics/6-0-summary.md index 17bd1b0d..ed4470f4 100644 --- a/public/docs/javascript/1-basics/6-0-summary.md +++ b/public/docs/javascript/1-basics/6-0-summary.md @@ -7,7 +7,7 @@ question: [] ## この章のまとめ - * 変数は `const` をデフォルトとし、再代入が必要な場合のみ `let` を使う。`var` は使用しない。 - * プリミティブ型は値渡し、オブジェクト型（配列含む）は参照渡しである。 - * `const` で宣言したオブジェクトの中身は変更可能である。 - * 比較には必ず `===`（厳密等価演算子）を使用し、`==` による暗黙の型変換を避ける。 + * [[変数]]は [[`const`]] をデフォルトとし、再代入が必要な場合のみ [[`let`]] を使う。[[`var`]] は使用しない。 + * [[プリミティブ型]]は値渡し、[[オブジェクト]]型（配列含む）は参照渡しである。 + * [[`const`]] で宣言した[[オブジェクト]]の中身は変更可能である。 + * 比較には必ず `===`（[[厳密等価演算子]]）を使用し、`==` による暗黙の型変換を避ける。 diff --git a/public/docs/javascript/1-basics/6-1-practice1.md b/public/docs/javascript/1-basics/6-1-practice1.md index e3306933..c9a871d5 100644 --- a/public/docs/javascript/1-basics/6-1-practice1.md +++ b/public/docs/javascript/1-basics/6-1-practice1.md @@ -9,7 +9,7 @@ question: ### 練習問題1: テンプレートリテラル -`itemName` という変数に商品名（文字列）、`price` という変数に価格（数値）、`stock` という変数に在庫数（数値）をそれぞれ代入してください。その後、テンプレートリテラルを使って「商品: [商品名], 価格: [価格]円, 在庫: [在庫数]個」という形式の文字列を作り、`console.log()` で出力するコードを書いてみましょう。 +`itemName` という[[変数]]に商品名（[[文字列]]）、`price` という[[変数]]に価格（[[数値]]）、`stock` という[[変数]]に在庫数（[[数値]]）をそれぞれ代入してください。その後、[[テンプレートリテラル]]を使って「商品: [商品名], 価格: [価格]円, 在庫: [在庫数]個」という形式の[[文字列]]を作り、`console.log()` で出力するコードを書いてみましょう。 ```js:practice2_1.js ``` diff --git a/public/docs/javascript/1-basics/6-2-practice2.md b/public/docs/javascript/1-basics/6-2-practice2.md index eaa994d6..fe984f39 100644 --- a/public/docs/javascript/1-basics/6-2-practice2.md +++ b/public/docs/javascript/1-basics/6-2-practice2.md @@ -9,8 +9,8 @@ question: ### 練習問題2: constとオブジェクトの変更 -`const` を使って、`name`（商品名・文字列）と `price`（価格・数値）を持つ商品オブジェクト `product` を作成してください。 -次に、`price` を別の値に変更し、さらに `stock`（在庫数・数値）プロパティを新たに追加してから、`console.log()` でオブジェクトの内容を出力してみましょう。 +[[`const`]] を使って、`name`（商品名・[[文字列]]）と `price`（価格・[[数値]]）を持つ商品[[オブジェクト]] `product` を作成してください。 +次に、`price` を別の値に変更し、さらに `stock`（在庫数・[[数値]]）プロパティを新たに追加してから、`console.log()` で[[オブジェクト]]の内容を出力してみましょう。 ```js:practice2_2.js ``` diff --git a/public/docs/javascript/2-control/1-1-if-truthy.md b/public/docs/javascript/2-control/1-1-if-truthy.md index 7b2b8d56..91b2716f 100644 --- a/public/docs/javascript/2-control/1-1-if-truthy.md +++ b/public/docs/javascript/2-control/1-1-if-truthy.md @@ -14,22 +14,24 @@ question: 基本的な `if` 文の構造はC言語やJavaと同様です。しかし、条件式における評価はJavaScript特有の**Truthy（真と見なされる値）**と**Falsy（偽と見なされる値）**の概念を理解する必要があります。 -厳密な `true` / `false` だけでなく、あらゆる値が条件式の中で真偽判定されます。 +厳密な [[`true`]] / [[`false`]] だけでなく、あらゆる値が条件式の中で真偽判定されます。 -**Falsyな値（falseとして扱われるもの）:** +**Falsyな値（[[false]]として扱われるもの）:** - * `false` + * [[`false`]] * `0`, `-0`, `0n` (BigInt) * `""` (空文字) - * `null` - * `undefined` + * [[`null`]] + * [[`undefined`]] * `NaN` -**Truthyな値（trueとして扱われるもの）:** +**Truthyな値（[[true]]として扱われるもの）:** * 上記Falsy以外すべて - * **注意:** 空の配列 `[]` や 空のオブジェクト `{}` は **Truthy** です（Pythonなどの経験者は注意が必要です）。 - * 文字列の `"0"` や `"false"` もTruthyです。 + +> [!WARNING] +> * 空の配列 `[]` や 空の[[オブジェクト]] `{}` は **Truthy** です（Pythonなどの経験者は注意が必要です）。 +> * [[文字列]]の `"0"` や `"false"` もTruthyです。 ```js-repl > if (0) { 'True'; } else { 'False'; } diff --git a/public/docs/javascript/2-control/1-2-switch.md b/public/docs/javascript/2-control/1-2-switch.md index b3db7012..926e3a78 100644 --- a/public/docs/javascript/2-control/1-2-switch.md +++ b/public/docs/javascript/2-control/1-2-switch.md @@ -11,7 +11,7 @@ question: ## `switch`文 -`switch` 文も標準的ですが、比較が **厳密等価演算子 (`===`)** で行われる点に注意してください。型変換は行われません。 +`switch` 文も標準的ですが、比較が **[[厳密等価演算子]] (`===`)** で行われる点に注意してください。型変換は行われません。 ```js:switch_example.js const status = "200"; // 文字列 diff --git a/public/docs/javascript/2-control/3-0-iteration.md b/public/docs/javascript/2-control/3-0-iteration.md index 1a920d30..61845227 100644 --- a/public/docs/javascript/2-control/3-0-iteration.md +++ b/public/docs/javascript/2-control/3-0-iteration.md @@ -13,5 +13,5 @@ question: | 構文 | 取得するもの | 対象 | 推奨ユースケース | | :--- | :--- | :--- | :--- | -| **`for...in`** | **キー (Key)** | Object | オブジェクトのプロパティ調査 | -| **`for...of`** | **値 (Value)** | Array, String, Map, Set | 配列やリストデータの処理 | +| **`for...in`** | **キー (Key)** | Object | [[オブジェクト]]のプロパティ調査 | +| **`for...of`** | **値 (Value)** | Array, [[String]], Map, Set | 配列やリストデータの処理 | diff --git a/public/docs/javascript/2-control/3-1-for-in.md b/public/docs/javascript/2-control/3-1-for-in.md index 1563ce1b..f22f81db 100644 --- a/public/docs/javascript/2-control/3-1-for-in.md +++ b/public/docs/javascript/2-control/3-1-for-in.md @@ -9,8 +9,8 @@ question: ### `for...in` ループ（プロパティ名の列挙） -`for...in` はオブジェクトの **キー（プロパティ名）** を列挙するために設計されています。 -配列に対して使用すると、インデックス（"0", "1", ...）が文字列として返ってくるだけでなく、プロトタイプチェーン上のプロパティまで列挙してしまうリスクがあるため、**配列への使用は推奨されません**。 +`for...in` は[[オブジェクト]]の **キー（プロパティ名）** を列挙するために設計されています。 +配列に対して使用すると、インデックス（"0", "1", ...）が[[文字列]]として返ってくるだけでなく、プロトタイプチェーン上のプロパティまで列挙してしまうリスクがあるため、**配列への使用は推奨されません**。 ```js:for_in_example.js const user = { diff --git a/public/docs/javascript/2-control/3-2-for-of.md b/public/docs/javascript/2-control/3-2-for-of.md index 46d3445a..269aaf63 100644 --- a/public/docs/javascript/2-control/3-2-for-of.md +++ b/public/docs/javascript/2-control/3-2-for-of.md @@ -12,7 +12,7 @@ question: ### `for...of` ループ（反復可能オブジェクトの走査） ES2015 (ES6) で導入された `for...of` は、**値（Values）** を反復します。 -配列、文字列、Map、Setなどの **Iterable（反復可能）** なオブジェクトに対して使用します。配列の中身を順番に処理したい場合は、こちらが正解です。 +配列、[[文字列]]、Map、Setなどの **Iterable（反復可能）** な[[オブジェクト]]に対して使用します。配列の中身を順番に処理したい場合は、こちらが正解です。 ```js:for_of_example.js const languages = ["JavaScript", "Python", "Go"]; @@ -37,11 +37,11 @@ A I ``` -> **Tips:** オブジェクトの中身を `for...of` で回したい場合は、`Object.keys()`, `Object.values()`, `Object.entries()` を使うのがモダンな手法です。 - -```js -const obj = { a: 1, b: 2 }; -for (const [key, val] of Object.entries(obj)) { - console.log(key, val); -} -``` +> [!TIP] +> [[オブジェクト]]の中身を `for...of` で回したい場合は、`Object.keys()`, `Object.values()`, `Object.entries()` を使うのがモダンな手法です。 +> ```js +> const obj = { a: 1, b: 2 }; +> for (const [key, val] of Object.entries(obj)) { +> console.log(key, val); +> } +>``` diff --git a/public/docs/javascript/2-control/4-2-throw.md b/public/docs/javascript/2-control/4-2-throw.md index 4200cc9e..59d6c1d9 100644 --- a/public/docs/javascript/2-control/4-2-throw.md +++ b/public/docs/javascript/2-control/4-2-throw.md @@ -9,7 +9,7 @@ question: ### `throw` について -JavaScriptでは `throw` で例外を投げることができます。`Error` オブジェクトを投げるのが一般的ですが、技術的には文字列や数値など、任意の値を投げることが可能です（ただし、スタックトレースが取れなくなるため推奨されません）。 +JavaScriptでは `throw` で例外を投げることができます。`Error` [[オブジェクト]]を投げるのが一般的ですが、技術的には[[文字列]]や[[数値]]など、任意の値を投げることが可能です（ただし、スタックトレースが取れなくなるため推奨されません）。 ```js-repl > try { throw new Error("Something went wrong"); } catch (e) { console.log(e.message); } diff --git a/public/docs/javascript/2-control/5-0-summary.md b/public/docs/javascript/2-control/5-0-summary.md index 07d87050..efc91109 100644 --- a/public/docs/javascript/2-control/5-0-summary.md +++ b/public/docs/javascript/2-control/5-0-summary.md @@ -7,8 +7,8 @@ question: [] ## この章のまとめ - * **条件分岐:** `if` 文での `[]` や `{}` は Truthy であることに注意。`switch` は厳密等価 (`===`) で判定される。 + * **条件分岐:** `if` 文での `[]` や `{}` は Truthy であることに注意。`switch` は[[厳密等価演算子]] (`===`) で判定される。 * **繰り返し:** 古典的な `for`, `while` は他のC系言語と同じ。 - * **for...in:** オブジェクトの **キー** を列挙する。配列には使わないこと。 + * **for...in:** [[オブジェクト]]の **キー** を列挙する。配列には使わないこと。 * **for...of:** 配列やコレクションの **値** を反復する。リスト処理の標準。 - * **例外処理:** `try...catch...finally` で行う。`throw` は任意の値を投げられるが、通常は `Error` オブジェクトを使用する。 + * **例外処理:** `try...catch...finally` で行う。`throw` は任意の値を投げられるが、通常は `Error` [[オブジェクト]]を使用する。 diff --git a/public/docs/javascript/2-control/5-1-practice1.md b/public/docs/javascript/2-control/5-1-practice1.md index d3400afd..7b6a462d 100644 --- a/public/docs/javascript/2-control/5-1-practice1.md +++ b/public/docs/javascript/2-control/5-1-practice1.md @@ -9,7 +9,7 @@ question: ### 練習問題1: 配列のフィルタリングと集計 -以下の数値が入った配列 `numbers` があります。 +以下の[[数値]]が入った配列 `numbers` があります。 `for...of` ループを使用して、**偶数かつ10より大きい数値** だけを抽出し、その合計値を計算してコンソールに出力するプログラムを書いてください。 ```js:practice3_1.js diff --git a/public/docs/javascript/2-control/5-2-practice2.md b/public/docs/javascript/2-control/5-2-practice2.md index c9f0fb29..06737881 100644 --- a/public/docs/javascript/2-control/5-2-practice2.md +++ b/public/docs/javascript/2-control/5-2-practice2.md @@ -11,13 +11,13 @@ question: 以下の仕様を満たす関数 `executeCommand(command)` を `switch` 文と `try...catch` を用いて作成してください。 -1. 引数 `command` は文字列を受け取る。 +1. 引数 `command` は[[文字列]]を受け取る。 2. `"start"` の場合、"System starting..." を出力。 3. `"stop"` の場合、"System stopping..." を出力。 -4. それ以外の文字列の場合、`Error` オブジェクトを `throw` する（メッセージは "Unknown command"）。 +4. それ以外の文字列の場合、`Error` [[オブジェクト]]を `throw` する（メッセージは "Unknown command"）。 5. `try...catch` ブロックを用いてこの関数を呼び出し、エラーが発生した場合は "Error caught: Unknown command" のように出力する。 -**ヒント:** `command` が `null` や `undefined` の場合もエラーとして処理されるように実装してください。 +**ヒント:** `command` が [[`null`]] や [[`undefined`]] の場合もエラーとして処理されるように実装してください。 ```js:practice3_2.js function executeCommand(command) { diff --git a/public/docs/javascript/3-functions-closures/-intro.md b/public/docs/javascript/3-functions-closures/-intro.md index f7774631..b20b9a95 100644 --- a/public/docs/javascript/3-functions-closures/-intro.md +++ b/public/docs/javascript/3-functions-closures/-intro.md @@ -1 +1 @@ -JavaScriptにおいて関数はオブジェクトの一種です。つまり、変数に代入したり、他の関数の引数として渡したり、関数から戻り値として返したりすることができます。この柔軟性が、JavaScriptの設計パターンの核心を担っています。 +JavaScriptにおいて関数はオブジェクトの一種です。つまり、[[変数]]に代入したり、他の関数の引数として渡したり、関数から戻り値として返したりすることができます。この柔軟性が、JavaScriptの設計パターンの核心を担っています。 diff --git a/public/docs/javascript/3-functions-closures/1-2-function-expression.md b/public/docs/javascript/3-functions-closures/1-2-function-expression.md index 5cca63f2..453439d1 100644 --- a/public/docs/javascript/3-functions-closures/1-2-function-expression.md +++ b/public/docs/javascript/3-functions-closures/1-2-function-expression.md @@ -10,7 +10,7 @@ question: ### 2\. 関数式 (Function Expression) -変数に関数を代入するスタイルです。変数の代入は実行時に行われるため、定義する前に呼び出すとエラーになります。現代のJavaScript開発では、意図しない巻き上げを防ぐためにこちら（または後述のアロー関数）が好まれる傾向にあります。 +[[変数]]に関数を代入するスタイルです。[[変数]]の代入は実行時に行われるため、定義する前に呼び出すとエラーになります。現代のJavaScript開発では、意図しない巻き上げを防ぐためにこちら（または後述のアロー関数）が好まれる傾向にあります。 ```js:function_expression.js // 定義前に呼び出すと... ReferenceError: Cannot access 'sayHi' before initialization diff --git a/public/docs/javascript/3-functions-closures/3-1-default-arg.md b/public/docs/javascript/3-functions-closures/3-1-default-arg.md index 32c4a627..6f628690 100644 --- a/public/docs/javascript/3-functions-closures/3-1-default-arg.md +++ b/public/docs/javascript/3-functions-closures/3-1-default-arg.md @@ -9,7 +9,7 @@ question: ### デフォルト引数 -引数が渡されなかった場合（または `undefined` の場合）に使用される初期値を設定できます。 +引数が渡されなかった場合（または [[`undefined`]] の場合）に使用される初期値を設定できます。 ```js:default_args.js const connect = (host = 'localhost', port = 8080) => { diff --git a/public/docs/javascript/3-functions-closures/3-2-rest-arg.md b/public/docs/javascript/3-functions-closures/3-2-rest-arg.md index 62e6f624..34e56e71 100644 --- a/public/docs/javascript/3-functions-closures/3-2-rest-arg.md +++ b/public/docs/javascript/3-functions-closures/3-2-rest-arg.md @@ -10,7 +10,7 @@ question: ### Restパラメータ (残余引数) -引数の数が不定の場合、`...` を使うことで、残りの引数を**配列として**受け取ることができます。以前は `arguments` オブジェクトを使っていましたが、Restパラメータの方が配列メソッド（`map`, `reduce`など）を直接使えるため便利です。 +引数の数が不定の場合、`...` を使うことで、残りの引数を**配列として**受け取ることができます。以前は `arguments` [[オブジェクト]]を使っていましたが、Restパラメータの方が配列メソッド（`map`, `reduce`など）を直接使えるため便利です。 ```js:rest_params.js const sum = (...numbers) => { diff --git a/public/docs/javascript/3-functions-closures/4-0-scope-chain.md b/public/docs/javascript/3-functions-closures/4-0-scope-chain.md index a5802350..3b4ad332 100644 --- a/public/docs/javascript/3-functions-closures/4-0-scope-chain.md +++ b/public/docs/javascript/3-functions-closures/4-0-scope-chain.md @@ -10,7 +10,7 @@ question: ## スコープチェーンとレキシカルスコープ -JavaScriptの変数の有効範囲（スコープ）を理解するために、「レキシカルスコープ」という概念を知る必要があります。 +JavaScriptの[[変数]]の有効範囲（スコープ）を理解するために、「レキシカルスコープ」という概念を知る必要があります。 * **レキシカルスコープ (Lexical Scope):** 関数が「どこで呼び出されたか」ではなく、**「どこで定義されたか」**によってスコープが決まるというルールです。 * **スコープチェーン (Scope Chain):** 変数を探す際、現在のスコープになければ、定義時の外側のスコープへと順番に探しに行く仕組みです。 diff --git a/public/docs/javascript/3-functions-closures/5-0-closure.md b/public/docs/javascript/3-functions-closures/5-0-closure.md index bef83fd0..d31558a7 100644 --- a/public/docs/javascript/3-functions-closures/5-0-closure.md +++ b/public/docs/javascript/3-functions-closures/5-0-closure.md @@ -11,15 +11,15 @@ question: ## クロージャ：関数が状態を持つ仕組み クロージャ (Closure) は、この章の最重要トピックです。 -一言で言えば、**「外側の関数のスコープにある変数を、外側の関数の実行終了後も参照し続ける関数」**のことです。 +一言で言えば、**「外側の関数のスコープにある[[変数]]を、外側の関数の実行終了後も参照し続ける関数」**のことです。 **なぜクロージャを使うのか？** -1. **カプセル化 (Encapsulation):** 変数を隠蔽し、特定の関数経由でしか変更できないようにすることで、予期せぬバグを防ぎます。 +1. **カプセル化 (Encapsulation):** [[変数]]を隠蔽し、特定の関数経由でしか変更できないようにすることで、予期せぬバグを防ぎます。 2. **状態の保持:** グローバル変数を使わずに、関数単位で永続的な状態を持てます。 3. **関数ファクトリ:** 設定の異なる関数を動的に生成する場合に役立ちます。 -プライベートな変数を持つカウンタを作ってみましょう。 +プライベートな[[変数]]を持つカウンタを作ってみましょう。 通常、関数(`createCounter`)の実行が終わると、そのローカル変数(`count`)はメモリから破棄されます。しかし、その変数を参照している内部関数(`increment`)が存在し、その内部関数が外部に返された場合、変数は破棄されずに保持され続けます。 diff --git a/public/docs/javascript/3-functions-closures/6-2-practice2.md b/public/docs/javascript/3-functions-closures/6-2-practice2.md index 6fda2513..7eb3601d 100644 --- a/public/docs/javascript/3-functions-closures/6-2-practice2.md +++ b/public/docs/javascript/3-functions-closures/6-2-practice2.md @@ -7,7 +7,7 @@ question: [] ### 問題2: クロージャによる掛け算生成器 -`createMultiplier` という関数を作成してください。この関数は数値 `x` を引数に取り、呼び出すたびに「引数を `x` 倍して返す関数」を返します。 +`createMultiplier` という関数を作成してください。この関数は[[数値]] `x` を引数に取り、呼び出すたびに「引数を `x` 倍して返す関数」を返します。 **使用例:** diff --git a/public/docs/javascript/4-this/1-0-this-basic.md b/public/docs/javascript/4-this/1-0-this-basic.md index 4d8bdad1..dfdb801b 100644 --- a/public/docs/javascript/4-this/1-0-this-basic.md +++ b/public/docs/javascript/4-this/1-0-this-basic.md @@ -18,9 +18,9 @@ JavaScriptにおける関数（アロー関数を除く）の `this` は、**「 大きく分けて、以下の3つのパターンを理解すれば基本は押さえられます。 -* **メソッド呼び出し:** オブジェクトのプロパティとして関数を呼び出した場合（`obj.method()`）、`this` は**ドットの左側のオブジェクト**（レシーバ）になります。これは他の言語のメンバ関数に近い挙動です。 +* **メソッド呼び出し:** [[オブジェクト]]のプロパティとして関数を呼び出した場合（`obj.method()`）、`this` は**ドットの左側の[[オブジェクト]]**（レシーバ）になります。これは他の言語のメンバ関数に近い挙動です。 * **関数呼び出し:** 関数を単体で呼び出した場合（`func()`）、`this` は**グローバルオブジェクト**（ブラウザでは `window`、Node.jsでは `global`）になります。 -ただし、**Strict Mode（`"use strict"`）**では、安全のため `undefined` になります。 +ただし、**Strict Mode（`"use strict"`）**では、安全のため [[`undefined`]] になります。 * **コンストラクタ呼び出し:** `new` キーワードをつけて呼び出した場合、`this` は**新しく生成されたインスタンス**になります（これは[[./6]]で詳しく扱います）。 以下のコードで、同じ関数でも呼び出し方によって `this` が変わる様子を確認しましょう。 @@ -55,4 +55,5 @@ this is: Alice this is: undefined ``` -> **ポイント:** `person.show` を `standaloneShow` に代入した時点で、オブジェクトとの結びつきは失われます。そのため、`standaloneShow()` と実行すると「関数呼び出し」扱いとなり、`this` は `undefined`（非Strict Modeならグローバルオブジェクト）になります。これが「`this` が消える」現象の正体です。 +> [!TIP] +> `person.show` を `standaloneShow` に代入した時点で、[[オブジェクト]]との結びつきは失われます。そのため、`standaloneShow()` と実行すると「関数呼び出し」扱いとなり、`this` は [[`undefined`]]（非Strict Modeならグローバルオブジェクト）になります。これが「`this` が消える」現象の正体です。 diff --git a/public/docs/javascript/4-this/2-0-bind-basic.md b/public/docs/javascript/4-this/2-0-bind-basic.md index 30257e57..f2d03c78 100644 --- a/public/docs/javascript/4-this/2-0-bind-basic.md +++ b/public/docs/javascript/4-this/2-0-bind-basic.md @@ -8,4 +8,4 @@ question: ## `this` を固定する: bind, call, apply -「関数呼び出し」でも特定のオブジェクトを `this` として扱いたい場合があります。JavaScriptには、`this` を明示的に指定（束縛）するためのメソッドが3つ用意されています。 +「関数呼び出し」でも特定の[[オブジェクト]]を `this` として扱いたい場合があります。JavaScriptには、`this` を明示的に指定（束縛）するためのメソッドが3つ用意されています。 diff --git a/public/docs/javascript/4-this/2-1-call-apply.md b/public/docs/javascript/4-this/2-1-call-apply.md index 171e246d..6a937437 100644 --- a/public/docs/javascript/4-this/2-1-call-apply.md +++ b/public/docs/javascript/4-this/2-1-call-apply.md @@ -9,7 +9,7 @@ question: ### call と apply -これらは関数を**即座に実行**します。第一引数に `this` としたいオブジェクトを渡します。 +これらは関数を**即座に実行**します。第一引数に `this` としたい[[オブジェクト]]を渡します。 * `call(thisArg, arg1, arg2, ...)`: 引数をカンマ区切りで渡す。 * `apply(thisArg, [argsArray])`: 引数を配列として渡す。 diff --git a/public/docs/javascript/4-this/3-0-arrow-func.md b/public/docs/javascript/4-this/3-0-arrow-func.md index 9576c6e3..0639449a 100644 --- a/public/docs/javascript/4-this/3-0-arrow-func.md +++ b/public/docs/javascript/4-this/3-0-arrow-func.md @@ -62,4 +62,5 @@ Legacy: Error - Cannot read properties of undefined (reading 'seconds') Modern: 1 ``` -> **注意:** アロー関数は便利な反面、`this` を動的に変更することができません（`call` や `bind` を使っても無視されます）。そのため、動的なコンテキストが必要な場合（例：オブジェクトのメソッド定義そのものや、ライブラリ等で `this` を注入される場合）には通常の関数式を使います。 +> [!WARNING] +> アロー関数は便利な反面、`this` を動的に変更することができません（`call` や `bind` を使っても無視されます）。そのため、動的なコンテキストが必要な場合（例：[[オブジェクト]]のメソッド定義そのものや、ライブラリ等で `this` を注入される場合）には通常の関数式を使います。 diff --git a/public/docs/javascript/4-this/4-0-summary.md b/public/docs/javascript/4-this/4-0-summary.md index 080c9ef5..0f3f3c5e 100644 --- a/public/docs/javascript/4-this/4-0-summary.md +++ b/public/docs/javascript/4-this/4-0-summary.md @@ -10,7 +10,7 @@ question: [] JavaScriptの `this` は、他の静的な言語とは異なり「呼び出し時」に解決されます。 1. **メソッド呼び出し (`obj.method()`)**: `this` は `obj`。 -2. **関数呼び出し (`func()`)**: `this` は `undefined` (Strict Mode) またはグローバルオブジェクト。 +2. **関数呼び出し (`func()`)**: `this` は [[`undefined`]] (Strict Mode) またはグローバルオブジェクト。 3. **明示的な指定**: `call`, `apply` で一時的に、`bind` で永続的に `this` を指定可能。 4. **アロー関数**: 独自の `this` を持たず、外側のスコープの `this` をそのまま使う（レキシカルスコープ）。 diff --git a/public/docs/javascript/4-this/4-2-practice2.md b/public/docs/javascript/4-this/4-2-practice2.md index ac1403ce..a961a015 100644 --- a/public/docs/javascript/4-this/4-2-practice2.md +++ b/public/docs/javascript/4-this/4-2-practice2.md @@ -9,7 +9,7 @@ question: ### 問題2: アロー関数の特性 -以下の `calculator` オブジェクトにはバグがあります。`multiply` メソッドが正しい結果（配列の各要素を `factor` 倍する）を返すように修正してください。 +以下の `calculator` [[オブジェクト]]にはバグがあります。`multiply` メソッドが正しい結果（配列の各要素を `factor` 倍する）を返すように修正してください。 ヒント：`map` の中のコールバック関数に注目してください。 ```js:practice5_2.js diff --git a/public/docs/javascript/5-objects-prototype/1-0-obj-literal.md b/public/docs/javascript/5-objects-prototype/1-0-obj-literal.md index 905d6a20..5c0da330 100644 --- a/public/docs/javascript/5-objects-prototype/1-0-obj-literal.md +++ b/public/docs/javascript/5-objects-prototype/1-0-obj-literal.md @@ -11,7 +11,7 @@ question: ## オブジェクトリテラルとプロパティ -JavaScriptにおけるオブジェクトは、基本的にはキー（プロパティ名）と値のコレクション（連想配列やハッシュマップに近いもの）です。最も一般的な生成方法は**オブジェクトリテラル** `{...}` を使うことです。 +JavaScriptにおける[[オブジェクト]]は、基本的にはキー（プロパティ名）と値のコレクション（連想配列やハッシュマップに近いもの）です。最も一般的な生成方法は**オブジェクトリテラル** `{...}` を使うことです。 ```js-repl > const book = { diff --git a/public/docs/javascript/5-objects-prototype/1-1-properties.md b/public/docs/javascript/5-objects-prototype/1-1-properties.md index 974dde1d..6a5f7b3d 100644 --- a/public/docs/javascript/5-objects-prototype/1-1-properties.md +++ b/public/docs/javascript/5-objects-prototype/1-1-properties.md @@ -10,7 +10,7 @@ question: ### プロパティの追加・削除 -動的な言語であるJavaScriptでは、オブジェクト作成後にプロパティを追加・削除できます。 +動的な言語であるJavaScriptでは、[[オブジェクト]]作成後にプロパティを追加・削除できます。 ```js-repl > const config = { env: "production" }; diff --git a/public/docs/javascript/5-objects-prototype/2-0-method-this-recall.md b/public/docs/javascript/5-objects-prototype/2-0-method-this-recall.md index c45e780b..8ae6a6ad 100644 --- a/public/docs/javascript/5-objects-prototype/2-0-method-this-recall.md +++ b/public/docs/javascript/5-objects-prototype/2-0-method-this-recall.md @@ -9,8 +9,8 @@ question: ## メソッドと this（復習） -オブジェクトのプロパティには関数も設定できます。これを**メソッド**と呼びます。 -[[./4]]で学んだ通り、メソッド呼び出しにおける `this` は、「ドットの左側にあるオブジェクト（レシーバ）」を指します。 +[[オブジェクト]]のプロパティには関数も設定できます。これを**メソッド**と呼びます。 +[[./4]]で学んだ通り、メソッド呼び出しにおける `this` は、「ドットの左側にある[[オブジェクト]]（レシーバ）」を指します。 ```js-repl > const counter = { diff --git a/public/docs/javascript/5-objects-prototype/3-0-prototype-basic.md b/public/docs/javascript/5-objects-prototype/3-0-prototype-basic.md index 56cbd8c6..d49e20db 100644 --- a/public/docs/javascript/5-objects-prototype/3-0-prototype-basic.md +++ b/public/docs/javascript/5-objects-prototype/3-0-prototype-basic.md @@ -10,6 +10,6 @@ question: ## プロトタイプとは何か？ -ここからが本章の核心です。JavaScriptのすべてのオブジェクトは、自身の親となる別のオブジェクトへの隠されたリンクを持っています。このリンク先のオブジェクトを**プロトタイプ**と呼びます。 +ここからが本章の核心です。JavaScriptのすべての[[オブジェクト]]は、自身の親となる別の[[オブジェクト]]への隠されたリンクを持っています。このリンク先のオブジェクトを**プロトタイプ**と呼びます。 -オブジェクトからプロパティを読み取ろうとしたとき、そのオブジェクト自身がプロパティを持っていなければ、JavaScriptエンジンは自動的にプロトタイプを探しに行きます。 +[[オブジェクト]]からプロパティを読み取ろうとしたとき、その[[オブジェクト]]自身がプロパティを持っていなければ、JavaScriptエンジンは自動的にプロトタイプを探しに行きます。 diff --git a/public/docs/javascript/5-objects-prototype/4-0-prototype-chain.md b/public/docs/javascript/5-objects-prototype/4-0-prototype-chain.md index f7b7090f..a1c0bede 100644 --- a/public/docs/javascript/5-objects-prototype/4-0-prototype-chain.md +++ b/public/docs/javascript/5-objects-prototype/4-0-prototype-chain.md @@ -11,12 +11,12 @@ question: ## プロトタイプチェーンによる継承の仕組み -あるオブジェクトのプロパティにアクセスした際、JavaScriptは以下の順序で探索を行います。 +ある[[オブジェクト]]のプロパティにアクセスした際、JavaScriptは以下の順序で探索を行います。 -1. そのオブジェクト自身（Own Property）が持っているか？ -2. 持っていなければ、そのオブジェクトのプロトタイプが持っているか？ +1. その[[オブジェクト]]自身（Own Property）が持っているか？ +2. 持っていなければ、その[[オブジェクト]]のプロトタイプが持っているか？ 3. それでもなければ、プロトタイプのプロトタイプが持っているか？ -4. `null` に到達するまで繰り返し、見つからなければ `undefined` を返す。 +4. [[`null`]] に到達するまで繰り返し、見つからなければ [[`undefined`]] を返す。 この連鎖を**プロトタイプチェーン**と呼びます。クラス継承のように型定義をコピーするのではなく、**リンクを辿って委譲（Delegation）する**仕組みです。 diff --git a/public/docs/javascript/5-objects-prototype/5-0-object-create-basic.md b/public/docs/javascript/5-objects-prototype/5-0-object-create-basic.md index c55b7d1d..e2e4b932 100644 --- a/public/docs/javascript/5-objects-prototype/5-0-object-create-basic.md +++ b/public/docs/javascript/5-objects-prototype/5-0-object-create-basic.md @@ -8,4 +8,4 @@ question: ## Object.create() とコンストラクタ関数 -`__proto__` を直接操作するのはパフォーマンスや標準化の観点から推奨されません。プロトタイプを指定してオブジェクトを生成する正しい方法は2つあります。 +`__proto__` を直接操作するのはパフォーマンスや標準化の観点から推奨されません。プロトタイプを指定して[[オブジェクト]]を生成する正しい方法は2つあります。 diff --git a/public/docs/javascript/5-objects-prototype/5-1-object-create.md b/public/docs/javascript/5-objects-prototype/5-1-object-create.md index 626fa2c5..93c448c9 100644 --- a/public/docs/javascript/5-objects-prototype/5-1-object-create.md +++ b/public/docs/javascript/5-objects-prototype/5-1-object-create.md @@ -9,7 +9,7 @@ question: ### 1\. Object.create() -指定したオブジェクトをプロトタイプとする新しい空のオブジェクトを生成します。 +指定した[[オブジェクト]]をプロトタイプとする新しい空の[[オブジェクト]]を生成します。 ```js-repl > const proto = { greet: function() { return "Hello"; } }; diff --git a/public/docs/javascript/5-objects-prototype/6-0-summary.md b/public/docs/javascript/5-objects-prototype/6-0-summary.md index 90c7991b..45382a6b 100644 --- a/public/docs/javascript/5-objects-prototype/6-0-summary.md +++ b/public/docs/javascript/5-objects-prototype/6-0-summary.md @@ -8,6 +8,6 @@ question: [] ## この章のまとめ 1. JavaScriptはクラスベースではなく、**プロトタイプベース**の継承を行う。 -2. オブジェクトは隠しプロパティ（`[[Prototype]]`）を持ち、プロパティが見つからない場合にそこを探索する（プロトタイプチェーン）。 -3. `Object.create(proto)` は、特定のプロトタイプを持つオブジェクトを直接生成する。 +2. [[オブジェクト]]は隠しプロパティ（`[[Prototype]]`）を持ち、プロパティが見つからない場合にそこを探索する（プロトタイプチェーン）。 +3. `Object.create(proto)` は、特定のプロトタイプを持つ[[オブジェクト]]を直接生成する。 4. コンストラクタ関数と `new` 演算子を使うと、`Func.prototype` を親に持つインスタンスを生成できる。これがJavaなどの「クラス」に近い振る舞いを模倣する仕組みである。 diff --git a/public/docs/javascript/5-objects-prototype/6-1-practice1.md b/public/docs/javascript/5-objects-prototype/6-1-practice1.md index 08187643..c8bec66d 100644 --- a/public/docs/javascript/5-objects-prototype/6-1-practice1.md +++ b/public/docs/javascript/5-objects-prototype/6-1-practice1.md @@ -11,8 +11,8 @@ question: `Object.create()` を使用して、以下の要件を満たすコードを書いてください。 -1. `robot` オブジェクトを作成し、`battery: 100` というプロパティと、バッテリーを10減らして残量を表示する `work` メソッドを持たせる。 -2. `robot` をプロトタイプとする `cleaningRobot` オブジェクトを作成する。 +1. `robot` [[オブジェクト]]を作成し、`battery: 100` というプロパティと、バッテリーを10減らして残量を表示する `work` メソッドを持たせる。 +2. `robot` をプロトタイプとする `cleaningRobot` [[オブジェクト]]を作成する。 3. `cleaningRobot` 自身に `type: "cleaner"` というプロパティを追加する。 4. `cleaningRobot.work()` を呼び出し、正しく動作（プロトタイプチェーンの利用）を確認する。 diff --git a/public/docs/javascript/6-classes/1-1-class-expr.md b/public/docs/javascript/6-classes/1-1-class-expr.md index a92b06bb..3a578888 100644 --- a/public/docs/javascript/6-classes/1-1-class-expr.md +++ b/public/docs/javascript/6-classes/1-1-class-expr.md @@ -9,7 +9,7 @@ question: ### クラス式 -関数と同様に、クラスも式として変数に代入できます（あまり頻繁には使われませんが、知識として持っておくと良いでしょう）。 +関数と同様に、クラスも式として[[変数]]に代入できます（あまり頻繁には使われませんが、知識として持っておくと良いでしょう）。 ```js-repl > const Item = class { diff --git a/public/docs/javascript/7-arrays/2-2-destructuring.md b/public/docs/javascript/7-arrays/2-2-destructuring.md index bc1b0fde..a4069d0c 100644 --- a/public/docs/javascript/7-arrays/2-2-destructuring.md +++ b/public/docs/javascript/7-arrays/2-2-destructuring.md @@ -10,7 +10,7 @@ question: ### デストラクチャリング（分割代入） -配列から要素を取り出して変数に代入する操作を簡潔に書くことができます。 +配列から要素を取り出して[[変数]]に代入する操作を簡潔に書くことができます。 ```js-repl > const users = ['Alice', 'Bob', 'Charlie']; diff --git a/public/docs/javascript/7-arrays/3-0-higher-order-func.md b/public/docs/javascript/7-arrays/3-0-higher-order-func.md index 69c92650..d988bcd2 100644 --- a/public/docs/javascript/7-arrays/3-0-higher-order-func.md +++ b/public/docs/javascript/7-arrays/3-0-higher-order-func.md @@ -19,7 +19,7 @@ JavaScriptでは、`for`文や`while`文を書く頻度は減っています。 * **`forEach`**: 単なる反復処理（戻り値なし）。副作用（ログ出力やDB保存など）を起こすために使う。 * **`map`**: 全要素を変換し、**新しい配列**を返す。 * **`filter`**: 条件に一致する要素のみを抽出し、**新しい配列**を返す。 - * **`reduce`**: 要素を一つずつ処理して、**単一の値**（合計、オブジェクトなど）に集約する。 + * **`reduce`**: 要素を一つずつ処理して、**単一の値**（合計、[[オブジェクト]]など）に集約する。 以下は、これらのメソッドを使って商品リストを処理するスクリプトです。 diff --git a/public/docs/javascript/7-arrays/4-0-other-method.md b/public/docs/javascript/7-arrays/4-0-other-method.md index 30bbf7c0..6d1c6467 100644 --- a/public/docs/javascript/7-arrays/4-0-other-method.md +++ b/public/docs/javascript/7-arrays/4-0-other-method.md @@ -12,10 +12,10 @@ question: 特定の要素を探したり、条件チェックを行ったりする場合に特化したメソッドです。これらもコールバック関数を受け取ります。 - * **`find`**: 最初に見つかった要素自体を返す（見つからなければ `undefined`）。 + * **`find`**: 最初に見つかった要素自体を返す（見つからなければ [[`undefined`]]）。 * **`findIndex`**: 最初に見つかった要素のインデックスを返す（見つからなければ `-1`）。 - * **`some`**: 条件を満たす要素が**一つでもあれば** `true` を返す。 - * **`every`**: **すべての要素**が条件を満たせば `true` を返す。 + * **`some`**: 条件を満たす要素が**一つでもあれば** [[`true`]] を返す。 + * **`every`**: **すべての要素**が条件を満たせば [[`true`]] を返す。 ```js-repl > const scores = [85, 92, 45, 78, 90]; diff --git a/public/docs/javascript/8-promise/4-0-promise-basic.md b/public/docs/javascript/8-promise/4-0-promise-basic.md index 2228e5bf..df3f7dee 100644 --- a/public/docs/javascript/8-promise/4-0-promise-basic.md +++ b/public/docs/javascript/8-promise/4-0-promise-basic.md @@ -11,9 +11,9 @@ question: ## Promiseの概念 -**Promise** は、非同期処理の「最終的な完了（または失敗）」とその「結果の値」を表すオブジェクトです。未来のある時点で値が返ってくる「約束手形」のようなものと考えてください。 +**Promise** は、非同期処理の「最終的な完了（または失敗）」とその「結果の値」を表す[[オブジェクト]]です。未来のある時点で値が返ってくる「約束手形」のようなものと考えてください。 -Promiseオブジェクトは以下の3つの状態のいずれかを持ちます。 +Promise[[オブジェクト]]は以下の3つの状態のいずれかを持ちます。 1. **Pending (待機中):** 初期状態。処理はまだ完了していない。 2. **Fulfilled (履行):** 処理が成功し、値を持っている状態。(`resolve` された) diff --git a/public/docs/javascript/8-promise/6-0-summary.md b/public/docs/javascript/8-promise/6-0-summary.md index 4343f3dd..dbc12252 100644 --- a/public/docs/javascript/8-promise/6-0-summary.md +++ b/public/docs/javascript/8-promise/6-0-summary.md @@ -9,7 +9,7 @@ question: [] * JavaScriptはシングルスレッドで動作し、**イベントループ** という仕組みを使って非同期処理を管理しています。 * 非同期処理の完了を待つために、昔はコールバック関数が多用されていましたが、ネストが深くなる問題がありました。 - * **Promise** は非同期処理の状態（Pending, Fulfilled, Rejected）を管理するオブジェクトです。 + * **Promise** は非同期処理の状態（Pending, Fulfilled, Rejected）を管理する[[オブジェクト]]です。 * `.then()` をチェーンさせることで、非同期処理を直列に、読みやすく記述できます。 * エラーハンドリングは `.catch()` で一括して行えます。 diff --git a/public/docs/javascript/8-promise/7-2-practice2.md b/public/docs/javascript/8-promise/7-2-practice2.md index 1e5ecb07..7b634fed 100644 --- a/public/docs/javascript/8-promise/7-2-practice2.md +++ b/public/docs/javascript/8-promise/7-2-practice2.md @@ -12,7 +12,7 @@ question: 以下の仕様を満たすコードを作成してください。 -1. 関数 `fetchUser(userId)`: 1秒後に `{ id: userId, name: "User" + userId }` というオブジェクトでresolveする。 +1. 関数 `fetchUser(userId)`: 1秒後に `{ id: userId, name: "User" + userId }` という[[オブジェクト]]でresolveする。 2. 関数 `fetchPosts(userName)`: 1秒後に `["Post 1 by " + userName, "Post 2 by " + userName]` という配列でresolveする。 3. これらをPromiseチェーンで繋ぎ、ユーザーID `1` でユーザーを取得した後、その名前を使って投稿を取得し、最終的に投稿リストをコンソールに表示してください。 diff --git a/public/docs/javascript/9-async-await/3-0-fetch.md b/public/docs/javascript/9-async-await/3-0-fetch.md index ab1cfc52..5e2c2001 100644 --- a/public/docs/javascript/9-async-await/3-0-fetch.md +++ b/public/docs/javascript/9-async-await/3-0-fetch.md @@ -20,8 +20,8 @@ JavaScript（特にブラウザ環境や最近のNode.js）でHTTPリクエス 基本的な流れは以下の通りです： 1. `fetch(url)` を実行し、レスポンスヘッダーが届くのを待つ。 -2. Responseオブジェクトを受け取る。 -3. Responseオブジェクトからメソッド（`.json()`, `.text()`など）を使ってボディを読み込む（これも非同期）。 +2. Response[[オブジェクト]]を受け取る。 +3. Response[[オブジェクト]]からメソッド（`.json()`, `.text()`など）を使ってボディを読み込む（これも非同期）。 ```js:fetch_basic.js // 外部APIからJSONデータを取得する例 diff --git a/public/docs/javascript/9-async-await/3-1-fetch-post.md b/public/docs/javascript/9-async-await/3-1-fetch-post.md index 9a1200b6..2cdb70b4 100644 --- a/public/docs/javascript/9-async-await/3-1-fetch-post.md +++ b/public/docs/javascript/9-async-await/3-1-fetch-post.md @@ -13,7 +13,7 @@ question: ### JSONデータの送信 (POST) -データを送信する場合は、第2引数にオプションオブジェクトを渡します。 +データを送信する場合は、第2引数にオプション[[オブジェクト]]を渡します。 ```js-repl > const postData = { title: 'foo', body: 'bar', userId: 1 }; From e86ab7abb725fa8c9aaa9b2e66cc57e20dd3f17d Mon Sep 17 00:00:00 2001 From: na-trium-144 <100704180+na-trium-144@users.noreply.github.com> Date: Sun, 4 Oct 2026 14:55:21 +0900 Subject: [PATCH 2/3] =?UTF-8?q?readme=E3=81=ABterm=E3=81=AE=E8=AA=AC?= =?UTF-8?q?=E6=98=8E=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index 622b16a0..70f01540 100644 --- a/README.md +++ b/README.md @@ -208,8 +208,14 @@ GitHubのalert記法の、`NOTE` `TIP` `WARNING` `CAUTION` が使えます。 ``` と書くと、`term: - 用語` が定義されている別のセクションへのリンクになり、ポップアップでその内容も表示されます。 +この記法はその言語のチュートリアルで繰り返し登場するプログラミング用語およびその言語固有のキーワードに使用します。 +例えばC++ならC++固有のキーワードとして [[main関数]] [[std::cout]] [[const]] [[auto]]、一般的なプログラミング用語として [[変数]] [[初期化]] [[文字列]] などが用語になります。 +言語そのもの: [[C++]]、抽象的な用語(あとの章で定義を参照する必要性が低いもの): [[パフォーマンス]] [[マルチパラダイム]] 、 1セクションにしか登場しない用語、環境構築関係の用語: [[VisualStudio]] [[SDK]] などは[[用語]]記法にする必要はありません。 + markdown書式も利用可能です。 `[[ほげ**ふが**]]` は `term: - ほげふが` へのリンクになり、表示は「ほげ**ふが**」になります。ただし `**[[ふが]]**` はリンクの色が優先されるのに対し `[[**ふが**]]` は強調の色が優先されます。 +表記ゆれがある場合はすべてをtermとして定義する必要があります: [[main関数]] [[main 関数]] [[main() 関数]] など。markdown書式は取り除かれるため [[`main` 関数]] の定義は不要です。 + ``` [[./1-foo]] [[./1]] From ee13255f16251f74068ccca7e60addd01ff5f00f Mon Sep 17 00:00:00 2001 From: na-trium-144 <100704180+na-trium-144@users.noreply.github.com> Date: Sun, 4 Oct 2026 06:14:06 +0000 Subject: [PATCH 3/3] =?UTF-8?q?JavaScript=E3=81=AE=E7=94=A8=E8=AA=9E?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0=20by=20gemini?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/docs/javascript/1-basics/2-2-number.md | 1 + public/docs/javascript/2-control/-intro.md | 2 +- .../javascript/2-control/1-1-if-truthy.md | 13 +++++++--- .../docs/javascript/2-control/1-2-switch.md | 5 +++- public/docs/javascript/2-control/2-0-loop.md | 5 +++- public/docs/javascript/2-control/2-1-for.md | 4 +++ public/docs/javascript/2-control/2-2-while.md | 5 ++++ .../javascript/2-control/3-0-iteration.md | 7 ++++-- .../docs/javascript/2-control/3-1-for-in.md | 8 ++++-- .../docs/javascript/2-control/3-2-for-of.md | 11 ++++++-- .../javascript/2-control/4-0-try-catch.md | 11 ++++++-- public/docs/javascript/2-control/4-2-throw.md | 5 +++- .../docs/javascript/2-control/5-0-summary.md | 10 ++++---- .../javascript/2-control/5-1-practice1.md | 4 +-- .../javascript/2-control/5-2-practice2.md | 6 ++--- .../javascript/3-functions-closures/-intro.md | 2 +- .../3-functions-closures/1-0-function.md | 6 ++++- .../1-1-function-declaration.md | 2 ++ .../1-2-function-expression.md | 6 ++++- .../2-0-arrow-function.md | 4 ++- .../2-2-arrow-function-simple.md | 4 +-- .../3-functions-closures/3-0-argument.md | 2 +- .../3-functions-closures/3-1-default-arg.md | 3 +++ .../3-functions-closures/3-2-rest-arg.md | 6 ++++- .../3-functions-closures/4-0-scope-chain.md | 12 ++++++--- .../3-functions-closures/5-0-closure.md | 13 ++++++---- .../3-functions-closures/6-0-summary.md | 10 ++++---- .../3-functions-closures/6-1-practice1.md | 2 +- .../3-functions-closures/6-2-practice2.md | 2 +- public/docs/javascript/4-this/-intro.md | 4 +-- .../docs/javascript/4-this/1-0-this-basic.md | 17 ++++++++----- .../docs/javascript/4-this/2-0-bind-basic.md | 2 +- .../docs/javascript/4-this/2-1-call-apply.md | 9 ++++--- public/docs/javascript/4-this/2-2-bind.md | 4 ++- .../docs/javascript/4-this/3-0-arrow-func.md | 8 +++--- public/docs/javascript/4-this/4-0-summary.md | 12 ++++----- .../docs/javascript/4-this/4-1-practice1.md | 4 +-- .../docs/javascript/4-this/4-2-practice2.md | 4 +-- .../javascript/5-objects-prototype/-intro.md | 4 +-- .../5-objects-prototype/1-0-obj-literal.md | 5 +++- .../5-objects-prototype/1-1-properties.md | 2 +- .../2-0-method-this-recall.md | 6 +++-- .../3-0-prototype-basic.md | 9 +++++-- .../5-objects-prototype/3-1-getprototypeof.md | 4 ++- .../4-0-prototype-chain.md | 11 +++++--- .../5-0-object-create-basic.md | 2 +- .../5-objects-prototype/5-1-object-create.md | 5 +++- .../5-2-new-constructor.md | 15 +++++++---- .../5-objects-prototype/6-0-summary.md | 8 +++--- .../5-objects-prototype/6-1-practice1.md | 10 ++++---- .../5-objects-prototype/6-2-practice2.md | 8 +++--- public/docs/javascript/6-classes/-intro.md | 6 ++--- .../6-classes/1-0-class-constructor.md | 9 +++++-- .../javascript/6-classes/1-1-class-expr.md | 4 ++- .../docs/javascript/6-classes/2-0-method.md | 9 +++++-- .../javascript/6-classes/3-0-extends-super.md | 9 +++++-- .../docs/javascript/6-classes/4-1-static.md | 6 ++++- .../docs/javascript/6-classes/4-2-private.md | 5 +++- .../docs/javascript/6-classes/5-0-summary.md | 10 ++++---- .../javascript/6-classes/5-1-practice1.md | 8 +++--- .../javascript/6-classes/5-2-practice2.md | 8 +++--- public/docs/javascript/7-arrays/-intro.md | 4 +-- .../javascript/7-arrays/1-0-array-literal.md | 12 +++++++-- .../javascript/7-arrays/1-2-array-splice.md | 6 ++++- .../7-arrays/2-0-spread-destructure-basic.md | 2 +- public/docs/javascript/7-arrays/2-1-spread.md | 6 ++++- .../javascript/7-arrays/2-2-destructuring.md | 5 +++- .../7-arrays/3-0-higher-order-func.md | 23 +++++++++++------ .../javascript/7-arrays/4-0-other-method.md | 15 +++++++---- .../docs/javascript/7-arrays/5-0-summary.md | 10 ++++---- .../docs/javascript/7-arrays/5-1-practice1.md | 6 ++--- .../docs/javascript/7-arrays/5-2-practice2.md | 2 +- public/docs/javascript/8-promise/-intro.md | 4 +-- .../javascript/8-promise/1-0-sync-vs-async.md | 12 ++++++--- .../8-promise/2-0-event-callback.md | 24 +++++++++++------- .../javascript/8-promise/3-0-callback-hell.md | 6 +++-- .../javascript/8-promise/4-0-promise-basic.md | 17 ++++++++----- .../8-promise/5-1-promise-create.md | 5 +++- .../8-promise/5-2-promise-method.md | 25 +++++++++++++------ .../docs/javascript/8-promise/6-0-summary.md | 12 ++++----- .../javascript/8-promise/7-1-practice1.md | 2 +- .../javascript/8-promise/7-2-practice2.md | 6 ++--- .../docs/javascript/9-async-await/-intro.md | 4 +-- .../9-async-await/1-0-async-await.md | 7 +++++- .../javascript/9-async-await/1-1-async.md | 5 +++- .../javascript/9-async-await/1-2-await.md | 8 ++++-- .../javascript/9-async-await/2-0-try-catch.md | 2 +- .../javascript/9-async-await/3-0-fetch.md | 10 +++++--- .../9-async-await/4-0-promise-all-race.md | 7 +++++- .../9-async-await/4-2-promise-all.md | 5 +++- .../9-async-await/4-3-promise-race.md | 5 +++- .../javascript/9-async-await/5-0-summary.md | 8 +++--- .../javascript/9-async-await/6-1-practice1.md | 4 +-- .../javascript/9-async-await/6-2-practice2.md | 4 +-- 94 files changed, 447 insertions(+), 224 deletions(-) diff --git a/public/docs/javascript/1-basics/2-2-number.md b/public/docs/javascript/1-basics/2-2-number.md index 99a3c317..1731456a 100644 --- a/public/docs/javascript/1-basics/2-2-number.md +++ b/public/docs/javascript/1-basics/2-2-number.md @@ -10,6 +10,7 @@ term: - 数値 - Number - number + - NaN --- ### 数値（Number） diff --git a/public/docs/javascript/2-control/-intro.md b/public/docs/javascript/2-control/-intro.md index 1462d731..a6acf6b3 100644 --- a/public/docs/javascript/2-control/-intro.md +++ b/public/docs/javascript/2-control/-intro.md @@ -1,3 +1,3 @@ -他の言語での開発経験がある方にとって、JavaScriptの制御構文の多くは馴染み深いものでしょう。しかし、JavaScript特有の「真偽値の評価（Truthy/Falsy）」や「反復処理（Iteration）の種類の多さ」は、バグを生みやすいポイントでもあります。 +他の言語での開発経験がある方にとって、JavaScriptの制御構文の多くは馴染み深いものでしょう。しかし、JavaScript特有の「[[真偽値]]の評価（[[Truthy]]/[[Falsy]]）」や「[[反復処理]]（Iteration）の種類の多さ」は、バグを生みやすいポイントでもあります。 この章では、構文そのものだけでなく、JavaScriptならではの挙動やベストプラクティスに焦点を当てて解説します。 diff --git a/public/docs/javascript/2-control/1-1-if-truthy.md b/public/docs/javascript/2-control/1-1-if-truthy.md index 91b2716f..308103ef 100644 --- a/public/docs/javascript/2-control/1-1-if-truthy.md +++ b/public/docs/javascript/2-control/1-1-if-truthy.md @@ -8,11 +8,16 @@ question: - 文字列の"0"や"false"がTruthyになるのはなぜですか？これも直感と違います。 - BigIntとは何ですか？ - if文の条件式で変数そのものを評価するやり方はどのような時に便利ですか？ +term: + - if + - if文 + - Truthy + - Falsy --- ## `if`文とTruthy / Falsy -基本的な `if` 文の構造はC言語やJavaと同様です。しかし、条件式における評価はJavaScript特有の**Truthy（真と見なされる値）**と**Falsy（偽と見なされる値）**の概念を理解する必要があります。 +基本的な [[`if`]] 文の構造はC言語やJavaと同様です。しかし、条件式における評価はJavaScript特有の**[[Truthy]]（真と見なされる値）**と**[[Falsy]]（偽と見なされる値）**の概念を理解する必要があります。 厳密な [[`true`]] / [[`false`]] だけでなく、あらゆる値が条件式の中で真偽判定されます。 @@ -23,15 +28,15 @@ question: * `""` (空文字) * [[`null`]] * [[`undefined`]] - * `NaN` + * [[`NaN`]] **Truthyな値（[[true]]として扱われるもの）:** * 上記Falsy以外すべて > [!WARNING] -> * 空の配列 `[]` や 空の[[オブジェクト]] `{}` は **Truthy** です（Pythonなどの経験者は注意が必要です）。 -> * [[文字列]]の `"0"` や `"false"` もTruthyです。 +> * 空の[[配列]] `[]` や 空の[[オブジェクト]] `{}` は **[[Truthy]]** です（Pythonなどの経験者は注意が必要です）。 +> * [[文字列]]の `"0"` や `"false"` も[[Truthy]]です。 ```js-repl > if (0) { 'True'; } else { 'False'; } diff --git a/public/docs/javascript/2-control/1-2-switch.md b/public/docs/javascript/2-control/1-2-switch.md index 926e3a78..680f6a3a 100644 --- a/public/docs/javascript/2-control/1-2-switch.md +++ b/public/docs/javascript/2-control/1-2-switch.md @@ -7,11 +7,14 @@ question: - switch文のcaseの順番は結果に影響しますか？ - break文を書き忘れるとどうなりますか？ - default句は必ず書く必要がありますか？ +term: + - switch + - switch文 --- ## `switch`文 -`switch` 文も標準的ですが、比較が **[[厳密等価演算子]] (`===`)** で行われる点に注意してください。型変換は行われません。 +[[`switch`]] 文も標準的ですが、比較が **[[厳密等価演算子]] (`===`)** で行われる点に注意してください。型変換は行われません。 ```js:switch_example.js const status = "200"; // 文字列 diff --git a/public/docs/javascript/2-control/2-0-loop.md b/public/docs/javascript/2-control/2-0-loop.md index be20e3b5..be82808c 100644 --- a/public/docs/javascript/2-control/2-0-loop.md +++ b/public/docs/javascript/2-control/2-0-loop.md @@ -3,8 +3,11 @@ id: javascript-control-loop title: 繰り返し (for, while) level: 2 question: [] +term: + - ループ + - 繰り返し --- ## 繰り返し (for, while) -`while`, `do...while`, および古典的な `for` ループは、C/Java/C++等の構文とほぼ同じです。 +[[`while`]], [[`do...while`]], および古典的な [[`for`]] ループは、C/Java/C++等の構文とほぼ同じです。 diff --git a/public/docs/javascript/2-control/2-1-for.md b/public/docs/javascript/2-control/2-1-for.md index 6709d9bd..2e152c8d 100644 --- a/public/docs/javascript/2-control/2-1-for.md +++ b/public/docs/javascript/2-control/2-1-for.md @@ -4,6 +4,10 @@ title: 古典的な for ループ level: 3 question: - forループの3つの式はそれぞれどのような役割ですか？ +term: + - for + - for文 + - forループ --- ### 古典的な for ループ diff --git a/public/docs/javascript/2-control/2-2-while.md b/public/docs/javascript/2-control/2-2-while.md index ea51b056..29dd8910 100644 --- a/public/docs/javascript/2-control/2-2-while.md +++ b/public/docs/javascript/2-control/2-2-while.md @@ -4,6 +4,11 @@ title: while ループ level: 3 question: - whileループとforループはどのように使い分けるのが一般的ですか？ +term: + - while + - while文 + - whileループ + - do...while --- ### while ループ diff --git a/public/docs/javascript/2-control/3-0-iteration.md b/public/docs/javascript/2-control/3-0-iteration.md index 61845227..723dcce4 100644 --- a/public/docs/javascript/2-control/3-0-iteration.md +++ b/public/docs/javascript/2-control/3-0-iteration.md @@ -5,6 +5,9 @@ level: 2 question: - イテレーションとは具体的にどういう意味ですか？ - for...ofとfor...inは、なぜ両方存在するのですか？ +term: + - イテレーション + - 反復処理 --- ## イテレーション: `for...of` と `for...in` の違い @@ -13,5 +16,5 @@ question: | 構文 | 取得するもの | 対象 | 推奨ユースケース | | :--- | :--- | :--- | :--- | -| **`for...in`** | **キー (Key)** | Object | [[オブジェクト]]のプロパティ調査 | -| **`for...of`** | **値 (Value)** | Array, [[String]], Map, Set | 配列やリストデータの処理 | +| **[[`for...in`]]** | **キー (Key)** | Object | [[オブジェクト]]の[[プロパティ]]調査 | +| **[[`for...of`]]** | **値 (Value)** | Array, [[文字列]], Map, Set | [[配列]]やリストデータの処理 | diff --git a/public/docs/javascript/2-control/3-1-for-in.md b/public/docs/javascript/2-control/3-1-for-in.md index f22f81db..edcbcfd5 100644 --- a/public/docs/javascript/2-control/3-1-for-in.md +++ b/public/docs/javascript/2-control/3-1-for-in.md @@ -5,12 +5,16 @@ level: 3 question: - 配列にfor...inを使わない方が良いとのことですが、なぜプロトタイプチェーン上のプロパティまで列挙してしまうリスクがあるのですか？ - オブジェクトのプロパティを列挙する以外に、for...inを使う具体的なユースケースはありますか？ +term: + - for...in + - for-in + - for in --- ### `for...in` ループ（プロパティ名の列挙） -`for...in` は[[オブジェクト]]の **キー（プロパティ名）** を列挙するために設計されています。 -配列に対して使用すると、インデックス（"0", "1", ...）が[[文字列]]として返ってくるだけでなく、プロトタイプチェーン上のプロパティまで列挙してしまうリスクがあるため、**配列への使用は推奨されません**。 +[[`for...in`]] は[[オブジェクト]]の **キー（[[プロパティ]]名）** を列挙するために設計されています。 +[[配列]]に対して使用すると、インデックス（"0", "1", ...）が[[文字列]]として返ってくるだけでなく、[[プロトタイプチェーン]]上の[[プロパティ]]まで列挙してしまうリスクがあるため、**[[配列]]への使用は推奨されません**。 ```js:for_in_example.js const user = { diff --git a/public/docs/javascript/2-control/3-2-for-of.md b/public/docs/javascript/2-control/3-2-for-of.md index 269aaf63..4abfe44e 100644 --- a/public/docs/javascript/2-control/3-2-for-of.md +++ b/public/docs/javascript/2-control/3-2-for-of.md @@ -7,12 +7,19 @@ question: - >- Object.keys()やObject.values()、Object.entries()を使うとありますが、これらはfor...ofとどのように組み合わせて使うのですか？ - 文字列もfor...ofでループできるのはなぜですか？ +term: + - for...of + - for-of + - for of + - Iterable + - 反復可能 + - 反復可能オブジェクト --- ### `for...of` ループ（反復可能オブジェクトの走査） -ES2015 (ES6) で導入された `for...of` は、**値（Values）** を反復します。 -配列、[[文字列]]、Map、Setなどの **Iterable（反復可能）** な[[オブジェクト]]に対して使用します。配列の中身を順番に処理したい場合は、こちらが正解です。 +ES2015 (ES6) で導入された [[`for...of`]] は、**値（Values）** を反復します。 +[[配列]]、[[文字列]]、Map、Setなどの **[[Iterable]]（[[反復可能]]）** な[[オブジェクト]]に対して使用します。[[配列]]の中身を順番に処理したい場合は、こちらが正解です。 ```js:for_of_example.js const languages = ["JavaScript", "Python", "Go"]; diff --git a/public/docs/javascript/2-control/4-0-try-catch.md b/public/docs/javascript/2-control/4-0-try-catch.md index 890347d9..467b1ad9 100644 --- a/public/docs/javascript/2-control/4-0-try-catch.md +++ b/public/docs/javascript/2-control/4-0-try-catch.md @@ -6,13 +6,20 @@ question: - catchブロックの(e)にはどのような情報が入っていますか？エラーオブジェクトの具体的な中身を知りたいです。 - finallyブロックはどのような場合に使うのが適切ですか？具体的な例を教えてください。 - try...catchで捕捉できないエラーは存在しますか？ +term: + - try + - catch + - finally + - try...catch + - 例外処理 + - 例外 --- ## 例外処理 (`try...catch...finally`) -JavaScriptの例外処理は `try...catch...finally` 構文を使用します。 +JavaScriptの[[例外処理]]は `[[try]]...[[catch]]...[[finally]]` 構文を使用します。 -実行時にエラーが発生すると、処理が中断され `catch` ブロックに移行します。 +実行時にエラーが発生すると、処理が中断され [[`catch`]] ブロックに移行します。 ```js:try_catch.js function parseJson(jsonString) { diff --git a/public/docs/javascript/2-control/4-2-throw.md b/public/docs/javascript/2-control/4-2-throw.md index 59d6c1d9..3111dd0d 100644 --- a/public/docs/javascript/2-control/4-2-throw.md +++ b/public/docs/javascript/2-control/4-2-throw.md @@ -5,11 +5,14 @@ level: 3 question: - Errorオブジェクトを投げるのが一般的なのはなぜですか？文字列や数値を投げると何が問題なのですか？ - 自分で作成したカスタムエラーオブジェクトをthrowすることはできますか？ +term: + - throw + - Error --- ### `throw` について -JavaScriptでは `throw` で例外を投げることができます。`Error` [[オブジェクト]]を投げるのが一般的ですが、技術的には[[文字列]]や[[数値]]など、任意の値を投げることが可能です（ただし、スタックトレースが取れなくなるため推奨されません）。 +JavaScriptでは [[`throw`]] で[[例外]]を投げることができます。[[`Error`]] [[オブジェクト]]を投げるのが一般的ですが、技術的には[[文字列]]や[[数値]]など、任意の値を投げることが可能です（ただし、スタックトレースが取れなくなるため推奨されません）。 ```js-repl > try { throw new Error("Something went wrong"); } catch (e) { console.log(e.message); } diff --git a/public/docs/javascript/2-control/5-0-summary.md b/public/docs/javascript/2-control/5-0-summary.md index efc91109..ec27e12f 100644 --- a/public/docs/javascript/2-control/5-0-summary.md +++ b/public/docs/javascript/2-control/5-0-summary.md @@ -7,8 +7,8 @@ question: [] ## この章のまとめ - * **条件分岐:** `if` 文での `[]` や `{}` は Truthy であることに注意。`switch` は[[厳密等価演算子]] (`===`) で判定される。 - * **繰り返し:** 古典的な `for`, `while` は他のC系言語と同じ。 - * **for...in:** [[オブジェクト]]の **キー** を列挙する。配列には使わないこと。 - * **for...of:** 配列やコレクションの **値** を反復する。リスト処理の標準。 - * **例外処理:** `try...catch...finally` で行う。`throw` は任意の値を投げられるが、通常は `Error` [[オブジェクト]]を使用する。 + * **条件分岐:** [[`if`]] 文での `[]` や `{}` は [[Truthy]] であることに注意。[[`switch`]] は[[厳密等価演算子]] (`===`) で判定される。 + * **[[繰り返し]]:** 古典的な [[`for`]], [[`while`]] は他のC系言語と同じ。 + * **[[`for...in`]]:** [[オブジェクト]]の **キー** を列挙する。[[配列]]には使わないこと。 + * **[[`for...of`]]:** [[配列]]やコレクションの **値** を反復する。リスト処理の標準。 + * **[[例外処理]]:** `[[try]]...[[catch]]...[[finally]]` で行う。[[`throw`]] は任意の値を投げられるが、通常は [[`Error`]] [[オブジェクト]]を使用する。 diff --git a/public/docs/javascript/2-control/5-1-practice1.md b/public/docs/javascript/2-control/5-1-practice1.md index 7b6a462d..9ad5be83 100644 --- a/public/docs/javascript/2-control/5-1-practice1.md +++ b/public/docs/javascript/2-control/5-1-practice1.md @@ -9,8 +9,8 @@ question: ### 練習問題1: 配列のフィルタリングと集計 -以下の[[数値]]が入った配列 `numbers` があります。 -`for...of` ループを使用して、**偶数かつ10より大きい数値** だけを抽出し、その合計値を計算してコンソールに出力するプログラムを書いてください。 +以下の[[数値]]が入った[[配列]] `numbers` があります。 +[[`for...of`]] ループを使用して、**偶数かつ10より大きい[[数値]]** だけを抽出し、その合計値を計算してコンソールに出力するプログラムを書いてください。 ```js:practice3_1.js const numbers = [5, 12, 8, 20, 7, 3, 14, 30]; diff --git a/public/docs/javascript/2-control/5-2-practice2.md b/public/docs/javascript/2-control/5-2-practice2.md index 06737881..50167c4b 100644 --- a/public/docs/javascript/2-control/5-2-practice2.md +++ b/public/docs/javascript/2-control/5-2-practice2.md @@ -9,13 +9,13 @@ question: ### 問題 2: 簡易コマンドディスパッチャ -以下の仕様を満たす関数 `executeCommand(command)` を `switch` 文と `try...catch` を用いて作成してください。 +以下の仕様を満たす[[関数]] `executeCommand(command)` を [[`switch`]] 文と `[[try]]...[[catch]]` を用いて作成してください。 1. 引数 `command` は[[文字列]]を受け取る。 2. `"start"` の場合、"System starting..." を出力。 3. `"stop"` の場合、"System stopping..." を出力。 -4. それ以外の文字列の場合、`Error` [[オブジェクト]]を `throw` する（メッセージは "Unknown command"）。 -5. `try...catch` ブロックを用いてこの関数を呼び出し、エラーが発生した場合は "Error caught: Unknown command" のように出力する。 +4. それ以外の[[文字列]]の場合、[[`Error`]] [[オブジェクト]]を [[`throw`]] する（メッセージは "Unknown command"）。 +5. `[[try]]...[[catch]]` ブロックを用いてこの[[関数]]を呼び出し、エラーが発生した場合は "Error caught: Unknown command" のように出力する。 **ヒント:** `command` が [[`null`]] や [[`undefined`]] の場合もエラーとして処理されるように実装してください。 diff --git a/public/docs/javascript/3-functions-closures/-intro.md b/public/docs/javascript/3-functions-closures/-intro.md index b20b9a95..6ed3b83c 100644 --- a/public/docs/javascript/3-functions-closures/-intro.md +++ b/public/docs/javascript/3-functions-closures/-intro.md @@ -1 +1 @@ -JavaScriptにおいて関数はオブジェクトの一種です。つまり、[[変数]]に代入したり、他の関数の引数として渡したり、関数から戻り値として返したりすることができます。この柔軟性が、JavaScriptの設計パターンの核心を担っています。 +JavaScriptにおいて[[関数]]は[[オブジェクト]]の一種です。つまり、[[変数]]に代入したり、他の[[関数]]の引数として渡したり、[[関数]]から戻り値として返したりすることができます。この柔軟性が、JavaScriptの設計パターンの核心を担っています。 diff --git a/public/docs/javascript/3-functions-closures/1-0-function.md b/public/docs/javascript/3-functions-closures/1-0-function.md index 2fb5452f..8d98cdd1 100644 --- a/public/docs/javascript/3-functions-closures/1-0-function.md +++ b/public/docs/javascript/3-functions-closures/1-0-function.md @@ -5,8 +5,12 @@ level: 2 question: - 「巻き上げ（Hoisting）」とは具体的にどういう挙動のことですか？ - なぜ関数宣言と関数式で巻き上げの挙動が異なるのですか？ +term: + - 関数 + - 巻き上げ + - Hoisting --- ## 関数の定義（関数宣言 vs 関数式） -JavaScriptには関数を定義する方法が主に2つあります。「関数宣言」と「関数式」です。これらは似ていますが、**巻き上げ（Hoisting）** の挙動が異なります。 +JavaScriptには[[関数]]を定義する方法が主に2つあります。「[[関数宣言]]」と「[[関数式]]」です。これらは似ていますが、**[[巻き上げ]]（Hoisting）** の挙動が異なります。 diff --git a/public/docs/javascript/3-functions-closures/1-1-function-declaration.md b/public/docs/javascript/3-functions-closures/1-1-function-declaration.md index 911c7443..644b574f 100644 --- a/public/docs/javascript/3-functions-closures/1-1-function-declaration.md +++ b/public/docs/javascript/3-functions-closures/1-1-function-declaration.md @@ -6,6 +6,8 @@ question: - 関数宣言は定義する前の行から呼び出せるのはなぜですか？ - 関数宣言はどのような場合に使うのが良いですか？ - '`console.log(greet("Alice"));` の `greet` 関数は何を返していますか？' +term: + - 関数宣言 --- ### 1\. 関数宣言 (Function Declaration) diff --git a/public/docs/javascript/3-functions-closures/1-2-function-expression.md b/public/docs/javascript/3-functions-closures/1-2-function-expression.md index 453439d1..53f58e5e 100644 --- a/public/docs/javascript/3-functions-closures/1-2-function-expression.md +++ b/public/docs/javascript/3-functions-closures/1-2-function-expression.md @@ -6,11 +6,15 @@ question: - 関数式は定義する前に呼び出すとエラーになるのはなぜですか？ - 現代のJavaScript開発ではなぜ関数式が好まれる傾向にあるのですか？ - 関数式を使う主なメリットは何ですか？ +term: + - 関数式 + - 無名関数 + - 匿名関数 --- ### 2\. 関数式 (Function Expression) -[[変数]]に関数を代入するスタイルです。[[変数]]の代入は実行時に行われるため、定義する前に呼び出すとエラーになります。現代のJavaScript開発では、意図しない巻き上げを防ぐためにこちら（または後述のアロー関数）が好まれる傾向にあります。 +[[変数]]に[[関数]]を代入するスタイルです。[[変数]]の代入は実行時に行われるため、定義する前に呼び出すとエラーになります。現代のJavaScript開発では、意図しない[[巻き上げ]]を防ぐためにこちら（または後述の[[アロー関数]]）が好まれる傾向にあります。 ```js:function_expression.js // 定義前に呼び出すと... ReferenceError: Cannot access 'sayHi' before initialization diff --git a/public/docs/javascript/3-functions-closures/2-0-arrow-function.md b/public/docs/javascript/3-functions-closures/2-0-arrow-function.md index 678ad669..4cdc7097 100644 --- a/public/docs/javascript/3-functions-closures/2-0-arrow-function.md +++ b/public/docs/javascript/3-functions-closures/2-0-arrow-function.md @@ -6,11 +6,13 @@ question: - アロー関数は常に `function` キーワードの代わりとして使えるのですか？ - Javaのラムダ式やPythonのlambdaに似ているとありますが、具体的にどういう点が似ていますか？ - アロー関数を使うとどんな良いことがありますか？ +term: + - アロー関数 --- ## アロー関数 (`=>`) の構文と特徴 -ES2015 (ES6) で導入されたアロー関数は、関数式をより短く記述するための構文です。 +ES2015 (ES6) で導入された[[アロー関数]]は、[[関数式]]をより短く記述するための構文です。 `function` キーワードを省略し、`=>` (矢印) を使って定義します。 Javaのラムダ式やPythonのlambdaに似ていますが、いくつか独自の特徴があります。 diff --git a/public/docs/javascript/3-functions-closures/2-2-arrow-function-simple.md b/public/docs/javascript/3-functions-closures/2-2-arrow-function-simple.md index e5448caa..5f4c1f96 100644 --- a/public/docs/javascript/3-functions-closures/2-2-arrow-function-simple.md +++ b/public/docs/javascript/3-functions-closures/2-2-arrow-function-simple.md @@ -9,7 +9,7 @@ question: ### 省略記法 -アロー関数には強力な省略記法があります。 +[[アロー関数]]には強力な省略記法があります。 1. **引数が1つの場合**: カッコ `()` を省略可能。 2. **処理が1行でreturnする場合**: 中括弧 `{}` と `return` キーワードを省略可能（暗黙のreturn）。 @@ -24,4 +24,4 @@ question: { id: 1, name: 'Gemini' } ``` -> **注意:** アロー関数は単なる短縮記法ではありません。「`this` を持たない」という重要な特徴がありますが、これについては[[./5]]で詳しく解説します。 +> **注意:** [[アロー関数]]は単なる短縮記法ではありません。「[[`this`]] を持たない」という重要な特徴がありますが、これについては[[./4]]で詳しく解説します。 diff --git a/public/docs/javascript/3-functions-closures/3-0-argument.md b/public/docs/javascript/3-functions-closures/3-0-argument.md index b5a863ea..8d361576 100644 --- a/public/docs/javascript/3-functions-closures/3-0-argument.md +++ b/public/docs/javascript/3-functions-closures/3-0-argument.md @@ -7,4 +7,4 @@ question: [] ## 引数：デフォルト引数、Restパラメータ (...) -関数の柔軟性を高めるための引数の機能を見ていきましょう。 +[[関数]]の柔軟性を高めるための引数の機能を見ていきましょう。 diff --git a/public/docs/javascript/3-functions-closures/3-1-default-arg.md b/public/docs/javascript/3-functions-closures/3-1-default-arg.md index 6f628690..3402613d 100644 --- a/public/docs/javascript/3-functions-closures/3-1-default-arg.md +++ b/public/docs/javascript/3-functions-closures/3-1-default-arg.md @@ -5,6 +5,9 @@ level: 3 question: - 引数が `undefined` の場合にもデフォルト値が使用されるのはなぜですか？ - デフォルト引数と通常の引数を混ぜて使うことはできますか？ +term: + - デフォルト引数 + - デフォルトパラメータ --- ### デフォルト引数 diff --git a/public/docs/javascript/3-functions-closures/3-2-rest-arg.md b/public/docs/javascript/3-functions-closures/3-2-rest-arg.md index 34e56e71..4a8671e7 100644 --- a/public/docs/javascript/3-functions-closures/3-2-rest-arg.md +++ b/public/docs/javascript/3-functions-closures/3-2-rest-arg.md @@ -6,11 +6,15 @@ question: - 引数の数が不定な場合とは、具体的にどんなケースを指しますか？ - 以前使われていた `arguments` オブジェクトとは何ですか？なぜRestパラメータの方が良いのですか？ - Restパラメータは必ず最後の引数としてしか使えないのですか？ +term: + - Restパラメータ + - 残余引数 + - レストパラメータ --- ### Restパラメータ (残余引数) -引数の数が不定の場合、`...` を使うことで、残りの引数を**配列として**受け取ることができます。以前は `arguments` [[オブジェクト]]を使っていましたが、Restパラメータの方が配列メソッド（`map`, `reduce`など）を直接使えるため便利です。 +引数の数が不定の場合、`...` を使うことで、残りの引数を**[[配列]]として**受け取ることができます。以前は `arguments` [[オブジェクト]]を使っていましたが、[[Restパラメータ]]の方が[[配列]]メソッド（[[`map`]], [[`reduce`]]など）を直接使えるため便利です。 ```js:rest_params.js const sum = (...numbers) => { diff --git a/public/docs/javascript/3-functions-closures/4-0-scope-chain.md b/public/docs/javascript/3-functions-closures/4-0-scope-chain.md index 3b4ad332..f4edf580 100644 --- a/public/docs/javascript/3-functions-closures/4-0-scope-chain.md +++ b/public/docs/javascript/3-functions-closures/4-0-scope-chain.md @@ -6,14 +6,20 @@ question: - スコープとは具体的に何のことですか？ - 「レキシカルスコープ」と「スコープチェーン」はどのように関係していますか？ - 関数が「どこで定義されたか」によってスコープが決まるというのはどういうことですか？ +term: + - スコープ + - レキシカルスコープ + - スコープチェーン + - Lexical Scope + - Scope Chain --- ## スコープチェーンとレキシカルスコープ -JavaScriptの[[変数]]の有効範囲（スコープ）を理解するために、「レキシカルスコープ」という概念を知る必要があります。 +JavaScriptの[[変数]]の有効範囲（[[スコープ]]）を理解するために、「[[レキシカルスコープ]]」という概念を知る必要があります。 - * **レキシカルスコープ (Lexical Scope):** 関数が「どこで呼び出されたか」ではなく、**「どこで定義されたか」**によってスコープが決まるというルールです。 - * **スコープチェーン (Scope Chain):** 変数を探す際、現在のスコープになければ、定義時の外側のスコープへと順番に探しに行く仕組みです。 + * **[[レキシカルスコープ]] (Lexical Scope):** [[関数]]が「どこで呼び出されたか」ではなく、**「どこで定義されたか」**によって[[スコープ]]が決まるというルールです。 + * **[[スコープチェーン]] (Scope Chain):** [[変数]]を探す際、現在の[[スコープ]]になければ、定義時の外側の[[スコープ]]へと順番に探しに行く仕組みです。 ```js:scope.js const globalVar = "Global"; diff --git a/public/docs/javascript/3-functions-closures/5-0-closure.md b/public/docs/javascript/3-functions-closures/5-0-closure.md index d31558a7..f7822d8d 100644 --- a/public/docs/javascript/3-functions-closures/5-0-closure.md +++ b/public/docs/javascript/3-functions-closures/5-0-closure.md @@ -6,18 +6,21 @@ question: - 外側の関数の実行が終了しても、そのスコープにある変数を参照し続けられるのはなぜですか？ - 「カプセル化」とはどういう意味で、なぜクロージャがそれに役立つのでしょうか？ - '`counterA` と `counterB` がそれぞれ独立した状態を持っているのはなぜですか？' +term: + - クロージャ + - カプセル化 --- ## クロージャ：関数が状態を持つ仕組み -クロージャ (Closure) は、この章の最重要トピックです。 +**[[クロージャ]] (Closure)** は、この章の最重要トピックです。 一言で言えば、**「外側の関数のスコープにある[[変数]]を、外側の関数の実行終了後も参照し続ける関数」**のことです。 -**なぜクロージャを使うのか？** +**なぜ[[クロージャ]]を使うのか？** -1. **カプセル化 (Encapsulation):** [[変数]]を隠蔽し、特定の関数経由でしか変更できないようにすることで、予期せぬバグを防ぎます。 -2. **状態の保持:** グローバル変数を使わずに、関数単位で永続的な状態を持てます。 -3. **関数ファクトリ:** 設定の異なる関数を動的に生成する場合に役立ちます。 +1. **[[カプセル化]] (Encapsulation):** [[変数]]を隠蔽し、特定の[[関数]]経由でしか変更できないようにすることで、予期せぬバグを防ぎます。 +2. **状態の保持:** グローバル[[変数]]を使わずに、[[関数]]単位で永続的な状態を持てます。 +3. **関数ファクトリ:** 設定の異なる[[関数]]を動的に生成する場合に役立ちます。 プライベートな[[変数]]を持つカウンタを作ってみましょう。 diff --git a/public/docs/javascript/3-functions-closures/6-0-summary.md b/public/docs/javascript/3-functions-closures/6-0-summary.md index 5de59738..364a4d94 100644 --- a/public/docs/javascript/3-functions-closures/6-0-summary.md +++ b/public/docs/javascript/3-functions-closures/6-0-summary.md @@ -7,8 +7,8 @@ question: [] ## この章のまとめ - * **関数定義:** 巻き上げが起こる「関数宣言」と、起こらない「関数式（アロー関数含む）」がある。 - * **アロー関数:** `(args) => body` の形式で記述し、`this` の挙動が従来と異なる。 - * **引数:** デフォルト引数とRestパラメータ(`...args`)で柔軟な引数処理が可能。 - * **レキシカルスコープ:** 関数は「定義された場所」のスコープを記憶する。 - * **クロージャ:** 内部関数が外部関数の変数を参照し続ける仕組み。データの隠蔽や状態保持に使われる。 + * **関数定義:** [[巻き上げ]]が起こる「[[関数宣言]]」と、起こらない「[[関数式]]（[[アロー関数]]含む）」がある。 + * **[[アロー関数]]:** `(args) => body` の形式で記述し、[[`this`]] の挙動が従来と異なる。 + * **引数:** [[デフォルト引数]]と[[Restパラメータ]](`...args`)で柔軟な引数処理が可能。 + * **[[レキシカルスコープ]]:** [[関数]]は「定義された場所」の[[スコープ]]を記憶する。 + * **[[クロージャ]]:** 内部[[関数]]が外部関数の[[変数]]を参照し続ける仕組み。データの隠蔽や状態保持に使われる。 diff --git a/public/docs/javascript/3-functions-closures/6-1-practice1.md b/public/docs/javascript/3-functions-closures/6-1-practice1.md index eeae37e5..57f76038 100644 --- a/public/docs/javascript/3-functions-closures/6-1-practice1.md +++ b/public/docs/javascript/3-functions-closures/6-1-practice1.md @@ -9,7 +9,7 @@ question: ### 練習問題1: アロー関数への書き換え -以下の関数宣言を、アロー関数 `isEven` に書き換えてください。ただし、省略可能な記号（カッコやreturnなど）は可能な限り省略して最短で記述してください。 +以下の[[関数宣言]]を、[[アロー関数]] `isEven` に書き換えてください。ただし、省略可能な記号（カッコやreturnなど）は可能な限り省略して最短で記述してください。 ```js:practice4_1.js function isEven(n) { diff --git a/public/docs/javascript/3-functions-closures/6-2-practice2.md b/public/docs/javascript/3-functions-closures/6-2-practice2.md index 7eb3601d..4f7a76de 100644 --- a/public/docs/javascript/3-functions-closures/6-2-practice2.md +++ b/public/docs/javascript/3-functions-closures/6-2-practice2.md @@ -7,7 +7,7 @@ question: [] ### 問題2: クロージャによる掛け算生成器 -`createMultiplier` という関数を作成してください。この関数は[[数値]] `x` を引数に取り、呼び出すたびに「引数を `x` 倍して返す関数」を返します。 +`createMultiplier` という[[関数]]を作成してください。この[[関数]]は[[数値]] `x` を引数に取り、呼び出すたびに「引数を `x` 倍して返す[[関数]]」を返します。 **使用例:** diff --git a/public/docs/javascript/4-this/-intro.md b/public/docs/javascript/4-this/-intro.md index c51fe1c7..d575ffae 100644 --- a/public/docs/javascript/4-this/-intro.md +++ b/public/docs/javascript/4-this/-intro.md @@ -1,5 +1,5 @@ -JavaScriptの学習、お疲れ様です。他の言語（Java, C\#, Pythonなど）の経験がある方にとって、JavaScriptの `this` は最も直感に反し、バグの温床となりやすい機能の一つです。 +JavaScriptの学習、お疲れ様です。他の言語（Java, C\#, Pythonなど）の経験がある方にとって、JavaScriptの [[`this`]] は最も直感に反し、バグの温床となりやすい機能の一つです。 -多くの言語において `this`（または `self`）は「そのクラスのインスタンス」を指す静的なものですが、**JavaScriptの `this` は「関数がどのように呼ばれたか」によって動的に変化します。** +多くの言語において [[`this`]]（または `self`）は「その[[クラス]]の[[インスタンス]]」を指す静的なものですが、**JavaScriptの [[`this`]] は「[[関数]]がどのように呼ばれたか」によって動的に変化します。** この章では、その複雑な挙動を解き明かし、自在にコントロールする方法を学びます。 diff --git a/public/docs/javascript/4-this/1-0-this-basic.md b/public/docs/javascript/4-this/1-0-this-basic.md index dfdb801b..da48bead 100644 --- a/public/docs/javascript/4-this/1-0-this-basic.md +++ b/public/docs/javascript/4-this/1-0-this-basic.md @@ -10,18 +10,23 @@ question: - コード例で、`person.show()`と`standaloneShow()`で`this`の値が異なるのはなぜですか？ - '`person.show`を`standaloneShow`に代入した時点でオブジェクトとの結びつきが失われる、という部分がよく理解できません。' - '`toString`メソッドは、`console.log`での出力にどのように影響するのですか？' +term: + - this + - Strict Mode + - Strictモード + - グローバルオブジェクト --- ## `this` は呼び出し方で決まる -JavaScriptにおける関数（アロー関数を除く）の `this` は、**「定義された場所」ではなく「呼び出された場所（Call Site）」**によって決定されます。 +JavaScriptにおける[[関数]]（[[アロー関数]]を除く）の [[`this`]] は、**「定義された場所」ではなく「呼び出された場所（Call Site）」**によって決定されます。 大きく分けて、以下の3つのパターンを理解すれば基本は押さえられます。 -* **メソッド呼び出し:** [[オブジェクト]]のプロパティとして関数を呼び出した場合（`obj.method()`）、`this` は**ドットの左側の[[オブジェクト]]**（レシーバ）になります。これは他の言語のメンバ関数に近い挙動です。 -* **関数呼び出し:** 関数を単体で呼び出した場合（`func()`）、`this` は**グローバルオブジェクト**（ブラウザでは `window`、Node.jsでは `global`）になります。 -ただし、**Strict Mode（`"use strict"`）**では、安全のため [[`undefined`]] になります。 -* **コンストラクタ呼び出し:** `new` キーワードをつけて呼び出した場合、`this` は**新しく生成されたインスタンス**になります（これは[[./6]]で詳しく扱います）。 +* **[[メソッド]]呼び出し:** [[オブジェクト]]の[[プロパティ]]として[[関数]]を呼び出した場合（`obj.method()`）、[[`this`]] は**ドットの左側の[[オブジェクト]]**（レシーバ）になります。これは他の言語のメンバ関数に近い挙動です。 +* **[[関数]]呼び出し:** [[関数]]を単体で呼び出した場合（`func()`）、[[`this`]] は**[[グローバルオブジェクト]]**（ブラウザでは `window`、Node.jsでは `global`）になります。 +ただし、**[[Strict Mode]]（`"use strict"`）**では、安全のため [[`undefined`]] になります。 +* **コンストラクタ呼び出し:** [[`new`]] キーワードをつけて呼び出した場合、[[`this`]] は**新しく生成された[[インスタンス]]**になります（これは[[./6]]で詳しく扱います）。 以下のコードで、同じ関数でも呼び出し方によって `this` が変わる様子を確認しましょう。 @@ -56,4 +61,4 @@ this is: undefined ``` > [!TIP] -> `person.show` を `standaloneShow` に代入した時点で、[[オブジェクト]]との結びつきは失われます。そのため、`standaloneShow()` と実行すると「関数呼び出し」扱いとなり、`this` は [[`undefined`]]（非Strict Modeならグローバルオブジェクト）になります。これが「`this` が消える」現象の正体です。 +> `person.show` を `standaloneShow` に代入した時点で、[[オブジェクト]]との結びつきは失われます。そのため、`standaloneShow()` と実行すると「[[関数]]呼び出し」扱いとなり、[[`this`]] は [[`undefined`]]（非Strict Modeなら[[グローバルオブジェクト]]）になります。これが「[[`this`]] が消える」現象の正体です。 diff --git a/public/docs/javascript/4-this/2-0-bind-basic.md b/public/docs/javascript/4-this/2-0-bind-basic.md index f2d03c78..3ec4dfa3 100644 --- a/public/docs/javascript/4-this/2-0-bind-basic.md +++ b/public/docs/javascript/4-this/2-0-bind-basic.md @@ -8,4 +8,4 @@ question: ## `this` を固定する: bind, call, apply -「関数呼び出し」でも特定の[[オブジェクト]]を `this` として扱いたい場合があります。JavaScriptには、`this` を明示的に指定（束縛）するためのメソッドが3つ用意されています。 +「[[関数]]呼び出し」でも特定の[[オブジェクト]]を [[`this`]] として扱いたい場合があります。JavaScriptには、[[`this`]] を明示的に指定（束縛）するための[[メソッド]]が3つ用意されています。 diff --git a/public/docs/javascript/4-this/2-1-call-apply.md b/public/docs/javascript/4-this/2-1-call-apply.md index 6a937437..c527b27c 100644 --- a/public/docs/javascript/4-this/2-1-call-apply.md +++ b/public/docs/javascript/4-this/2-1-call-apply.md @@ -5,14 +5,17 @@ level: 3 question: - '`call`と`apply`の第一引数に渡す`thisArg`には、どのような値を指定するのですか？' - '`call`と`apply`は、どちらを優先して使うべきですか？' +term: + - call + - apply --- ### call と apply -これらは関数を**即座に実行**します。第一引数に `this` としたい[[オブジェクト]]を渡します。 +これらは[[関数]]を**即座に実行**します。第一引数に [[`this`]] としたい[[オブジェクト]]を渡します。 - * `call(thisArg, arg1, arg2, ...)`: 引数をカンマ区切りで渡す。 - * `apply(thisArg, [argsArray])`: 引数を配列として渡す。 + * `[[call]](thisArg, arg1, arg2, ...)`: 引数をカンマ区切りで渡す。 + * `[[apply]](thisArg, [argsArray])`: 引数を[[配列]]として渡す。 ```js-repl > function greet(greeting, punctuation) { return `${greeting}, ${this.name}${punctuation}`; } diff --git a/public/docs/javascript/4-this/2-2-bind.md b/public/docs/javascript/4-this/2-2-bind.md index 44e543af..28fd894d 100644 --- a/public/docs/javascript/4-this/2-2-bind.md +++ b/public/docs/javascript/4-this/2-2-bind.md @@ -9,11 +9,13 @@ question: `brokenStart()`が`Cannot read property 'type' of undefined`というエラーになるのは、`this.type`がなぜ読めないのですか？ - '`engine.start.bind(engine)`と書くとき、なぜ`engine`を2回書くのですか？' +term: + - bind --- ### bind -`bind` は関数を実行せず、**`this` を固定した新しい関数**を返します。これは、イベントリスナーやコールバック関数としてメソッドを渡す際に非常に重要です。 +[[`bind`]] は[[関数]]を実行せず、**[[`this`]] を固定した新しい[[関数]]**を返します。これは、イベントリスナーや[[コールバック関数]]として[[メソッド]]を渡す際に非常に重要です。 ```js:bind-example.js const engine = { diff --git a/public/docs/javascript/4-this/3-0-arrow-func.md b/public/docs/javascript/4-this/3-0-arrow-func.md index 0639449a..170d0d6e 100644 --- a/public/docs/javascript/4-this/3-0-arrow-func.md +++ b/public/docs/javascript/4-this/3-0-arrow-func.md @@ -13,11 +13,11 @@ question: ## アロー関数と `this` -ES2015 (ES6) で導入されたアロー関数は、これまで説明したルールとは全く異なる挙動をします。 +ES2015 (ES6) で導入された[[アロー関数]]は、これまで説明したルールとは全く異なる挙動をします。 -アロー関数には**独自の `this` が存在しません**。アロー関数内部の `this` は、**その関数が定義されたスコープ（レキシカルスコープ）の `this`** をそのまま参照します。 +[[アロー関数]]には**独自の [[`this`]] が存在しません**。[[アロー関数]]内部の [[`this`]] は、**その[[関数]]が定義された[[スコープ]]（[[レキシカルスコープ]]）の [[`this`]]** をそのまま参照します。 -これは、「コールバック関数内で `this` が変わってしまう問題」を解決するのに最適です。 +これは、「[[コールバック関数]]内で [[`this`]] が変わってしまう問題」を解決するのに最適です。 `setTimeout` などのコールバック内でメソッドを使いたい場面を比較してみましょう。 @@ -63,4 +63,4 @@ Modern: 1 ``` > [!WARNING] -> アロー関数は便利な反面、`this` を動的に変更することができません（`call` や `bind` を使っても無視されます）。そのため、動的なコンテキストが必要な場合（例：[[オブジェクト]]のメソッド定義そのものや、ライブラリ等で `this` を注入される場合）には通常の関数式を使います。 +> [[アロー関数]]は便利な反面、[[`this`]] を動的に変更することができません（[[`call`]] や [[`bind`]] を使っても無視されます）。そのため、動的なコンテキストが必要な場合（例：[[オブジェクト]]の[[メソッド]]定義そのものや、ライブラリ等で [[`this`]] を注入される場合）には通常の[[関数式]]を使います。 diff --git a/public/docs/javascript/4-this/4-0-summary.md b/public/docs/javascript/4-this/4-0-summary.md index 0f3f3c5e..6ffd8cca 100644 --- a/public/docs/javascript/4-this/4-0-summary.md +++ b/public/docs/javascript/4-this/4-0-summary.md @@ -7,11 +7,11 @@ question: [] ## この章のまとめ -JavaScriptの `this` は、他の静的な言語とは異なり「呼び出し時」に解決されます。 +JavaScriptの [[`this`]] は、他の静的な言語とは異なり「呼び出し時」に解決されます。 -1. **メソッド呼び出し (`obj.method()`)**: `this` は `obj`。 -2. **関数呼び出し (`func()`)**: `this` は [[`undefined`]] (Strict Mode) またはグローバルオブジェクト。 -3. **明示的な指定**: `call`, `apply` で一時的に、`bind` で永続的に `this` を指定可能。 -4. **アロー関数**: 独自の `this` を持たず、外側のスコープの `this` をそのまま使う（レキシカルスコープ）。 +1. **[[メソッド]]呼び出し (`obj.method()`)**: [[`this`]] は `obj`。 +2. **[[関数]]呼び出し (`func()`)**: [[`this`]] は [[`undefined`]] ([[Strict Mode]]) または[[グローバルオブジェクト]]。 +3. **明示的な指定**: [[`call`]], [[`apply`]] で一時的に、[[`bind`]] で永続的に [[`this`]] を指定可能。 +4. **[[アロー関数]]**: 独自の [[`this`]] を持たず、外側の[[スコープ]]の [[`this`]] をそのまま使う（[[レキシカルスコープ]]）。 -[[./next]]では、この `this` を活用してオブジェクト指向プログラミングの核心である「オブジェクトとプロトタイプ」について学びます。 +[[./next]]では、この [[`this`]] を活用してオブジェクト指向プログラミングの核心である「[[オブジェクト]]と[[プロトタイプ]]」について学びます。 diff --git a/public/docs/javascript/4-this/4-1-practice1.md b/public/docs/javascript/4-this/4-1-practice1.md index 60976035..e6797d32 100644 --- a/public/docs/javascript/4-this/4-1-practice1.md +++ b/public/docs/javascript/4-this/4-1-practice1.md @@ -10,8 +10,8 @@ question: 以下のコードは、ボタンクリック時（ここではシミュレーション）にユーザー名を表示しようとしていますが、エラーになります。 -1. `bind` を使って修正してください。 -2. `greet` メソッド自体をアロー関数に変更するアプローチではなく、呼び出し側を修正する形で解答してください。 +1. [[`bind`]] を使って修正してください。 +2. `greet` [[メソッド]]自体を[[アロー関数]]に変更するアプローチではなく、呼び出し側を修正する形で解答してください。 ```js:practice5_1.js const user = { diff --git a/public/docs/javascript/4-this/4-2-practice2.md b/public/docs/javascript/4-this/4-2-practice2.md index a961a015..8ff8e4c6 100644 --- a/public/docs/javascript/4-this/4-2-practice2.md +++ b/public/docs/javascript/4-this/4-2-practice2.md @@ -9,8 +9,8 @@ question: ### 問題2: アロー関数の特性 -以下の `calculator` [[オブジェクト]]にはバグがあります。`multiply` メソッドが正しい結果（配列の各要素を `factor` 倍する）を返すように修正してください。 -ヒント：`map` の中のコールバック関数に注目してください。 +以下の `calculator` [[オブジェクト]]にはバグがあります。`multiply` [[メソッド]]が正しい結果（[[配列]]の各要素を `factor` 倍する）を返すように修正してください。 +ヒント：[[`map`]] の中の[[コールバック関数]]に注目してください。 ```js:practice5_2.js const calculator = { diff --git a/public/docs/javascript/5-objects-prototype/-intro.md b/public/docs/javascript/5-objects-prototype/-intro.md index 3381679a..1688e6ae 100644 --- a/public/docs/javascript/5-objects-prototype/-intro.md +++ b/public/docs/javascript/5-objects-prototype/-intro.md @@ -1,3 +1,3 @@ -他の言語（Java, C\#, Pythonなど）の経験がある方にとって、JavaScriptの「オブジェクト」と「継承」のモデルは最も混乱しやすい部分の一つです。JavaScriptはクラスベースではなく、**プロトタイプベース**のオブジェクト指向言語です。 +他の言語（Java, C\#, Pythonなど）の経験がある方にとって、JavaScriptの「[[オブジェクト]]」と「[[継承]]」のモデルは最も混乱しやすい部分の一つです。JavaScriptはクラスベースではなく、**[[プロトタイプベース]]**のオブジェクト指向言語です。 -本章では、ES6（ECMAScript 2015）以降の`class`構文（[[./6]]で扱います）の裏側で実際に何が起きているのか、その仕組みの根幹である「プロトタイプチェーン」について解説します。 +本章では、ES6（ECMAScript 2015）以降の[[`class`]]構文（[[./6]]で扱います）の裏側で実際に何が起きているのか、その仕組みの根幹である「[[プロトタイプチェーン]]」について解説します。 diff --git a/public/docs/javascript/5-objects-prototype/1-0-obj-literal.md b/public/docs/javascript/5-objects-prototype/1-0-obj-literal.md index 5c0da330..30f8cf87 100644 --- a/public/docs/javascript/5-objects-prototype/1-0-obj-literal.md +++ b/public/docs/javascript/5-objects-prototype/1-0-obj-literal.md @@ -7,11 +7,14 @@ question: - キーにハイフンが含まれる場合、なぜ引用符が必要なのですか？ - オブジェクトの中にオブジェクトを入れ子にできるのはなぜですか？ - '`book.title` と `book["page-count"]` の違いは何ですか？' +term: + - オブジェクトリテラル + - プロパティ --- ## オブジェクトリテラルとプロパティ -JavaScriptにおける[[オブジェクト]]は、基本的にはキー（プロパティ名）と値のコレクション（連想配列やハッシュマップに近いもの）です。最も一般的な生成方法は**オブジェクトリテラル** `{...}` を使うことです。 +JavaScriptにおける[[オブジェクト]]は、基本的にはキー（[[プロパティ]]名）と値のコレクション（連想配列やハッシュマップに近いもの）です。最も一般的な生成方法は**[[オブジェクトリテラル]]** `{...}` を使うことです。 ```js-repl > const book = { diff --git a/public/docs/javascript/5-objects-prototype/1-1-properties.md b/public/docs/javascript/5-objects-prototype/1-1-properties.md index 6a5f7b3d..345d734c 100644 --- a/public/docs/javascript/5-objects-prototype/1-1-properties.md +++ b/public/docs/javascript/5-objects-prototype/1-1-properties.md @@ -10,7 +10,7 @@ question: ### プロパティの追加・削除 -動的な言語であるJavaScriptでは、[[オブジェクト]]作成後にプロパティを追加・削除できます。 +動的な言語であるJavaScriptでは、[[オブジェクト]]作成後に[[プロパティ]]を追加・削除できます。 ```js-repl > const config = { env: "production" }; diff --git a/public/docs/javascript/5-objects-prototype/2-0-method-this-recall.md b/public/docs/javascript/5-objects-prototype/2-0-method-this-recall.md index 8ae6a6ad..3fecd211 100644 --- a/public/docs/javascript/5-objects-prototype/2-0-method-this-recall.md +++ b/public/docs/javascript/5-objects-prototype/2-0-method-this-recall.md @@ -5,12 +5,14 @@ level: 2 question: - メソッドとは何ですか？普通の関数と何が違うのですか？ - ES6からの短縮記法が推奨されるのはなぜですか？ +term: + - メソッド --- ## メソッドと this（復習） -[[オブジェクト]]のプロパティには関数も設定できます。これを**メソッド**と呼びます。 -[[./4]]で学んだ通り、メソッド呼び出しにおける `this` は、「ドットの左側にある[[オブジェクト]]（レシーバ）」を指します。 +[[オブジェクト]]の[[プロパティ]]には[[関数]]も設定できます。これを**[[メソッド]]**と呼びます。 +[[./4]]で学んだ通り、[[メソッド]]呼び出しにおける [[`this`]] は、「ドットの左側にある[[オブジェクト]]（レシーバ）」を指します。 ```js-repl > const counter = { diff --git a/public/docs/javascript/5-objects-prototype/3-0-prototype-basic.md b/public/docs/javascript/5-objects-prototype/3-0-prototype-basic.md index d49e20db..0ad40e91 100644 --- a/public/docs/javascript/5-objects-prototype/3-0-prototype-basic.md +++ b/public/docs/javascript/5-objects-prototype/3-0-prototype-basic.md @@ -6,10 +6,15 @@ question: - 「親となる別のオブジェクトへの隠されたリンク」とは具体的にどういうことですか？ - プロトタイプがあることで、どんなメリットがありますか？ - オブジェクト自身がプロパティを持っていなくても、プロトタイプを見に行くのはなぜですか？ +term: + - プロトタイプ + - prototype + - __proto__ + - プロトタイプベース --- ## プロトタイプとは何か？ -ここからが本章の核心です。JavaScriptのすべての[[オブジェクト]]は、自身の親となる別の[[オブジェクト]]への隠されたリンクを持っています。このリンク先のオブジェクトを**プロトタイプ**と呼びます。 +ここからが本章の核心です。JavaScriptのすべての[[オブジェクト]]は、自身の親となる別の[[オブジェクト]]への隠されたリンクを持っています。このリンク先のオブジェクトを**[[プロトタイプ]]**と呼びます。 -[[オブジェクト]]からプロパティを読み取ろうとしたとき、その[[オブジェクト]]自身がプロパティを持っていなければ、JavaScriptエンジンは自動的にプロトタイプを探しに行きます。 +[[オブジェクト]]から[[プロパティ]]を読み取ろうとしたとき、その[[オブジェクト]]自身が[[プロパティ]]を持っていなければ、JavaScriptエンジンは自動的に[[プロトタイプ]]を探しに行きます。 diff --git a/public/docs/javascript/5-objects-prototype/3-1-getprototypeof.md b/public/docs/javascript/5-objects-prototype/3-1-getprototypeof.md index 33073619..795997fa 100644 --- a/public/docs/javascript/5-objects-prototype/3-1-getprototypeof.md +++ b/public/docs/javascript/5-objects-prototype/3-1-getprototypeof.md @@ -6,11 +6,13 @@ question: - '`__proto__` と `Object.getPrototypeOf` は同じプロトタイプにアクセスしているのですか？' - なぜ `__proto__` は非推奨なのですか？ - '`Object.prototype` の親が `null` なのはなぜですか？' +term: + - Object.getPrototypeOf --- ### `__proto__` と `Object.getPrototypeOf` -歴史的経緯により、多くのブラウザで `obj.__proto__` というプロパティを通じてプロトタイプにアクセスできますが、現在の標準的な方法は `Object.getPrototypeOf(obj)` です。 +歴史的経緯により、多くのブラウザで `obj.[[__proto__]]` という[[プロパティ]]を通じて[[プロトタイプ]]にアクセスできますが、現在の標準的な方法は `[[Object.getPrototypeOf]](obj)` です。 ```js-repl > const arr = [1, 2, 3]; diff --git a/public/docs/javascript/5-objects-prototype/4-0-prototype-chain.md b/public/docs/javascript/5-objects-prototype/4-0-prototype-chain.md index a1c0bede..9970dcbd 100644 --- a/public/docs/javascript/5-objects-prototype/4-0-prototype-chain.md +++ b/public/docs/javascript/5-objects-prototype/4-0-prototype-chain.md @@ -7,18 +7,21 @@ question: - 複数のプロトタイプを辿ると、処理が遅くなったりしませんか？ - '`__proto__` への代入が学習目的以外では非推奨なのはなぜですか？' - プロパティの追加によるシャドーイングとは何ですか？ +term: + - プロトタイプチェーン + - プロトタイプ継承 --- ## プロトタイプチェーンによる継承の仕組み -ある[[オブジェクト]]のプロパティにアクセスした際、JavaScriptは以下の順序で探索を行います。 +ある[[オブジェクト]]の[[プロパティ]]にアクセスした際、JavaScriptは以下の順序で探索を行います。 1. その[[オブジェクト]]自身（Own Property）が持っているか？ -2. 持っていなければ、その[[オブジェクト]]のプロトタイプが持っているか？ -3. それでもなければ、プロトタイプのプロトタイプが持っているか？ +2. 持っていなければ、その[[オブジェクト]]の[[プロトタイプ]]が持っているか？ +3. それでもなければ、[[プロトタイプ]]の[[プロトタイプ]]が持っているか？ 4. [[`null`]] に到達するまで繰り返し、見つからなければ [[`undefined`]] を返す。 -この連鎖を**プロトタイプチェーン**と呼びます。クラス継承のように型定義をコピーするのではなく、**リンクを辿って委譲（Delegation）する**仕組みです。 +この連鎖を**[[プロトタイプチェーン]]**と呼びます。[[クラス]]の[[継承]]のように型定義をコピーするのではなく、**リンクを辿って委譲（Delegation）する**仕組みです。 以下のコードで、具体的な動作を確認してみましょう。 diff --git a/public/docs/javascript/5-objects-prototype/5-0-object-create-basic.md b/public/docs/javascript/5-objects-prototype/5-0-object-create-basic.md index e2e4b932..8b265d15 100644 --- a/public/docs/javascript/5-objects-prototype/5-0-object-create-basic.md +++ b/public/docs/javascript/5-objects-prototype/5-0-object-create-basic.md @@ -8,4 +8,4 @@ question: ## Object.create() とコンストラクタ関数 -`__proto__` を直接操作するのはパフォーマンスや標準化の観点から推奨されません。プロトタイプを指定して[[オブジェクト]]を生成する正しい方法は2つあります。 +`[[__proto__]]` を直接操作するのはパフォーマンスや標準化の観点から推奨されません。[[プロトタイプ]]を指定して[[オブジェクト]]を生成する正しい方法は2つあります。 diff --git a/public/docs/javascript/5-objects-prototype/5-1-object-create.md b/public/docs/javascript/5-objects-prototype/5-1-object-create.md index 93c448c9..57a4d37b 100644 --- a/public/docs/javascript/5-objects-prototype/5-1-object-create.md +++ b/public/docs/javascript/5-objects-prototype/5-1-object-create.md @@ -5,11 +5,14 @@ level: 3 question: - '`Object.create()` はどんな時に使うのが適切ですか？' - '`const obj = {};` と `const obj = Object.create(proto);` は何が違うのですか？' +term: + - Object.create + - Object.create() --- ### 1\. Object.create() -指定した[[オブジェクト]]をプロトタイプとする新しい空の[[オブジェクト]]を生成します。 +指定した[[オブジェクト]]を[[プロトタイプ]]とする新しい空の[[オブジェクト]]を生成します。 ```js-repl > const proto = { greet: function() { return "Hello"; } }; diff --git a/public/docs/javascript/5-objects-prototype/5-2-new-constructor.md b/public/docs/javascript/5-objects-prototype/5-2-new-constructor.md index e87a0a77..cfc222ab 100644 --- a/public/docs/javascript/5-objects-prototype/5-2-new-constructor.md +++ b/public/docs/javascript/5-objects-prototype/5-2-new-constructor.md @@ -7,14 +7,19 @@ question: - '`new` 演算子は何をしているのですか？' - '`Func.prototype` と `user1.__proto__` は何が違うのですか？' - '`User.prototype` にメソッドを定義するとメモリが節約されるのはなぜですか？' +term: + - コンストラクタ関数 + - new + - new演算子 + - インスタンス --- ### 2\. コンストラクタ関数（new演算子） -ES6の `class` が登場する前、JavaScriptでは関数をコンストラクタとして使用し、`new` 演算子を使ってインスタンスを生成していました。これは現在でも多くのライブラリの内部で使用されている重要なパターンです。 +ES6の [[`class`]] が登場する前、JavaScriptでは[[関数]]を[[コンストラクタ]]として使用し、[[`new`]] 演算子を使って[[インスタンス]]を生成していました。これは現在でも多くのライブラリの内部で使用されている重要なパターンです。 - * 関数オブジェクトは `prototype` という特別なプロパティを持っています（`__proto__`とは別物です）。 - * `new Func()` すると、作られたインスタンスの `__proto__` に `Func.prototype` がセットされます。 + * [[関数]][[オブジェクト]]は `[[prototype]]` という特別な[[プロパティ]]を持っています（`[[__proto__]]`とは別物です）。 + * `[[new]] Func()` すると、作られた[[インスタンス]]の `[[__proto__]]` に `Func.prototype` がセットされます。 ```js:constructor_pattern.js // コンストラクタ関数（慣習として大文字で始める） @@ -50,5 +55,5 @@ true > **重要な区別:** > -> * `obj.__proto__`: オブジェクトの実の親（リンク先）。 -> * `Func.prototype`: その関数を `new` したときに、生成されるインスタンスの `__proto__` に代入される**テンプレート**。 +> * `obj.[[__proto__]]`: [[オブジェクト]]の実の親（リンク先）。 +> * `Func.[[prototype]]`: その[[関数]]を [[`new`]] したときに、生成される[[インスタンス]]の `[[__proto__]]` に代入される**テンプレート**。 diff --git a/public/docs/javascript/5-objects-prototype/6-0-summary.md b/public/docs/javascript/5-objects-prototype/6-0-summary.md index 45382a6b..bf10c6ba 100644 --- a/public/docs/javascript/5-objects-prototype/6-0-summary.md +++ b/public/docs/javascript/5-objects-prototype/6-0-summary.md @@ -7,7 +7,7 @@ question: [] ## この章のまとめ -1. JavaScriptはクラスベースではなく、**プロトタイプベース**の継承を行う。 -2. [[オブジェクト]]は隠しプロパティ（`[[Prototype]]`）を持ち、プロパティが見つからない場合にそこを探索する（プロトタイプチェーン）。 -3. `Object.create(proto)` は、特定のプロトタイプを持つ[[オブジェクト]]を直接生成する。 -4. コンストラクタ関数と `new` 演算子を使うと、`Func.prototype` を親に持つインスタンスを生成できる。これがJavaなどの「クラス」に近い振る舞いを模倣する仕組みである。 +1. JavaScriptはクラスベースではなく、**[[プロトタイプベース]]**の[[継承]]を行う。 +2. [[オブジェクト]]は隠し[[プロパティ]]（`[[Prototype]]`）を持ち、[[プロパティ]]が見つからない場合にそこを探索する（[[プロトタイプチェーン]]）。 +3. `[[Object.create]](proto)` は、特定の[[プロトタイプ]]を持つ[[オブジェクト]]を直接生成する。 +4. [[コンストラクタ関数]]と [[`new`]] 演算子を使うと、`Func.[[prototype]]` を親に持つ[[インスタンス]]を生成できる。これがJavaなどの「[[クラス]]」に近い振る舞いを模倣する仕組みである。 diff --git a/public/docs/javascript/5-objects-prototype/6-1-practice1.md b/public/docs/javascript/5-objects-prototype/6-1-practice1.md index c8bec66d..4125fbeb 100644 --- a/public/docs/javascript/5-objects-prototype/6-1-practice1.md +++ b/public/docs/javascript/5-objects-prototype/6-1-practice1.md @@ -9,12 +9,12 @@ question: ### 練習問題1: 基本的なプロトタイプ継承 -`Object.create()` を使用して、以下の要件を満たすコードを書いてください。 +`[[Object.create]]()` を使用して、以下の要件を満たすコードを書いてください。 -1. `robot` [[オブジェクト]]を作成し、`battery: 100` というプロパティと、バッテリーを10減らして残量を表示する `work` メソッドを持たせる。 -2. `robot` をプロトタイプとする `cleaningRobot` [[オブジェクト]]を作成する。 -3. `cleaningRobot` 自身に `type: "cleaner"` というプロパティを追加する。 -4. `cleaningRobot.work()` を呼び出し、正しく動作（プロトタイプチェーンの利用）を確認する。 +1. `robot` [[オブジェクト]]を作成し、`battery: 100` という[[プロパティ]]と、バッテリーを10減らして残量を表示する `work` [[メソッド]]を持たせる。 +2. `robot` を[[プロトタイプ]]とする `cleaningRobot` [[オブジェクト]]を作成する。 +3. `cleaningRobot` 自身に `type: "cleaner"` という[[プロパティ]]を追加する。 +4. `cleaningRobot.work()` を呼び出し、正しく動作（[[プロトタイプチェーン]]の利用）を確認する。 ```js:practice6_1.js ``` diff --git a/public/docs/javascript/5-objects-prototype/6-2-practice2.md b/public/docs/javascript/5-objects-prototype/6-2-practice2.md index cd30659d..48672c5c 100644 --- a/public/docs/javascript/5-objects-prototype/6-2-practice2.md +++ b/public/docs/javascript/5-objects-prototype/6-2-practice2.md @@ -10,11 +10,11 @@ question: ### 練習問題2: コンストラクタ関数 -コンストラクタ関数 `Item` を作成してください。 +[[コンストラクタ関数]] `Item` を作成してください。 -1. `Item` は引数 `name` と `price` を受け取り、プロパティとして保持する。 -2. `Item.prototype` に `getTaxIncludedPrice` メソッドを追加する。これは税率10%を加えた価格を返す。 -3. `new Item("Apple", 100)` でインスタンスを作成し、税込価格が110になることを確認する。 +1. `Item` は引数 `name` と `price` を受け取り、[[プロパティ]]として保持する。 +2. `Item.[[prototype]]` に `getTaxIncludedPrice` [[メソッド]]を追加する。これは税率10%を加えた価格を返す。 +3. `[[new]] Item("Apple", 100)` で[[インスタンス]]を作成し、税込価格が110になることを確認する。 ```js:practice6_2.js ``` diff --git a/public/docs/javascript/6-classes/-intro.md b/public/docs/javascript/6-classes/-intro.md index 172b8273..aa421baf 100644 --- a/public/docs/javascript/6-classes/-intro.md +++ b/public/docs/javascript/6-classes/-intro.md @@ -1,5 +1,5 @@ -[[./5]]では、JavaScriptのオブジェクト指向の核心である「プロトタイプ」について学びました。他の言語（Java, C\#, Pythonなど）の経験者にとって、プロトタイプチェーンによる継承は柔軟ですが、少し直感的ではない部分もあったかもしれません。 +[[./5]]では、JavaScriptのオブジェクト指向の核心である「[[プロトタイプ]]」について学びました。他の言語（Java, C\#, Pythonなど）の経験者にとって、[[プロトタイプチェーン]]による[[継承]]は柔軟ですが、少し直感的ではない部分もあったかもしれません。 -ES6 (ECMAScript 2015) から導入された **`class` 構文** は、プロトタイプベースの継承メカニズムを隠蔽し、一般的なクラスベースのオブジェクト指向言語に近い記述を可能にするものです。これを「糖衣構文（Syntactic Sugar）」と呼びます。 +ES6 (ECMAScript 2015) から導入された **[[`class`]] 構文** は、[[プロトタイプベース]]の[[継承]]メカニズムを隠蔽し、一般的なクラスベースのオブジェクト指向言語に近い記述を可能にするものです。これを「[[糖衣構文]]（[[シンタックスシュガー]]）」と呼びます。 -この章では、現代のJavaScript開発で標準となっているクラスの定義方法、継承、そして比較的新しい機能であるプライベートフィールドについて解説します。 +この章では、現代のJavaScript開発で標準となっている[[クラス]]の定義方法、[[継承]]、そして比較的新しい機能である[[プライベートフィールド]]について解説します。 diff --git a/public/docs/javascript/6-classes/1-0-class-constructor.md b/public/docs/javascript/6-classes/1-0-class-constructor.md index 580a2022..8f5e0818 100644 --- a/public/docs/javascript/6-classes/1-0-class-constructor.md +++ b/public/docs/javascript/6-classes/1-0-class-constructor.md @@ -8,13 +8,18 @@ question: - '`this.name = name;` の `this` は何を示しているのですか？' - コードの実行結果で `undefined` と表示されるのは、エラーではないのですか？ - クラスなのに `typeof User` が `function` になるのはなぜですか？ +term: + - クラス + - class + - constructor + - コンストラクタ --- ## クラスの定義とコンストラクタ -JavaScriptのクラスは `class` キーワードを使って定義します。初期化処理は `constructor` という特別なメソッド内で行います。 +JavaScriptの[[クラス]]は [[`class`]] キーワードを使って定義します。初期化処理は [[`constructor`]] という特別な[[メソッド]]内で行います。 -基本的に、クラス定義の内部は自動的に **Strict Mode (`'use strict'`)** で実行されます。 +基本的に、[[クラス]]定義の内部は自動的に **[[Strict Mode]] (`'use strict'`)** で実行されます。 ```js-repl > class User { diff --git a/public/docs/javascript/6-classes/1-1-class-expr.md b/public/docs/javascript/6-classes/1-1-class-expr.md index 3a578888..b40de5b5 100644 --- a/public/docs/javascript/6-classes/1-1-class-expr.md +++ b/public/docs/javascript/6-classes/1-1-class-expr.md @@ -5,11 +5,13 @@ level: 3 question: - クラスを式として定義するメリットは何ですか？ - 「あまり頻繁には使われませんが」とありますが、どのような場合に使うべきなのでしょうか？ +term: + - クラス式 --- ### クラス式 -関数と同様に、クラスも式として[[変数]]に代入できます（あまり頻繁には使われませんが、知識として持っておくと良いでしょう）。 +[[関数]]と同様に、[[クラス]]も式（[[クラス式]]）として[[変数]]に代入できます（あまり頻繁には使われませんが、知識として持っておくと良いでしょう）。 ```js-repl > const Item = class { diff --git a/public/docs/javascript/6-classes/2-0-method.md b/public/docs/javascript/6-classes/2-0-method.md index 3496de57..43835c6e 100644 --- a/public/docs/javascript/6-classes/2-0-method.md +++ b/public/docs/javascript/6-classes/2-0-method.md @@ -9,11 +9,16 @@ question: - セッターで値の検証を行う具体的なメリットは何ですか？ - セッター内で `this.width = value` とすると無限再帰になるのはなぜですか？ - '`_width` のようにアンダースコアを付けるのは、JavaScriptの正式なルールですか？' +term: + - ゲッター + - セッター + - getter + - setter --- ## メソッド、ゲッター、セッター -クラス構文の中では、プロトタイプへのメソッド定義を簡潔に書くことができます。`function` キーワードは不要です。また、プロパティへのアクセスを制御するゲッター (`get`) とセッター (`set`) も直感的に記述できます。 +[[クラス]]構文の中では、[[プロトタイプ]]への[[メソッド]]定義を簡潔に書くことができます。`function` キーワードは不要です。また、[[プロパティ]]へのアクセスを制御する[[ゲッター]] (`get`) と[[セッター]] (`set`) も直感的に記述できます。 ```js:rectangle.js class Rectangle { @@ -63,4 +68,4 @@ console.log(rect.calcArea()); 300 ``` -> **Note:** セッター内で `this.width = value` とすると無限再帰になるため、慣習的に内部プロパティには `_`（アンダースコア）を付けることがよくありましたが、現在は後述するプライベートフィールド（`#`）を使うのがモダンな方法です。 +> **Note:** [[セッター]]内で `this.width = value` とすると無限再帰になるため、慣習的に内部[[プロパティ]]には `_`（アンダースコア）を付けることがよくありましたが、現在は後述する[[プライベートフィールド]]（`#`）を使うのがモダンな方法です。 diff --git a/public/docs/javascript/6-classes/3-0-extends-super.md b/public/docs/javascript/6-classes/3-0-extends-super.md index 667239d2..6fe803ec 100644 --- a/public/docs/javascript/6-classes/3-0-extends-super.md +++ b/public/docs/javascript/6-classes/3-0-extends-super.md @@ -8,13 +8,18 @@ question: - 子クラスのコンストラクタで `this` を使う前に `super()` を呼び出す必要があるのはなぜですか？ - メソッドのオーバーライドとは何ですか？ - '`instanceof` は何を確認するために使うのですか？' +term: + - 継承 + - extends + - super + - オーバーライド --- ## 継承 (`extends` と `super`) -他の言語同様、`extends` キーワードを使用して既存のクラスを継承できます。親クラスのコンストラクタやメソッドには `super` を使ってアクセスします。 +他の言語同様、[[`extends`]] キーワードを使用して既存の[[クラス]]を[[継承]]できます。親[[クラス]]の[[コンストラクタ]]や[[メソッド]]には [[`super`]] を使ってアクセスします。 -ここで重要なルールが1つあります。**子クラスの `constructor` 内では、`this` を使用する前に必ず `super()` を呼び出す必要があります。** +ここで重要なルールが1つあります。**子クラスの [[`constructor`]] 内では、[[`this`]] を使用する前に必ず `[[super]]()` を呼び出す必要があります。** ```js:inheritance.js class Animal { diff --git a/public/docs/javascript/6-classes/4-1-static.md b/public/docs/javascript/6-classes/4-1-static.md index 3fa7535c..09f0596c 100644 --- a/public/docs/javascript/6-classes/4-1-static.md +++ b/public/docs/javascript/6-classes/4-1-static.md @@ -6,11 +6,15 @@ question: - 静的メソッドとは何ですか？インスタンスのメソッドとどう違うのですか？ - ユーティリティ関数やファクトリーメソッドの具体的な例をもっと知りたいです。 - 静的メソッドの中で `this` を使うことはできますか？ +term: + - static + - 静的メソッド + - スタティックメソッド --- ### 静的メソッド (static) -インスタンスではなく、クラス自体に紐付くメソッドです。ユーティリティ関数やファクトリーメソッドによく使われます。 +[[インスタンス]]ではなく、[[クラス]]自体に紐付く[[メソッド]]です。ユーティリティ[[関数]]やファクトリーメソッドによく使われます。 ```js:private_static_1.js class BankAccount { diff --git a/public/docs/javascript/6-classes/4-2-private.md b/public/docs/javascript/6-classes/4-2-private.md index 7a3dfcc2..f9524a26 100644 --- a/public/docs/javascript/6-classes/4-2-private.md +++ b/public/docs/javascript/6-classes/4-2-private.md @@ -9,11 +9,14 @@ question: - >- `console.log(account.balance);` が `undefined` になるのはなぜですか？ `#balance` を設定しているのに。 +term: + - プライベートフィールド + - プライベートプロパティ --- ### プライベートフィールド (\#) -長らくJavaScriptには「真のプライベートプロパティ」が存在せず、`_variable` のような命名規則に頼っていました。しかし、ES2019以降、`#` をプレフィックスにすることで、**クラス外から完全にアクセス不可能なフィールド**を定義できるようになりました。 +長らくJavaScriptには「真の[[プライベートプロパティ]]」が存在せず、`_variable` のような命名規則に頼っていました。しかし、ES2019以降、`#` をプレフィックスにすることで、**[[クラス]]外から完全にアクセス不可能なフィールド**（[[プライベートフィールド]]）を定義できるようになりました。 ```js:private_static_2.js class BankAccount { diff --git a/public/docs/javascript/6-classes/5-0-summary.md b/public/docs/javascript/6-classes/5-0-summary.md index 6dacf65c..f2cd2f6b 100644 --- a/public/docs/javascript/6-classes/5-0-summary.md +++ b/public/docs/javascript/6-classes/5-0-summary.md @@ -7,9 +7,9 @@ question: [] ## この章のまとめ -1. **`class` 構文** はプロトタイプ継承の糖衣構文であり、`constructor` で初期化を行います。 -2. **メソッド定義** は `function` キーワードが不要で、`get` / `set` でアクセサを定義できます。 -3. **継承** は `extends` を使い、子クラスのコンストラクタ内では必ず `this` に触れる前に `super()` を呼ぶ必要があります。 -4. **`static`** で静的メソッドを、**`#`** プレフィックスでハードプライベートフィールド（外部からアクセス不可）を定義できます。 +1. **[[`class`]] 構文** は[[プロトタイプ継承]]の[[糖衣構文]]であり、[[`constructor`]] で初期化を行います。 +2. **[[メソッド]]定義** は `function` キーワードが不要で、`get` / `set`（[[ゲッター]] / [[セッター]]）でアクセサを定義できます。 +3. **[[継承]]** は [[`extends`]] を使い、子クラスの[[コンストラクタ]]内では必ず [[`this`]] に触れる前に `[[super]]()` を呼ぶ必要があります。 +4. **[[`static`]]** で[[静的メソッド]]を、**`#`** プレフィックスでハード[[プライベートフィールド]]（外部からアクセス不可）を定義できます。 -クラス構文を使うことで、コードの構造がより明確になり、他の言語の経験者にとっても読みやすいコードになります。しかし、裏側ではプロトタイプチェーンが動いていることを忘れないでください。 +[[クラス]]構文を使うことで、コードの構造がより明確になり、他の言語の経験者にとっても読みやすいコードになります。しかし、裏側では[[プロトタイプチェーン]]が動いていることを忘れないでください。 diff --git a/public/docs/javascript/6-classes/5-1-practice1.md b/public/docs/javascript/6-classes/5-1-practice1.md index 0267663c..6e0d8459 100644 --- a/public/docs/javascript/6-classes/5-1-practice1.md +++ b/public/docs/javascript/6-classes/5-1-practice1.md @@ -9,11 +9,11 @@ question: ### 練習問題 1: シンプルなRPGキャラクター -以下の仕様を満たす `Character` クラスを作成してください。 +以下の仕様を満たす `Character` [[クラス]]を作成してください。 - * `name` (名前) と `hp` (体力) をコンストラクタで受け取る。 - * `attack(target)` メソッドを持つ。実行すると `target` の `hp` を 10 減らし、コンソールに攻撃メッセージを表示する。 - * `hp` はプライベートフィールド (`#hp`) として管理し、0未満にならないようにする。現在のHPを取得するゲッター `hp` を用意する。 + * `name` (名前) と `hp` (体力) を[[コンストラクタ]]で受け取る。 + * `attack(target)` [[メソッド]]を持つ。実行すると `target` の `hp` を 10 減らし、コンソールに攻撃メッセージを表示する。 + * `hp` は[[プライベートフィールド]] (`#hp`) として管理し、0未満にならないようにする。現在のHPを取得する[[ゲッター]] `hp` を用意する。 ```js:practice7_1.js ``` diff --git a/public/docs/javascript/6-classes/5-2-practice2.md b/public/docs/javascript/6-classes/5-2-practice2.md index fb3c49b0..f41a7c41 100644 --- a/public/docs/javascript/6-classes/5-2-practice2.md +++ b/public/docs/javascript/6-classes/5-2-practice2.md @@ -9,11 +9,11 @@ question: ### 練習問題 2: 図形の継承 -以下の仕様を満たすクラスを作成してください。 +以下の仕様を満たす[[クラス]]を作成してください。 - * 親クラス `Shape`: コンストラクタで `color` を受け取る。`info()` メソッドを持ち、「色: [color]」を返す。 - * 子クラス `Circle`: `Shape` を継承。コンストラクタで `color` と `radius` (半径) を受け取る。`info()` メソッドをオーバーライドし、「[親のinfo], 半径: [radius]」を返す。 - * それぞれのインスタンスを作成し、`info()` の結果を表示する。 + * 親クラス `Shape`: [[コンストラクタ]]で `color` を受け取る。`info()` [[メソッド]]を持ち、「色: [color]」を返す。 + * 子クラス `Circle`: `Shape` を[[継承]]。[[コンストラクタ]]で `color` と `radius` (半径) を受け取る。`info()` [[メソッド]]を[[オーバーライド]]し、「[親のinfo], 半径: [radius]」を返す。 + * それぞれの[[インスタンス]]を作成し、`info()` の結果を表示する。 ```js:practice7_2.js ``` diff --git a/public/docs/javascript/7-arrays/-intro.md b/public/docs/javascript/7-arrays/-intro.md index 87bacfa7..e7cd2d87 100644 --- a/public/docs/javascript/7-arrays/-intro.md +++ b/public/docs/javascript/7-arrays/-intro.md @@ -1,3 +1,3 @@ -他の言語経験者にとって、JavaScriptの配列は「動的配列」や「リスト」、「ベクター」に近い存在です。サイズは可変であり、異なるデータ型を混在させることも可能です（通常は同じ型で統一しますが）。 +他の言語経験者にとって、JavaScriptの[[配列]]は「動的配列」や「リスト」、「ベクター」に近い存在です。サイズは可変であり、異なるデータ型を混在させることも可能です（通常は同じ型で統一しますが）。 -本章では、基本的な操作から、モダンなJavaScript開発において必須となる「宣言的なデータ処理」（`map`, `filter`, `reduce`など）に焦点を当てます。従来の`for`ループよりもこれらのメソッドが好まれる理由と使い方を習得しましょう。 +本章では、基本的な操作から、モダンなJavaScript開発において必須となる「宣言的なデータ処理」（[[`map`]], [[`filter`]], [[`reduce`]]など）に焦点を当てます。従来の [[`for`]] ループよりもこれらの[[メソッド]]が好まれる理由と使い方を習得しましょう。 diff --git a/public/docs/javascript/7-arrays/1-0-array-literal.md b/public/docs/javascript/7-arrays/1-0-array-literal.md index c9369f65..8b04a37e 100644 --- a/public/docs/javascript/7-arrays/1-0-array-literal.md +++ b/public/docs/javascript/7-arrays/1-0-array-literal.md @@ -7,12 +7,20 @@ question: - push、pop、shift、unshift はそれぞれどのような時に使い分けるべきですか？ - push や pop を実行した後に返ってくる数値や undefined は何を意味するのですか？ - 存在しないインデックス番号で配列にアクセスするとどうなりますか？ +term: + - 配列 + - 配列リテラル + - Array + - push + - pop + - shift + - unshift --- ## 配列リテラルと基本的な操作 -JavaScriptの配列は`Array`オブジェクトですが、通常はリテラル `[]` を使用して生成します。 -基本的な操作として、スタック操作（`push`, `pop`）やキュー操作に近いこと（`shift`, `unshift`）、そして万能な要素操作メソッド`splice`があります。 +JavaScriptの[[配列]]は `Array` [[オブジェクト]]ですが、通常はリテラル（[[配列リテラル]]） `[]` を使用して生成します。 +基本的な操作として、スタック操作（[[`push`]], [[`pop`]]）やキュー操作に近いこと（[[`shift`]], [[`unshift`]]）、そして万能な要素操作メソッド [[`splice`]] があります。 ```js-repl > const fruits = ['Apple', 'Banana']; diff --git a/public/docs/javascript/7-arrays/1-2-array-splice.md b/public/docs/javascript/7-arrays/1-2-array-splice.md index 75e42a6f..51e00222 100644 --- a/public/docs/javascript/7-arrays/1-2-array-splice.md +++ b/public/docs/javascript/7-arrays/1-2-array-splice.md @@ -6,11 +6,15 @@ question: - 「破壊的な操作」とは具体的にどのような意味ですか？ - splice(1, 2, 99, 100) のそれぞれの引数は何を表しているのですか？ - splice メソッドが [2, 3] という配列を返していますが、これは何を意味しますか？ +term: + - splice + - 破壊的操作 + - 破壊的 --- ### 破壊的な操作: `splice` -`splice`は要素の削除、置換、挿入をすべて行える強力なメソッドですが、**元の配列を変更（破壊）する**点に注意が必要です。 +[[`splice`]] は要素の削除、置換、挿入をすべて行える強力な[[メソッド]]ですが、**元の[[配列]]を変更（[[破壊的|破壊]]）する**点に注意が必要です。 ```js-repl > const numbers = [1, 2, 3, 4, 5]; diff --git a/public/docs/javascript/7-arrays/2-0-spread-destructure-basic.md b/public/docs/javascript/7-arrays/2-0-spread-destructure-basic.md index 8158bcc6..819e59dd 100644 --- a/public/docs/javascript/7-arrays/2-0-spread-destructure-basic.md +++ b/public/docs/javascript/7-arrays/2-0-spread-destructure-basic.md @@ -8,4 +8,4 @@ question: ## スプレッド構文 (...) とデストラクチャリング（分割代入） -モダンJavaScript（ES2015+）では、配列の操作をより簡潔に記述するための構文が導入されました。これらはReactやVueなどのフレームワークでも多用されます。 +モダンJavaScript（ES2015+）では、[[配列]]の操作をより簡潔に記述するための構文が導入されました。これらはReactやVueなどのフレームワークでも多用されます。 diff --git a/public/docs/javascript/7-arrays/2-1-spread.md b/public/docs/javascript/7-arrays/2-1-spread.md index 34c94348..f853dfbc 100644 --- a/public/docs/javascript/7-arrays/2-1-spread.md +++ b/public/docs/javascript/7-arrays/2-1-spread.md @@ -6,11 +6,15 @@ question: - スプレッド構文 (...) は具体的にどのような場面で使うと便利ですか？ - 「浅いコピー（Shallow Copy）」とは何ですか？「深いコピー」との違いも教えてください。 - 配列をコピーしたのに copy === part1 が false になるのはなぜですか？ +term: + - スプレッド構文 + - 浅いコピー + - Shallow Copy --- ### スプレッド構文 (...) -配列を展開する構文です。配列の結合や、**浅いコピー（Shallow Copy）**の作成によく使われます。 +[[配列]]を展開する構文です。[[配列]]の結合や、**[[浅いコピー]]（Shallow Copy）**の作成によく使われます。 ```js-repl > const part1 = [1, 2]; diff --git a/public/docs/javascript/7-arrays/2-2-destructuring.md b/public/docs/javascript/7-arrays/2-2-destructuring.md index a4069d0c..9b8bc44f 100644 --- a/public/docs/javascript/7-arrays/2-2-destructuring.md +++ b/public/docs/javascript/7-arrays/2-2-destructuring.md @@ -6,11 +6,14 @@ question: - デストラクチャリングの const [first, second] = users; の [] は配列リテラルと同じ意味ですか？ - const [, , third] = users; のようにカンマで要素をスキップする書き方は、どのような時に役立ちますか？ - '[a, b] = [b, a]; のように書くだけで変数の値を入れ替えられるのはなぜですか？' +term: + - 分割代入 + - デストラクチャリング --- ### デストラクチャリング（分割代入） -配列から要素を取り出して[[変数]]に代入する操作を簡潔に書くことができます。 +[[配列]]から要素を取り出して[[変数]]に代入する操作（[[分割代入]]）を簡潔に書くことができます。 ```js-repl > const users = ['Alice', 'Bob', 'Charlie']; diff --git a/public/docs/javascript/7-arrays/3-0-higher-order-func.md b/public/docs/javascript/7-arrays/3-0-higher-order-func.md index d988bcd2..7bd0368b 100644 --- a/public/docs/javascript/7-arrays/3-0-higher-order-func.md +++ b/public/docs/javascript/7-arrays/3-0-higher-order-func.md @@ -8,18 +8,27 @@ question: - map や filter が「新しい配列を返す」ことのメリットは何ですか？ - reduce メソッドの (sum, item) => sum + item.price, 0 の 0 は何のためにあるのですか？ - メソッドチェーンを使うことで、コードはどのように良くなりますか？ +term: + - 高階関数 + - forEach + - map + - filter + - reduce + - イミュータブル + - 副作用 + - メソッドチェーン --- ## 高階関数によるイテレーション -JavaScriptでは、`for`文や`while`文を書く頻度は減っています。代わりに、配列のメソッドとして提供される**高階関数**（関数を引数に取る関数）を使用して、処理の意図（変換、抽出、集約など）を明確にします。 +JavaScriptでは、[[`for`]] 文や [[`while`]] 文を書く頻度は減っています。代わりに、[[配列]]の[[メソッド]]として提供される**[[高階関数]]**（[[関数]]を引数に取る関数）を使用して、処理の意図（変換、抽出、集約など）を明確にします。 -主なメソッドは以下の通りです。 +主な[[メソッド]]は以下の通りです。 - * **`forEach`**: 単なる反復処理（戻り値なし）。副作用（ログ出力やDB保存など）を起こすために使う。 - * **`map`**: 全要素を変換し、**新しい配列**を返す。 - * **`filter`**: 条件に一致する要素のみを抽出し、**新しい配列**を返す。 - * **`reduce`**: 要素を一つずつ処理して、**単一の値**（合計、[[オブジェクト]]など）に集約する。 + * **[[`forEach`]]**: 単なる[[反復処理]]（戻り値なし）。[[副作用]]（ログ出力やDB保存など）を起こすために使う。 + * **[[`map`]]**: 全要素を変換し、**新しい[[配列]]**を返す。 + * **[[`filter`]]**: 条件に一致する要素のみを抽出し、**新しい[[配列]]**を返す。 + * **[[`reduce`]]**: 要素を一つずつ処理して、**単一の値**（合計、[[オブジェクト]]など）に集約する。 以下は、これらのメソッドを使って商品リストを処理するスクリプトです。 @@ -74,4 +83,4 @@ Total: $1130 Electronics Total: $1125 ``` -> **Note:** `map`や`filter`は元の配列を変更せず（イミュータブル）、新しい配列を返します。これにより、予期せぬ副作用を防ぐことができます。 +> **Note:** [[`map`]] や [[`filter`]] は元の[[配列]]を変更せず（[[イミュータブル]]）、新しい[[配列]]を返します。これにより、予期せぬ[[副作用]]を防ぐことができます。 diff --git a/public/docs/javascript/7-arrays/4-0-other-method.md b/public/docs/javascript/7-arrays/4-0-other-method.md index 6d1c6467..3b99f308 100644 --- a/public/docs/javascript/7-arrays/4-0-other-method.md +++ b/public/docs/javascript/7-arrays/4-0-other-method.md @@ -6,16 +6,21 @@ question: - find と findIndex はどのような違いがあり、どのように使い分けますか？ - some と every の違いを具体的な例で教えてください。 - これらのメソッドに渡す「コールバック関数」とは、具体的にどのような関数を指しますか？ +term: + - find + - findIndex + - some + - every --- ## その他の便利なメソッド：`find`, `some`, `every` -特定の要素を探したり、条件チェックを行ったりする場合に特化したメソッドです。これらもコールバック関数を受け取ります。 +特定の要素を探したり、条件チェックを行ったりする場合に特化した[[メソッド]]です。これらも[[コールバック関数]]を受け取ります。 - * **`find`**: 最初に見つかった要素自体を返す（見つからなければ [[`undefined`]]）。 - * **`findIndex`**: 最初に見つかった要素のインデックスを返す（見つからなければ `-1`）。 - * **`some`**: 条件を満たす要素が**一つでもあれば** [[`true`]] を返す。 - * **`every`**: **すべての要素**が条件を満たせば [[`true`]] を返す。 + * **[[`find`]]**: 最初に見つかった要素自体を返す（見つからなければ [[`undefined`]]）。 + * **[[`findIndex`]]**: 最初に見つかった要素のインデックスを返す（見つからなければ `-1`）。 + * **[[`some`]]**: 条件を満たす要素が**一つでもあれば** [[`true`]] を返す。 + * **[[`every`]]**: **すべての要素**が条件を満たせば [[`true`]] を返す。 ```js-repl > const scores = [85, 92, 45, 78, 90]; diff --git a/public/docs/javascript/7-arrays/5-0-summary.md b/public/docs/javascript/7-arrays/5-0-summary.md index f56600b1..3a86a14d 100644 --- a/public/docs/javascript/7-arrays/5-0-summary.md +++ b/public/docs/javascript/7-arrays/5-0-summary.md @@ -7,8 +7,8 @@ question: [] ## この章のまとめ - * 配列は動的で、`push`/`pop`などのメソッドで伸縮可能です。 - * `splice`は配列を直接変更（破壊）するため、使用には注意が必要です。 - * スプレッド構文 `...` と分割代入を使うと、配列のコピー、結合、要素の抽出が宣言的に記述できます。 - * ループ処理には `for` 文よりも高階関数（`map`, `filter`, `reduce`）を使用することが推奨されます。これらは処理の意図を明確にし、メソッドチェーンによる可読性の向上に寄与します。 - * 検索や検証には `find`, `some`, `every` を活用しましょう。 + * [[配列]]は動的で、[[`push`]] / [[`pop`]] などの[[メソッド]]で伸縮可能です。 + * [[`splice`]] は[[配列]]を直接変更（[[破壊的|破壊]]）するため、使用には注意が必要です。 + * [[スプレッド構文]] `...` と[[分割代入]]を使うと、[[配列]]のコピー、結合、要素の抽出が宣言的に記述できます。 + * [[ループ]]処理には [[`for`]] 文よりも[[高階関数]]（[[`map`]], [[`filter`]], [[`reduce`]]）を使用することが推奨されます。これらは処理の意図を明確にし、[[メソッドチェーン]]による可読性の向上に寄与します。 + * 検索や検証には [[`find`]], [[`some`]], [[`every`]] を活用しましょう。 diff --git a/public/docs/javascript/7-arrays/5-1-practice1.md b/public/docs/javascript/7-arrays/5-1-practice1.md index 7ffa83c4..00781534 100644 --- a/public/docs/javascript/7-arrays/5-1-practice1.md +++ b/public/docs/javascript/7-arrays/5-1-practice1.md @@ -10,14 +10,14 @@ question: ### 練習問題 1: データの加工 -以下の数値配列があります。 +以下の[[数値]][[配列]]があります。 `const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];` -この配列に対して、以下の処理を行うコードを書いてください（メソッドチェーンを使用しても構いません）。 +この[[配列]]に対して、以下の処理を行うコードを書いてください（[[メソッドチェーン]]を使用しても構いません）。 1. 偶数のみを取り出す。 2. 取り出した偶数をそれぞれ2乗する。 -3. 結果の配列をコンソールに表示する。 +3. 結果の[[配列]]をコンソールに表示する。 ```js:practice8_1.js ``` diff --git a/public/docs/javascript/7-arrays/5-2-practice2.md b/public/docs/javascript/7-arrays/5-2-practice2.md index f0114d96..480873e5 100644 --- a/public/docs/javascript/7-arrays/5-2-practice2.md +++ b/public/docs/javascript/7-arrays/5-2-practice2.md @@ -10,7 +10,7 @@ question: ### 練習問題 2: 集計処理 -以下のユーザーリストから「アクティブ（`active: true`）なユーザーの年齢の平均値」を計算して表示してください。 +以下のユーザーリスト（[[オブジェクト]]の[[配列]]）から「アクティブ（`active: true`）なユーザーの年齢の平均値」を計算して表示してください。 （ヒント: まずアクティブなユーザーを絞り込み、次に年齢の合計と人数を使って平均を算出します） ```js:practice8_2.js diff --git a/public/docs/javascript/8-promise/-intro.md b/public/docs/javascript/8-promise/-intro.md index 16f30882..65d32613 100644 --- a/public/docs/javascript/8-promise/-intro.md +++ b/public/docs/javascript/8-promise/-intro.md @@ -1,5 +1,5 @@ JavaScriptは基本的にシングルスレッドで動作します。つまり、一度に一つの処理しか実行できません。しかし、ネットワークリクエストやタイマーなどの重い処理を行っている間、ブラウザがフリーズしたりサーバーが応答しなくなったりしては困ります。 -そこでJavaScriptは、重い処理をバックグラウンド（Web APIsやNode.jsのC++レイヤー）に任せ、完了通知を受け取ることで並行処理のような動きを実現しています。 +そこでJavaScriptは、重い処理をバックグラウンド（Web APIsやNode.jsのC++レイヤー）に任せ、完了通知を受け取ることで[[並行処理|並行処理のような動き]]を実現しています。 -本章では、JavaScriptの非同期処理の基盤となるメカニズムと、それを現代的に扱うための標準APIである **Promise** について解説します。 +本章では、JavaScriptの[[非同期処理]]の基盤となるメカニズムと、それを現代的に扱うための標準APIである **[[Promise]]** について解説します。 diff --git a/public/docs/javascript/8-promise/1-0-sync-vs-async.md b/public/docs/javascript/8-promise/1-0-sync-vs-async.md index 1d1e0514..3c746fc4 100644 --- a/public/docs/javascript/8-promise/1-0-sync-vs-async.md +++ b/public/docs/javascript/8-promise/1-0-sync-vs-async.md @@ -6,16 +6,22 @@ question: - コード例のsetTimeoutが1秒後に実行されるはずなのに、なぜEndが先に表示されるのでしょうか？ - ブロッキングとノンブロッキングが、具体的にどのような状況でメリットやデメリットになるのか教えてください。 - JavaScript以外で非同期処理を扱う言語は他にもありますか？ +term: + - 同期処理 + - 非同期処理 + - ブロッキング + - ノンブロッキング + - 並行処理 --- ## 同期処理 vs 非同期処理 まず、挙動の違いを確認しましょう。 - * **同期処理 (Synchronous):** コードが上から下へ順番に実行されます。前の処理が終わるまで次の処理は待たされます（ブロッキング）。 - * **非同期処理 (Asynchronous):** 処理の完了を待たずに、即座に次のコードへ進みます（ノンブロッキング）。処理結果は後でコールバックなどを通じて受け取ります。 + * **[[同期処理]] (Synchronous):** コードが上から下へ順番に実行されます。前の処理が終わるまで次の処理は待たされます（[[ブロッキング]]）。 + * **[[非同期処理]] (Asynchronous):** 処理の完了を待たずに、即座に次のコードへ進みます（[[ノンブロッキング]]）。処理結果は後で[[コールバック]]などを通じて受け取ります。 -以下のコードは、`setTimeout`（非同期API）を使用した例です。他言語の経験者であれば、「Start」→「1秒待機」→「Timer」→「End」と予想するかもしれませんが、JavaScriptでは異なります。 +以下のコードは、`setTimeout`（[[非同期処理|非同期API]]）を使用した例です。他言語の経験者であれば、「Start」→「1秒待機」→「Timer」→「End」と予想するかもしれませんが、JavaScriptでは異なります。 ```js:async_demo.js console.log('1. Start'); diff --git a/public/docs/javascript/8-promise/2-0-event-callback.md b/public/docs/javascript/8-promise/2-0-event-callback.md index 7654cd20..ea908e3c 100644 --- a/public/docs/javascript/8-promise/2-0-event-callback.md +++ b/public/docs/javascript/8-promise/2-0-event-callback.md @@ -7,23 +7,29 @@ question: - コールスタック、Web API、コールバックキュー、イベントループのそれぞれが、具体的にどのようなデータを保持したり処理を行ったりするのか知りたいです。 - LIFO（後入れ先出し）とは、具体的にどのような順番で処理がされるということですか？ - 「イベントループがコールスタックとキューを監視する」とは、具体的にどのようなタイミングで監視しているのですか？ +term: + - イベントループ + - コールスタック + - コールバックキュー + - コールバック関数 + - コールバック --- ## イベントループとコールバックキューの仕組み -なぜシングルスレッドで非同期処理が可能なのか、その裏側にあるのが **イベントループ (Event Loop)** という仕組みです。 +なぜシングルスレッドで[[非同期処理]]が可能なのか、その裏側にあるのが **[[イベントループ]] (Event Loop)** という仕組みです。 JavaScriptのランタイムは主に以下の要素で構成されています： -1. **コールスタック (Call Stack):** 現在実行中の関数が積まれる場所。LIFO（後入れ先出し）。 -2. **Web APIs / Node APIs:** ブラウザやOSが提供する機能（タイマー、Fetch、DOMイベントなど）。非同期処理はここで実行されます。 -3. **コールバックキュー (Callback Queue):** 非同期処理が完了した後、実行待ちのコールバック関数が並ぶ列。 -4. **イベントループ (Event Loop):** コールスタックとキューを監視する仕組み。 +1. **[[コールスタック]] (Call Stack):** 現在実行中の[[関数]]が積まれる場所。LIFO（後入れ先出し）。 +2. **Web APIs / Node APIs:** ブラウザやOSが提供する機能（タイマー、Fetch、DOMイベントなど）。[[非同期処理]]はここで実行されます。 +3. **[[コールバックキュー]] (Callback Queue):** [[非同期処理]]が完了した後、実行待ちの[[コールバック関数]]が並ぶ列。 +4. **[[イベントループ]] (Event Loop):** [[コールスタック]]とキューを監視する仕組み。 **処理の流れ:** -1. `setTimeout` がコールスタックで実行されると、ブラウザのタイマーAPIに処理を依頼し、スタックから消えます。 -2. 指定時間が経過すると、タイマーAPIはコールバック関数を **コールバックキュー** に入れます。 -3. **イベントループ** は、「コールスタックが空（メインの処理が完了）」かつ「キューにタスクがある」場合、キューからタスクを取り出してコールスタックへ移動させます。 +1. `setTimeout` が[[コールスタック]]で実行されると、ブラウザのタイマーAPIに処理を依頼し、スタックから消えます。 +2. 指定時間が経過すると、タイマーAPIは[[コールバック関数]]を **[[コールバックキュー]]** に入れます。 +3. **[[イベントループ]]** は、「[[コールスタック]]が空（メインの処理が完了）」かつ「キューにタスクがある」場合、キューからタスクを取り出して[[コールスタック]]へ移動させます。 -この仕組みにより、メインスレッドをブロックすることなく非同期処理を実現しています。 +この仕組みにより、メインスレッドをブロックすることなく[[非同期処理]]を実現しています。 diff --git a/public/docs/javascript/8-promise/3-0-callback-hell.md b/public/docs/javascript/8-promise/3-0-callback-hell.md index 6c40de5a..c8314da5 100644 --- a/public/docs/javascript/8-promise/3-0-callback-hell.md +++ b/public/docs/javascript/8-promise/3-0-callback-hell.md @@ -7,11 +7,13 @@ question: - エラーハンドリングが困難とは、具体的にどのような問題が発生するのでしょうか？ - Promiseがコールバック地獄の問題をどのように解決するのか、簡潔に教えてください。 - delay関数を3回入れ子にしていますが、このネストが深くなることのデメリットは何ですか？ +term: + - コールバック地獄 --- ## コールバック地獄の問題点 -Promiseが登場する以前（ES5時代まで）は、非同期処理の順序制御を行うために、コールバック関数を入れ子にする手法が一般的でした。 +[[Promise]] が登場する以前（ES5時代まで）は、[[非同期処理]]の順序制御を行うために、[[コールバック関数]]を入れ子にする手法が一般的でした。 例えば、「処理Aが終わったら処理B、その後に処理C...」というコードを書こうとすると、以下のようにネストが深くなります。 @@ -44,4 +46,4 @@ Step 3 finished End ``` -これはいわゆる **「コールバック地獄 (Callback Hell)」** と呼ばれる状態で、可読性が低く、エラーハンドリングも困難です。これを解決するために導入されたのが **Promise** です。 +これはいわゆる **「[[コールバック地獄]] (Callback Hell)」** と呼ばれる状態で、可読性が低く、エラーハンドリングも困難です。これを解決するために導入されたのが **[[Promise]]** です。 diff --git a/public/docs/javascript/8-promise/4-0-promise-basic.md b/public/docs/javascript/8-promise/4-0-promise-basic.md index df3f7dee..3b738bfa 100644 --- a/public/docs/javascript/8-promise/4-0-promise-basic.md +++ b/public/docs/javascript/8-promise/4-0-promise-basic.md @@ -7,16 +7,21 @@ question: - Promiseの「約束手形」という例えを、もう少し具体的に説明してください。 - Pending、Fulfilled、Rejectedのそれぞれの状態は、Promiseのライフサイクルの中でどのように変化するのですか？ - Promiseの状態が一度変わると「二度と変化しない（Immutable）」というのは、どのようなメリットがありますか？ +term: + - Promise + - Pending + - Fulfilled + - Rejected --- ## Promiseの概念 -**Promise** は、非同期処理の「最終的な完了（または失敗）」とその「結果の値」を表す[[オブジェクト]]です。未来のある時点で値が返ってくる「約束手形」のようなものと考えてください。 +**[[Promise]]** は、[[非同期処理]]の「最終的な完了（または失敗）」とその「結果の値」を表す[[オブジェクト]]です。未来のある時点で値が返ってくる「約束手形」のようなものと考えてください。 -Promise[[オブジェクト]]は以下の3つの状態のいずれかを持ちます。 +[[Promise]][[オブジェクト]]は以下の3つの状態のいずれかを持ちます。 -1. **Pending (待機中):** 初期状態。処理はまだ完了していない。 -2. **Fulfilled (履行):** 処理が成功し、値を持っている状態。(`resolve` された) -3. **Rejected (拒否):** 処理が失敗し、エラー理由を持っている状態。(`reject` された) +1. **[[Pending]] (待機中):** 初期状態。処理はまだ完了していない。 +2. **[[Fulfilled]] (履行):** 処理が成功し、値を持っている状態。(`[[resolve]]` された) +3. **[[Rejected]] (拒否):** 処理が失敗し、エラー理由を持っている状態。(`[[reject]]` された) -Promiseの状態は一度 Pending から Fulfilled または Rejected に変化すると、二度と変化しません（Immutable）。 +[[Promise]]の状態は一度 [[Pending]] から [[Fulfilled]] または [[Rejected]] に変化すると、二度と変化しません（[[イミュータブル|Immutable]]）。 diff --git a/public/docs/javascript/8-promise/5-1-promise-create.md b/public/docs/javascript/8-promise/5-1-promise-create.md index 553d8046..d9bc7429 100644 --- a/public/docs/javascript/8-promise/5-1-promise-create.md +++ b/public/docs/javascript/8-promise/5-1-promise-create.md @@ -7,11 +7,14 @@ question: - コード例の`const success = true;`という行は、常にtrueである必要があるのでしょうか？ - Promise { 'OK!' } と表示されている結果の「OK!」という値は、どのように取り出せばよいですか？ - rejectで渡している`new Error("Failed")`のエラーオブジェクトは、なぜ必要なのでしょうか？ +term: + - resolve + - reject --- ### Promiseの作成 -`new Promise` コンストラクタを使用します。引数には `(resolve, reject)` を受け取る関数（Executor）を渡します。 +`[[new]] [[Promise]]` [[コンストラクタ]]を使用します。引数には `([[resolve]], [[reject]])` を受け取る[[関数]]（Executor）を渡します。 ```js-repl > const myPromise = new Promise((resolve, reject) => { diff --git a/public/docs/javascript/8-promise/5-2-promise-method.md b/public/docs/javascript/8-promise/5-2-promise-method.md index b7719e6c..7cb4b011 100644 --- a/public/docs/javascript/8-promise/5-2-promise-method.md +++ b/public/docs/javascript/8-promise/5-2-promise-method.md @@ -7,17 +7,28 @@ question: - '`.then()`の中で新しいPromiseを返すと、なぜ「フラットな連鎖」になるのですか？具体例で説明してほしいです。' - チェーンの途中で発生したエラーが、最後の`.catch()`で捕捉されるのはなぜですか？ - Promiseのエラー処理は`try-catch`とどのように違うのですか？ +term: + - then + - .then() + - .then + - catch + - .catch() + - .catch + - finally + - .finally() + - .finally + - Promiseチェーン --- ### `.then()`, `.catch()`, `.finally()` -Promiseオブジェクトの結果を受け取るには、以下のメソッドを使用します。 +[[Promise]][[オブジェクト]]の結果を受け取るには、以下の[[メソッド]]を使用します。 - * **`.then(onFulfilled)`**: PromiseがFulfilledになった時に実行されます。 - * **`.catch(onRejected)`**: PromiseがRejectedになった時に実行されます。 - * **`.finally(onFinally)`**: 成功・失敗に関わらず、処理終了時に実行されます。 + * **`[[then|.then]](onFulfilled)`**: [[Promise]]が[[Fulfilled]]になった時に実行されます。 + * **`[[catch|.catch]](onRejected)`**: [[Promise]]が[[Rejected]]になった時に実行されます。 + * **`[[finally|.finally]](onFinally)`**: 成功・失敗に関わらず、処理終了時に実行されます。 -先ほどのコールバック地獄の例を、Promiseを使って書き直してみましょう。 +先ほどの[[コールバック地獄]]の例を、[[Promise]]を使って書き直してみましょう。 ```js:promise_chain.js // Promiseを返す関数を作成 @@ -61,5 +72,5 @@ End **重要なポイント:** -1. `.then()` の中で新しい Promise を返すと、次の `.then()` はその新しい Promise の完了を待ちます。これにより、非同期処理を **フラットな連鎖** として記述できます。 -2. エラー処理は最後の `.catch()` に集約できます。`try-catch` ブロックに近い感覚で扱えるようになります。 +1. `[[.then]]()` の中で新しい [[Promise]] を返すと、次の `[[.then]]()` はその新しい [[Promise]] の完了を待ちます。これにより、[[非同期処理]]を **フラットな連鎖**（[[Promiseチェーン]]）として記述できます。 +2. エラー処理は最後の `[[.catch]]()` に集約できます。`[[try]]...[[catch]]` ブロックに近い感覚で扱えるようになります。 diff --git a/public/docs/javascript/8-promise/6-0-summary.md b/public/docs/javascript/8-promise/6-0-summary.md index dbc12252..545d1f4d 100644 --- a/public/docs/javascript/8-promise/6-0-summary.md +++ b/public/docs/javascript/8-promise/6-0-summary.md @@ -7,10 +7,10 @@ question: [] ## この章のまとめ - * JavaScriptはシングルスレッドで動作し、**イベントループ** という仕組みを使って非同期処理を管理しています。 - * 非同期処理の完了を待つために、昔はコールバック関数が多用されていましたが、ネストが深くなる問題がありました。 - * **Promise** は非同期処理の状態（Pending, Fulfilled, Rejected）を管理する[[オブジェクト]]です。 - * `.then()` をチェーンさせることで、非同期処理を直列に、読みやすく記述できます。 - * エラーハンドリングは `.catch()` で一括して行えます。 + * JavaScriptはシングルスレッドで動作し、**[[イベントループ]]** という仕組みを使って[[非同期処理]]を管理しています。 + * [[非同期処理]]の完了を待つために、昔は[[コールバック関数]]が多用されていましたが、ネストが深くなる問題（[[コールバック地獄]]）がありました。 + * **[[Promise]]** は[[非同期処理]]の状態（[[Pending]], [[Fulfilled]], [[Rejected]]）を管理する[[オブジェクト]]です。 + * `[[.then]]()` をチェーンさせること（[[Promiseチェーン]]）で、[[非同期処理]]を直列に、読みやすく記述できます。 + * エラーハンドリングは `[[.catch]]()` で一括して行えます。 -[[./next]]では、このPromiseをさらに同期処理のように書ける構文糖衣 **async/await** について学びます。 +[[./next]]では、この[[Promise]]をさらに[[同期処理]]のように書ける[[糖衣構文|構文糖衣]] **[[async/await]]** について学びます。 diff --git a/public/docs/javascript/8-promise/7-1-practice1.md b/public/docs/javascript/8-promise/7-1-practice1.md index a831b0ed..d76870cf 100644 --- a/public/docs/javascript/8-promise/7-1-practice1.md +++ b/public/docs/javascript/8-promise/7-1-practice1.md @@ -10,7 +10,7 @@ question: ### 練習問題1: ランダムな成功/失敗 -`Math.random()` を使い、50%の確率で成功（Resolve）、50%の確率で失敗（Reject）するPromiseを返す関数 `coinToss` を作成してください。 +`Math.random()` を使い、50%の確率で成功（[[resolve|Resolve]]）、50%の確率で失敗（[[reject|Reject]]）する[[Promise]]を返す[[関数]] `coinToss` を作成してください。 それを使用し、成功時は "Win\!"、失敗時は "Lose..." とコンソールに表示するコードを書いてください。 ```js:practice9_1.js diff --git a/public/docs/javascript/8-promise/7-2-practice2.md b/public/docs/javascript/8-promise/7-2-practice2.md index 7b634fed..063554c9 100644 --- a/public/docs/javascript/8-promise/7-2-practice2.md +++ b/public/docs/javascript/8-promise/7-2-practice2.md @@ -12,9 +12,9 @@ question: 以下の仕様を満たすコードを作成してください。 -1. 関数 `fetchUser(userId)`: 1秒後に `{ id: userId, name: "User" + userId }` という[[オブジェクト]]でresolveする。 -2. 関数 `fetchPosts(userName)`: 1秒後に `["Post 1 by " + userName, "Post 2 by " + userName]` という配列でresolveする。 -3. これらをPromiseチェーンで繋ぎ、ユーザーID `1` でユーザーを取得した後、その名前を使って投稿を取得し、最終的に投稿リストをコンソールに表示してください。 +1. [[関数]] `fetchUser(userId)`: 1秒後に `{ id: userId, name: "User" + userId }` という[[オブジェクト]]で[[resolve]]する。 +2. [[関数]] `fetchPosts(userName)`: 1秒後に `["Post 1 by " + userName, "Post 2 by " + userName]` という[[配列]]で[[resolve]]する。 +3. これらを[[Promiseチェーン]]で繋ぎ、ユーザーID `1` でユーザーを取得した後、その名前を使って投稿を取得し、最終的に投稿リストをコンソールに表示してください。 ```js:practice9_2.js ``` diff --git a/public/docs/javascript/9-async-await/-intro.md b/public/docs/javascript/9-async-await/-intro.md index c6c78c61..f0d25808 100644 --- a/public/docs/javascript/9-async-await/-intro.md +++ b/public/docs/javascript/9-async-await/-intro.md @@ -1,3 +1,3 @@ -[[./8]]では、JavaScriptの非同期処理の要である `Promise` について学びました。しかし、`.then()` チェーンが長く続くと、コードの可読性が下がる（いわゆる「コールバック地獄」に近い状態になる）ことがあります。 +[[./8]]では、JavaScriptの[[非同期処理]]の要である [[`Promise`]] について学びました。しかし、`[[.then]]()` チェーン（[[Promiseチェーン]]）が長く続くと、コードの可読性が下がる（いわゆる「[[コールバック地獄]]」に近い状態になる）ことがあります。 -この章では、この課題を解決するために導入された **Async/Await** 構文と、現代的なHTTP通信の標準である **Fetch API** について解説します。他の言語で同期的なコード（ブロッキング処理）に慣れ親しんだ方にとって、Async/Await は非常に直感的で扱いやすい機能です。 +この章では、この課題を解決するために導入された **[[Async/Await]]** 構文と、現代的なHTTP通信の標準である **[[Fetch API]]** について解説します。他の言語で同期的なコード（[[ブロッキング|ブロッキング処理]]）に慣れ親しんだ方にとって、[[Async/Await]] は非常に直感的で扱いやすい機能です。 diff --git a/public/docs/javascript/9-async-await/1-0-async-await.md b/public/docs/javascript/9-async-await/1-0-async-await.md index 8b7b4891..2e3e4934 100644 --- a/public/docs/javascript/9-async-await/1-0-async-await.md +++ b/public/docs/javascript/9-async-await/1-0-async-await.md @@ -6,8 +6,13 @@ question: - Async/Awaitは何をするためのものですか？ - Promiseのシンタックスシュガーとはどういう意味ですか？ - Async/Awaitはいつ使うと便利ですか？ +term: + - async/await + - Async/Await + - 糖衣構文 + - シンタックスシュガー --- ## Async/Await 構文 -`async` と `await` は、ES2017で導入された `Promise` の**シンタックスシュガー（糖衣構文）**です。これを使うことで、非同期処理をあたかも「同期処理」のように上から下へと流れるコードとして記述できます。 +[[`async`]] と [[`await`]] は、ES2017で導入された [[`Promise`]] の**[[シンタックスシュガー]]（[[糖衣構文]]）**です。これを使うことで、[[非同期処理]]をあたかも「[[同期処理]]」のように上から下へと流れるコードとして記述できます。 diff --git a/public/docs/javascript/9-async-await/1-1-async.md b/public/docs/javascript/9-async-await/1-1-async.md index 7b22c187..3b87d358 100644 --- a/public/docs/javascript/9-async-await/1-1-async.md +++ b/public/docs/javascript/9-async-await/1-1-async.md @@ -8,11 +8,14 @@ question: - Promise.resolve(値)とは具体的にどういう意味ですか？ - Promise { 'Hello, Async!' }のPromiseとは何ですか？ - getMessage().then(v => console.log(v))のvは何を表していますか？ +term: + - async + - async関数 --- ### `async` 関数 -関数宣言の前に `async` キーワードを付けると、その関数は自動的に **Promiseを返す** ようになります。値を `return` した場合、それは `Promise.resolve(値)` と同じ意味になります。 +[[関数宣言]]の前に [[`async`]] キーワードを付けると、その[[関数]]（[[async関数]]）は自動的に **[[Promise]]を返す** ようになります。値を `return` した場合、それは `Promise.[[resolve]](値)` と同じ意味になります。 ```js-repl > async function getMessage() { return "Hello, Async!"; } diff --git a/public/docs/javascript/9-async-await/1-2-await.md b/public/docs/javascript/9-async-await/1-2-await.md index b11f46c9..a1e016b9 100644 --- a/public/docs/javascript/9-async-await/1-2-await.md +++ b/public/docs/javascript/9-async-await/1-2-await.md @@ -2,6 +2,10 @@ id: javascript-async-await-await title: await 式 level: 3 +term: + - await + - await式 + - Settled question: - awaitはasync関数の中でしか使えないのですか？ - awaitが関数の実行を一時停止するとはどういうことですか？ @@ -12,8 +16,8 @@ question: ### `await` 式 -`async` 関数の内部（またはモジュールのトップレベル）でのみ使用できるキーワードです。 -`await` は、右側の Promise が **Settled（解決または拒否）されるまで関数の実行を一時停止** します。Promiseが解決されると、その結果の値を返して実行を再開します。 +`[[async]]` 関数の内部（またはモジュールのトップレベル）でのみ使用できるキーワードです。 +`[[`await`]]` は、右側の [[Promise]] が **[[Settled]]（解決または拒否）されるまで関数の実行を一時停止** します。[[Promise]]が解決されると、その結果の値を返して実行を再開します。 これは、C\# の `async/await` や Python の `asyncio` に慣れている方にはおなじみの挙動でしょう。 diff --git a/public/docs/javascript/9-async-await/2-0-try-catch.md b/public/docs/javascript/9-async-await/2-0-try-catch.md index 91f1d7d5..1b3c7792 100644 --- a/public/docs/javascript/9-async-await/2-0-try-catch.md +++ b/public/docs/javascript/9-async-await/2-0-try-catch.md @@ -13,7 +13,7 @@ question: ## `try...catch` によるエラーハンドリング -生の `Promise` では `.catch()` メソッドを使ってエラーを処理しましたが、Async/Await では、他の言語と同様に標準的な `try...catch` 構文を使用できます。これにより、同期エラーと非同期エラーを同じ構文で扱えるようになります。 +生の `[[Promise]]` では `[[.catch]]` メソッドを使ってエラーを処理しましたが、[[Async/Await]] では、他の言語と同様に標準的な `[[try...catch]]` 構文を使用できます。これにより、[[同期処理|同期エラー]]と[[非同期処理|非同期エラー]]を同じ構文で扱えるようになります。 ```js:async_try_catch.js // ランダムに成功・失敗する非同期関数 diff --git a/public/docs/javascript/9-async-await/3-0-fetch.md b/public/docs/javascript/9-async-await/3-0-fetch.md index 5e2c2001..3f8d56df 100644 --- a/public/docs/javascript/9-async-await/3-0-fetch.md +++ b/public/docs/javascript/9-async-await/3-0-fetch.md @@ -2,6 +2,10 @@ id: javascript-async-await-fetch title: Fetch API によるHTTPリクエスト level: 2 +term: + - Fetch API + - fetch + - fetch関数 question: - Fetch APIとは具体的に何ですか？ - fetch関数はなぜPromiseを返すのですか？ @@ -13,15 +17,15 @@ question: ## Fetch API によるHTTPリクエスト -JavaScript（特にブラウザ環境や最近のNode.js）でHTTPリクエストを行うための標準APIが `fetch` です。以前は `XMLHttpRequest` という扱いづらいAPIが使われていましたが、現在は `fetch` が主流です。 +JavaScript（特にブラウザ環境や最近のNode.js）でHTTPリクエストを行うための標準APIが `[[`fetch`]]` です。以前は `XMLHttpRequest` という扱いづらいAPIが使われていましたが、現在は `[[Fetch API|fetch]]` が主流です。 -`fetch` 関数は `Promise` を返します。 +`[[`fetch`]]` 関数は `[[Promise]]` を返します。 基本的な流れは以下の通りです： 1. `fetch(url)` を実行し、レスポンスヘッダーが届くのを待つ。 2. Response[[オブジェクト]]を受け取る。 -3. Response[[オブジェクト]]からメソッド（`.json()`, `.text()`など）を使ってボディを読み込む（これも非同期）。 +3. Response[[オブジェクト]]から[[メソッド]]（`.json()`, `.text()`など）を使ってボディを読み込む（これも[[非同期処理|非同期]]）。 ```js:fetch_basic.js // 外部APIからJSONデータを取得する例 diff --git a/public/docs/javascript/9-async-await/4-0-promise-all-race.md b/public/docs/javascript/9-async-await/4-0-promise-all-race.md index 7e249584..5ffae804 100644 --- a/public/docs/javascript/9-async-await/4-0-promise-all-race.md +++ b/public/docs/javascript/9-async-await/4-0-promise-all-race.md @@ -2,6 +2,11 @@ id: javascript-async-await-promise-all-race title: Promise.all() と Promise.race() level: 2 +term: + - 並列処理 + - 並列実行 + - 直列実行 + - シーケンシャル question: - awaitを連発するとパフォーマンスが落ちるというのはどういうことですか？ - 直列（シーケンシャル）とはどういう意味ですか？ @@ -10,4 +15,4 @@ question: ## `Promise.all()` と `Promise.race()` -Async/Await は便利ですが、単純に `await` を連発すると、処理が**直列（シーケンシャル）**になってしまい、パフォーマンスが落ちる場合があります。複数の独立した非同期処理を行う場合は、並列実行を検討します。 +[[Async/Await]] は便利ですが、単純に `[[`await`]]` を連発すると、処理が**[[直列実行|直列（シーケンシャル）]]**になってしまい、パフォーマンスが落ちる場合があります。複数の独立した[[非同期処理]]を行う場合は、[[並列処理|並列実行]]を検討します。 diff --git a/public/docs/javascript/9-async-await/4-2-promise-all.md b/public/docs/javascript/9-async-await/4-2-promise-all.md index f2853b05..1bd42413 100644 --- a/public/docs/javascript/9-async-await/4-2-promise-all.md +++ b/public/docs/javascript/9-async-await/4-2-promise-all.md @@ -2,6 +2,9 @@ id: javascript-async-await-promise-all title: Promise.all() による並列実行 level: 3 +term: + - Promise.all + - Promise.all() question: - Promise.all()は何をするための関数ですか？ - Promise.all()に渡す引数はどのような形式ですか？ @@ -14,7 +17,7 @@ question: ### `Promise.all()` による並列実行 -複数のPromiseを配列として受け取り、**全て完了するのを待って**から結果の配列を返します。一つでも失敗すると全体が失敗（reject）します。 +複数の[[Promise]]を[[配列]]として受け取り、**全て完了するのを待って**から結果の[[配列]]を返します。一つでも失敗すると全体が失敗（[[reject]]）します。 ```js:promise_all.js const wait = (ms, value) => new Promise(r => setTimeout(() => r(value), ms)); diff --git a/public/docs/javascript/9-async-await/4-3-promise-race.md b/public/docs/javascript/9-async-await/4-3-promise-race.md index c4e43e2a..a3e69544 100644 --- a/public/docs/javascript/9-async-await/4-3-promise-race.md +++ b/public/docs/javascript/9-async-await/4-3-promise-race.md @@ -2,6 +2,9 @@ id: javascript-async-await-promise-race title: Promise.race() level: 3 +term: + - Promise.race + - Promise.race() question: - Promise.race()は何をするための関数ですか？ - Promise.race()が最も早く完了（または失敗）したものだけを返すのはなぜですか？ @@ -11,7 +14,7 @@ question: ### `Promise.race()` -複数のPromiseのうち、**最も早く完了（または失敗）したもの**の結果だけを返します。タイムアウト処理の実装などによく使われます。 +複数の[[Promise]]のうち、**最も早く完了（または失敗）したもの**の結果だけを返します。タイムアウト処理の実装などによく使われます。 ```js-repl > const fast = new Promise(r => setTimeout(() => r("Fast"), 100)); diff --git a/public/docs/javascript/9-async-await/5-0-summary.md b/public/docs/javascript/9-async-await/5-0-summary.md index 7d4dc340..2f15f72a 100644 --- a/public/docs/javascript/9-async-await/5-0-summary.md +++ b/public/docs/javascript/9-async-await/5-0-summary.md @@ -7,7 +7,7 @@ question: [] ## この章のまとめ - * **Async/Await**: `Promise` をベースにした糖衣構文。非同期処理を同期処理のように記述でき、可読性が高い。 - * **Error Handling**: 同期コードと同じく `try...catch` が使用可能。 - * **Fetch API**: モダンなHTTP通信API。`response.ok` でステータスを確認し、`response.json()` でボディをパースする2段構えが必要。 - * **並列処理**: 独立した複数の非同期処理は `await` を連続させるのではなく、`Promise.all()` を使用して並列化することでパフォーマンスを向上させる。 + * **[[Async/Await]]**: `[[Promise]]` をベースにした[[糖衣構文]]。[[非同期処理]]を[[同期処理]]のように記述でき、可読性が高い。 + * **Error Handling**: [[同期処理|同期コード]]と同じく `[[try...catch]]` が使用可能。 + * **[[Fetch API]]**: モダンなHTTP通信API。`response.ok` でステータスを確認し、`response.json()` でボディをパースする2段構えが必要。 + * **[[並列処理]]**: 独立した複数の[[非同期処理]]は `[[`await`]]` を連続させるのではなく、`[[Promise.all|Promise.all()]]` を使用して[[並列処理|並列化]]することでパフォーマンスを向上させる。 diff --git a/public/docs/javascript/9-async-await/6-1-practice1.md b/public/docs/javascript/9-async-await/6-1-practice1.md index 6ab6c1cc..340fcfa1 100644 --- a/public/docs/javascript/9-async-await/6-1-practice1.md +++ b/public/docs/javascript/9-async-await/6-1-practice1.md @@ -11,11 +11,11 @@ question: ### 練習問題1: ユーザー情報の取得と表示 -以下の要件を満たす関数 `displayUserSummary(userId)` を作成してください。 +以下の要件を満たす[[関数]] `displayUserSummary(userId)` を作成してください。 1. `https://jsonplaceholder.typicode.com/users/{userId}` からユーザー情報を取得する。 2. `https://jsonplaceholder.typicode.com/users/{userId}/todos` からそのユーザーのTODOリストを取得する。 -3. 上記2つのリクエストは、**パフォーマンスを考慮して並列に実行**すること。 +3. 上記2つのリクエストは、**パフォーマンスを考慮して[[並列処理|並列に実行]]**すること。 4. 取得したデータから、「ユーザー名」と「完了済み(completed: true)のTODOの数」を出力する。 5. 通信エラー時は適切にエラーメッセージを表示する。 diff --git a/public/docs/javascript/9-async-await/6-2-practice2.md b/public/docs/javascript/9-async-await/6-2-practice2.md index 06493b76..585200ae 100644 --- a/public/docs/javascript/9-async-await/6-2-practice2.md +++ b/public/docs/javascript/9-async-await/6-2-practice2.md @@ -11,8 +11,8 @@ question: ### 練習問題2: タイムアウト付きFetch -指定したURLからデータを取得するが、一定時間内にレスポンスが返ってこない場合は「タイムアウト」としてエラーにする関数 `fetchWithTimeout(url, ms)` を作成してください。 -*ヒント: `fetch` のPromiseと、指定時間後に reject するPromiseを `Promise.race()` で競走させてください。* +指定したURLからデータを取得するが、一定時間内にレスポンスが返ってこない場合は「タイムアウト」としてエラーにする[[関数]] `fetchWithTimeout(url, ms)` を作成してください。 +*ヒント: `[[`fetch`]]` の[[Promise]]と、指定時間後に [[reject]] する[[Promise]]を `[[Promise.race|Promise.race()]]` で競走させてください。* ```js:practice10_2.js ```