Merge pull request #207 from ut-code/copilot/update-javascript-chapter-1-explanations

JavaScript1章: プリミティブ型説明の分割・補強とオブジェクト例追加、練習問題の簡素化

Author: na-trium-144

public/docs/javascript/1-basics/2-0-primitive-type.md

@@ -3,9 +3,8 @@ id: javascript-basics-primitive-type
 title: 'データ型: プリミティブ型'
 level: 2
 question:
+  - プリミティブ型とは、ざっくり言うとどういう値のことですか？
   - プリミティブ型がイミュータブル（変更不可）というのは、どういう状態を指しますか？
-  - String型で「テンプレートリテラル」を使うと、具体的に何が便利になるのですか？
-  - Number型で整数と浮動小数点数の区別がないというのは、何か問題になることはありますか？
   - SymbolやBigIntは、通常の開発でどのくらいの頻度で使うものですか？
 ---
 
@@ -15,10 +14,12 @@ JavaScriptは動的型付け言語であり、変数は特定の型に紐付き
 
 プリミティブ型はイミュータブル（変更不可）であり、以下の7種類が存在します。
 
-1.  **String**: 文字列。ES6から導入された「テンプレートリテラル（バッククォート `` ` ``）」を使うと、変数の埋め込みが容易です。
-2.  **Number**: 数値。整数と浮動小数点数の区別はなく、すべて倍精度浮動小数点数（IEEE 754）として扱われます。
-3.  **Boolean**: `true` または `false`。
-4.  **undefined**: 「値が未定義である」ことを表す型。変数を宣言して値を代入していない状態です。
-5.  **null**: 「値が存在しない」ことを意図的に示す型。
-6.  **Symbol**: 一意で不変な識別子。オブジェクトのプロパティキーなどに使われます。
-7.  **BigInt**: `Number`型では表現できない巨大な整数を扱います（末尾に `n` をつけます）。
+1.  **String**: 文字列
+2.  **Number**: 数値
+3.  **Boolean**: `true` または `false`
+4.  **undefined**: 「値が未定義である」ことを表す型
+5.  **null**: 「値が存在しない」ことを意図的に示す型
+6.  **Symbol**: 一意で不変な識別子（主にオブジェクトのプロパティキー用途）
+7.  **BigInt**: `Number`型では表現できない巨大な整数を扱う型（末尾に `n`）
+
+この章では、まず最もよく使う `String` / `Number` / `Boolean` / `undefined` / `null` を順に見ていきます。`Symbol` と `BigInt` は用途が限定的なため、ここでは「プリミティブ型の一種」であることだけ押さえれば十分です。

public/docs/javascript/1-basics/2-1-null-undefined.md

@@ -0,0 +1,31 @@
+---
+id: javascript-basics-string
+title: 文字列（String）
+level: 3
+question:
+  - シングルクォートとダブルクォートで文字列を囲むことの違いは何ですか？
+  - テンプレートリテラルは、どんな場面で使うと便利ですか？
+  - テンプレートリテラルの `${}` の中に計算式を書けますか？
+---
+
+### 文字列（String）
+
+JavaScriptの文字列は、シングルクォート (`'`) またはダブルクォート (`"`) で作成します。
+
+また、バッククォート (`` ` ``) で囲む**テンプレートリテラル**を使うと、変数や式を文字列に埋め込めます。文字列の連結（`+`）より読みやすくなることが多いため、こちらを使うのが一般的です。
+
+```js-repl
+> const name = "Ada";
+undefined
+> const language = 'JavaScript';
+undefined
+> // + で連結
+> "Hello, " + name + "!"
+'Hello, Ada!'
+> // テンプレートリテラルで埋め込み
+> `Hello, ${name}!`
+'Hello, Ada!'
+> // 式も埋め込める
+> `${language}は${10 + 5}日で入門できます`
+'JavaScriptは15日で入門できます'
+```

public/docs/javascript/1-basics/2-1-string.md

@@ -0,0 +1,38 @@
+---
+id: javascript-basics-number
+title: 数値（Number）
+level: 3
+question:
+  - JavaScriptで整数と小数を区別しないのは、どういう意味ですか？
+  - 除算や剰余など、基本的な計算はどのように書けば良いですか？
+  - 小数計算で誤差が出ることがあるのはなぜですか？
+---
+
+### 数値（Number）
+
+JavaScriptの数値は `Number` 型で表され、**整数と小数を区別しません**。どちらも同じ `number` として扱われます。
+
+四則演算は直感的に行えます。べき乗は `**`、剰余は `%` を使います。
+
+```js-repl
+> const a = 10;     // 整数
+undefined
+> const b = 3.14;   // 小数
+undefined
+> typeof a
+'number'
+> typeof b
+'number'
+> 10 + 3
+13
+> 10 / 3
+3.3333333333333335
+> 10 % 3
+1
+> 2 ** 4
+16
+> 0.1 + 0.2
+0.30000000000000004
+```
+
+`0.1 + 0.2` のような小数計算で誤差が出るのは、JavaScriptが数値を内部的に2進数の浮動小数点として扱うためです。

public/docs/javascript/1-basics/2-2-number.md

@@ -0,0 +1,32 @@
+---
+id: javascript-basics-boolean
+title: 真偽値（Boolean）
+level: 3
+question:
+  - Boolean型はどんな場面で使いますか？
+  - '`true` / `false` は文字列の `"true"` / `"false"` と何が違いますか？'
+---
+
+### 真偽値（Boolean）
+
+真偽値は `true` と `false` の2つの値を持ちます。条件分岐や判定処理で使う基本的な型です。
+
+論理演算子には、AND（`&&`）、OR（`||`）、NOT（`!`）があります。
+
+```js-repl
+> const isActive = true;
+undefined
+> const hasPermission = false;
+undefined
+> typeof isActive
+'boolean'
+> // AND: 両方 true なら true
+> isActive && hasPermission
+false
+> // OR: どちらかが true なら true
+> isActive || hasPermission
+true
+> // NOT: true/false を反転
+> !isActive
+false
+```

public/docs/javascript/1-basics/2-3-boolean.md

@@ -0,0 +1,31 @@
+---
+id: javascript-basics-null-undefined
+title: undefined と null
+level: 3
+question:
+  - undefinedとnullは、どう使い分けるのが良いですか？
+  - 変数を宣言しただけの状態がundefinedになるのはなぜですか？
+  - '`typeof null` が `''object''` になるのは本当に正しいのですか？'
+---
+
+### undefined と null
+
+他言語経験者が最初に混乱しやすいのが、この `undefined` と `null` の違いです。
+
+- **undefined**: JavaScriptエンジンが「値がまだない」ことを示すときに現れます（例: 宣言だけして代入していない変数）。
+- **null**: プログラマが「ここには値がない」と明示したいときに代入します。
+
+```js-repl
+> let unassigned;
+undefined
+> unassigned
+undefined
+> let empty = null;
+undefined
+> typeof unassigned
+'undefined'
+> typeof empty
+'object'
+```
+
+`typeof null` が `'object'` になるのは、JavaScript初期から残っている歴史的な仕様です。`null` 自体はオブジェクトではなく、プリミティブ型の値です。

public/docs/javascript/1-basics/2-4-undefined-null.md

@@ -14,6 +14,23 @@ question:
 
 主なオブジェクト型には以下があります。
 
-  * **Object**: キーと値のペアの集合（辞書、ハッシュマップに近い）。
-  * **Array**: 順序付きリスト。
+  * **Object**: キーと値のペアの集合（辞書、ハッシュマップに近い）。詳しくは5章で解説します。
+  * **Array**: 順序付きリスト。詳しくは7章で解説します。
   * **Function**: JavaScriptでは関数もオブジェクトであり、変数に代入したり引数として渡すことができます（第一級関数）。
+
+```js-repl
+> // Object: キーと値のペアの集合
+> const user = { name: "Alice", age: 25 };
+undefined
+> user.name
+'Alice'
+> user["age"]
+25
+> // Array: 順序付きリスト（インデックスは 0 から始まる）
+> const colors = ["Red", "Green", "Blue"];
+undefined
+> colors[0]
+'Red'
+> colors.length
+3
+```

public/docs/javascript/1-basics/3-0-object.md

@@ -1,29 +1,19 @@
 ---
 id: javascript-basics-practice1
-title: '練習問題1: テンプレートリテラルと型変換'
+title: '練習問題1: テンプレートリテラル'
 level: 3
 question:
-  - テンプレートリテラルを使って自己紹介文を作る具体的なコード例を見せてもらえますか？
-  - 論理和演算子 `||` と Null合体演算子 `??` は、どちらを使っても良いのですか？違いはありますか？
-  - 年齢がnullまたはundefinedの場合に「不明」と表示させる部分について、コードのヒントが欲しいです。
+  - テンプレートリテラルの `${}` の中に計算式を書けますか？
+  - バッククォートの中でバッククォート自体を使いたい場合はどうすれば良いですか？
 ---
 
-### 練習問題1: テンプレートリテラルと型変換
+### 練習問題1: テンプレートリテラル
 
-ユーザーの年齢（数値）と名前（文字列）を受け取り、自己紹介文を作成する関数を作成してください。
-ただし、年齢が `null` または `undefined` の場合は「不明」と表示するようにしてください。論理和演算子 `||` または Null合体演算子 `??` を活用してみましょう。
+`itemName` という変数に商品名（文字列）、`price` という変数に価格（数値）、`stock` という変数に在庫数（数値）をそれぞれ代入してください。その後、テンプレートリテラルを使って「商品: [商品名], 価格: [価格]円, 在庫: [在庫数]個」という形式の文字列を作り、`console.log()` で出力するコードを書いてみましょう。
 
 ```js:practice2_1.js
-// 以下の関数を完成させてください
-function introduce(name, age) {
-    // ここにコードを記述
-}
-
-console.log(introduce("Tanaka", 25));
-console.log(introduce("Sato", null));
 ```
 
 ```js-exec:practice2_1.js
-My name is Tanaka and I am 25 years old.
-My name is Sato and I am 不明 years old.
+(出力例) 商品: 高性能マウス, 価格: 4500円, 在庫: 2個
 ```

public/docs/javascript/1-basics/6-1-practice1.md

@@ -1,30 +1,20 @@
 ---
 id: javascript-basics-practice2
-title: '練習問題2: オブジェクトの操作と参照'
+title: '練習問題2: constとオブジェクトの変更'
 level: 3
 question:
-  - なぜ `newList = originalList` だと `originalList` も変更されてしまうのですか？
-  - 「参照コピー」とはどういう状態ですか？
-  - スプレッド構文 `...` を使って、この問題をどう解決すれば良いですか？
-  - 配列をコピーする他の方法はありますか？
+  - constで宣言したのにプロパティを変更できるのはなぜですか？
+  - プロパティの変更と、変数への再代入の違いは何ですか？
 ---
 
-### 練習問題2: オブジェクトの操作と参照
+### 練習問題2: constとオブジェクトの変更
 
-以下のコードにはバグ（意図しない挙動）があります。
-`originalList` の内容を保持したまま、新しい要素を追加した `newList` を作成したいのですが、現状では `originalList` も変更されてしまいます。
-スプレッド構文 `...` などを使い、`originalList` を変更せずに `newList` を作成するように修正してください。
+`const` を使って、`name`（商品名・文字列）と `price`（価格・数値）を持つ商品オブジェクト `product` を作成してください。
+次に、`price` を別の値に変更し、さらに `stock`（在庫数・数値）プロパティを新たに追加してから、`console.log()` でオブジェクトの内容を出力してみましょう。
 
 ```js:practice2_2.js
-const originalList = ["Apple", "Banana"];
-
-// 参照コピーになっているため originalList も変わってしまう
-const newList = originalList;
-newList.push("Orange");
-
-console.log("Original:", originalList); // ["Apple", "Banana"] と出力させたい
-console.log("New:", newList);           // ["Apple", "Banana", "Orange"] と出力させたい
 ```
 
 ```js-exec:practice2_2.js
+(出力例) { name: 'コーヒー', price: 550, stock: 30 }
 ```