Merge pull request #465 from ut-code/462-fix-array-exercise

aster-void · web-flow · commit 9f10cb8f6ea5 · 2023-10-18T21:19:06.000+09:00
配列の章の演習問題の修正
diff --git a/docs/1-trial-session/08-loop/index.md b/docs/1-trial-session/08-loop/index.md
@@ -180,7 +180,7 @@ const string2 = `10から2を引くと${10 - 2}です。`;
 
 ---
 
-## 基礎演習
+## 基礎課題
 
 ### 1 ~ 10 の積
 
@@ -221,7 +221,7 @@ document.write(product);
 
 </Answer>
 
-## 中級演習
+## 中級課題
 
 ### 素数判定問題
 
diff --git a/docs/1-trial-session/09-functions/index.md b/docs/1-trial-session/09-functions/index.md
@@ -124,11 +124,16 @@ increment();
 
 :::
 
-## モジュール化
+## パーツに分割する
 
-複雑な操作を <Term type="javascriptFunction">関数</Term> として <Term strong type="javascriptModularization">モジュール化</Term> して複数のブロックに分解することで、コードの可読性を上げることができます。
+複雑な操作を複数の <Term type="javascriptFunction">関数</Term> ブロックに分解することで、コードの可読性を上げることができます。この操作を <Term strong type="javascriptModularization">モジュール化</Term> と呼びます。
+パーツに分割すると、次のようなメリットがあります。
 
-モジュール化前:
+- ブロックあたりのコードが短くなるので、読みやすい
+- パーツごとにテストができるので、デバッグがしやすい
+- 汎用性のあるパーツなら、使いまわしができる
+
+以下の例では、階段を表示する操作の中の、文字列を繰り返す操作を `repeat` 関数というパーツに分けています。
 
 ```javascript
 const stringToRepeat = "☆";
@@ -142,29 +147,24 @@ for (let i = 0; i < 10; i += 1) {
 }
 ```
 
-モジュール化後:
-
 ```javascript
-function repeat(stringToRepeat, times) {
+function repeat(stringToRepeat, count) {
   let result = "";
-  for (let j = 0; j < times; j += 1) {
+  for (let j = 0; j < count; j += 1) {
     result += stringToRepeat;
   }
   return result;
 }
+
 for (let i = 0; i < 10; i += 1) {
   document.write(repeat("☆", i));
   document.write("<br>");
 }
 ```
 
-:::note
-この例における`repeat`<Term type="javascriptFunction">関数</Term>は、第一<Term type="javascriptParameter">引数</Term>の<Term type="javascriptString">文字列</Term>を第二<Term type="javascriptParameter">引数</Term>回だけ繰り返し<Term type="javascriptStringConcatenation">足した</Term>ものを返します。
-:::
-
 ---
 
-## 基礎演習
+## 基礎課題
 
 ### 最大値
 
@@ -208,7 +208,7 @@ function max(a, b) {
 
 </Answer>
 
-## 中級演習
+## 中級課題
 
 ### 携帯電話料金
 
diff --git a/docs/1-trial-session/10-array/_samples/array-max/index.html b/docs/1-trial-session/10-array/_samples/array-max/index.html
@@ -2,7 +2,7 @@
 <html lang="ja">
   <head>
     <meta charset="utf-8" />
-    <title>findMax関数 解答例 (reduce)</title>
+    <title>findMaxNumber関数 解答例 (reduce)</title>
   </head>
   <body>
     <script src="./script.js"></script>
diff --git a/docs/1-trial-session/10-array/_samples/array-max/script.js b/docs/1-trial-session/10-array/_samples/array-max/script.js
@@ -1,19 +1,29 @@
-function findMax(array) {
-  if (array.length == 0) return; //空配列の例外処理
-  let maxValue = array[0];
-  for (let i = 0; i < array.length; i += 1) {
-    if (array[i] > maxValue) maxValue = array[i];
+function findMaxNumber(numbers) {
+  if (numbers.length === 0) return; // 空配列を除外
+  let maxNumber = numbers[0];
+  for (const number of numbers) {
+    if (maxNumber < number) {
+      maxNumber = number;
+    }
   }
-  return maxValue;
+  return maxNumber;
 }
 
 const array1 = [3, 6, 8, 5, 0];
 const array2 = [-8, -7, -3, -1, -5];
 const array3 = [5986, 7202, 9347, 3593, 8166, 662, 2235, 9323, 2240, 943];
 const array4 = [-878, -40, -324, -410, -592, -610, -880, -65, -423, -32];
 
-document.write(`<p>配列 [${array1}] の最大値は${findMax(array1)} です。</p>`);
-document.write(`<p>配列 [${array2}] の最大値は${findMax(array2)} です。</p/>`);
-document.write(`<p>配列 [${array3}] の最大値は${findMax(array3)} です。</p>`);
-document.write(`<p>配列 [${array4}] の最大値は${findMax(array4)} です。</p>`);
-document.write(`<p>空の配列の最大値は ${findMax([])} です。</p/>`);
+document.write(
+  `<p>配列 [${array1}] の最大値は${findMaxNumber(array1)} です。</p>`,
+);
+document.write(
+  `<p>配列 [${array2}] の最大値は${findMaxNumber(array2)} です。</p>`,
+);
+document.write(
+  `<p>配列 [${array3}] の最大値は${findMaxNumber(array3)} です。</p>`,
+);
+document.write(
+  `<p>配列 [${array4}] の最大値は${findMaxNumber(array4)} です。</p>`,
+);
+document.write(`<p>空の配列の最大値は ${findMaxNumber([])} です。</p>`);
diff --git a/docs/1-trial-session/10-array/_samples/array-sum-for-of/index.html b/docs/1-trial-session/10-array/_samples/array-sum-for-of/index.html
diff --git a/docs/1-trial-session/10-array/_samples/array-sum-for-of/script.js b/docs/1-trial-session/10-array/_samples/array-sum-for-of/script.js
@@ -0,0 +1,8 @@
+const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+let sum = 0;
+for (const number of numbers) {
+  sum += number;
+}
+
+document.write(`配列の合計値は ${sum} です。`);
diff --git a/docs/1-trial-session/10-array/_samples/array-sum-simple-for/index.html b/docs/1-trial-session/10-array/_samples/array-sum-simple-for/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <title>配列の和 解答例</title>
+  </head>
+  <body>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/docs/1-trial-session/10-array/_samples/array-sum-simple-for/script.js b/docs/1-trial-session/10-array/_samples/array-sum-simple-for/script.js
@@ -0,0 +1,8 @@
+const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+let sum = 0;
+for (let i = 0; i < numbers.length; i += 1) {
+  sum += numbers[i];
+}
+
+document.write(`配列の合計値は ${sum} です。`);
diff --git a/docs/1-trial-session/10-array/_samples/array-sum/script.js b/docs/1-trial-session/10-array/_samples/array-sum/script.js
diff --git a/docs/1-trial-session/10-array/index.md b/docs/1-trial-session/10-array/index.md
@@ -108,45 +108,70 @@ document.write(studentNames); // 田中,佐藤,鈴木,内藤
 
 ## 基礎課題
 
-### 連続表示
+### 要素の和
 
-- 引数に与えられた配列の、要素の和を取る関数 `sumArray` を書いてみましょう。
+- 配列があります。その配列の要素の和を求めてみましょう。
 
 :::tip
-変数 `i` を `0` から `(作成した配列の長さ) - 1` まで順番に増やしながら、配列の `i` 番目の要素を足してみましょう。
+`for 〜 of` 文を使って、配列のそれぞれの要素に対して操作を実行します。
+:::
+
+:::note
+次の配列をテスト用に使ってください。
+
+```javascript
+const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+```
+
+```javascript
+const numbers = [-3, -1, 9, -10, 3, 7, 6, 1, 0, 5];
+```
+
 :::
 
 <Answer>
 
 ```javascript
-const array1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-const array2 = [-3, -1, 9, -10, 3, 7, 6, 1, 0, 5];
+const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
-function sumArray(array) {
-  let sum = 0;
-  for (let i = 0; i < array.length; i += 1) {
-    sum += array[i];
-  }
-  return sum;
+let sum = 0;
+for (const number of numbers) {
+  sum += number;
+}
+
+document.write(`配列の合計値は ${sum} です。`);
+```
+
+<ViewSource url={import.meta.url} path="_samples/array-sum-for-of" />
+
+### 別解
+
+`for 〜 of` 文を使わず、次のように書くこともできます。
+
+```javascript
+const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+let sum = 0;
+for (let i = 0; i < numbers.length; i += 1) {
+  sum += numbers[i];
 }
 
-document.write(`sum of array1: ${sumArray(array1)} <br>`);
-document.write(`sum of array2: ${sumArray(array2)} <br>`);
+document.write(`配列の合計値は ${sum} です。`);
 ```
 
-<ViewSource url={import.meta.url} path="_samples/array-sum" />
+<ViewSource url={import.meta.url} path="_samples/array-sum-simple-for" />
 
 </Answer>
 
 ## 中級課題
 
-### 最大値
+### 配列の最大値
 
-引数にひとつの配列が与えられたとき、その配列の最大値を求める関数 `findMax` を作成しましょう。
+引数に配列を一つ取り、その配列の最大値を求める関数 `findMaxNumber` を作成しましょう。
 
 :::note
 
-テスト用に、ランダムに生成された以下の配列を使ってよいものとします。
+テスト用に、ランダムに生成された次の配列を使ってください。
 
 ```javascript
 const array1 = [3, 6, 8, 5, 0];
@@ -175,24 +200,34 @@ const array2 = [-8, -7, -3, -1, -5];
 const array3 = [5986, 7202, 9347, 3593, 8166, 662, 2235, 9323, 2240, 943];
 const array4 = [-878, -40, -324, -410, -592, -610, -880, -65, -423, -32];
 
-function findMax(array) {
-  if (array.length === 0) return; // 空配列の例外処理
-  let maxValue = array[0];
-  for (let i = 0; i < array.length; i += 1) {
-    if (array[i] > maxValue) maxValue = array[i];
+function findMaxNumber(numbers) {
+  if (numbers.length === 0) return; // 空配列を除外
+  let maxNumber = numbers[0];
+  for (const number of numbers) {
+    if (maxNumber < number) {
+      maxNumber = number;
+    }
   }
-  return maxValue;
+  return maxNumber;
 }
 
-document.write(`<p>配列 [${array1}] の最大値は${findMax(array1)} です。</p>`);
-document.write(`<p>配列 [${array2}] の最大値は${findMax(array2)} です。</p/>`);
-document.write(`<p>配列 [${array3}] の最大値は${findMax(array3)} です。</p>`);
-document.write(`<p>配列 [${array4}] の最大値は${findMax(array4)} です。</p>`);
-document.write(`<p>空の配列の最大値は ${findMax([])} です。</p/>`);
+document.write(
+  `<p>配列 [${array1}] の最大値は${findMaxNumber(array1)} です。</p>`,
+);
+document.write(
+  `<p>配列 [${array2}] の最大値は${findMaxNumber(array2)} です。</p>`,
+);
+document.write(
+  `<p>配列 [${array3}] の最大値は${findMaxNumber(array3)} です。</p>`,
+);
+document.write(
+  `<p>配列 [${array4}] の最大値は${findMaxNumber(array4)} です。</p>`,
+);
+document.write(`<p>空の配列の最大値は ${findMaxNumber([])} です。</p>`);
 ```
 
 :::danger
-配列の長さにかかわらず配列の最初の値を使うような処理をする場合は、長さが0である空の配列を渡された時に例外処理することを忘れないでください！
+配列の長さにかかわらず配列の最初の値を使うような処理をする場合は、長さが0である空の配列を除外することを忘れないでください！
 :::
 
 <ViewSource url={import.meta.url} path="_samples/array-max" />
