diff --git a/docs/1-trial-session/08-loop/index.md b/docs/1-trial-session/08-loop/index.md index bbe70b885..7b6fd9fbf 100644 --- 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); -## 中級演習 +## 中級課題 ### 素数判定問題 diff --git a/docs/1-trial-session/09-functions/index.md b/docs/1-trial-session/09-functions/index.md index 0b29af6a9..4af260d0e 100644 --- a/docs/1-trial-session/09-functions/index.md +++ b/docs/1-trial-session/09-functions/index.md @@ -124,11 +124,16 @@ increment(); ::: -## モジュール化 +## パーツに分割する -複雑な操作を 関数 として モジュール化 して複数のブロックに分解することで、コードの可読性を上げることができます。 +複雑な操作を複数の 関数 ブロックに分解することで、コードの可読性を上げることができます。この操作を モジュール化 と呼びます。 +パーツに分割すると、次のようなメリットがあります。 -モジュール化前: +- ブロックあたりのコードが短くなるので、読みやすい +- パーツごとにテストができるので、デバッグがしやすい +- 汎用性のあるパーツなら、使いまわしができる + +以下の例では、階段を表示する操作の中の、文字列を繰り返す操作を `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("
"); } ``` -:::note -この例における`repeat`関数は、第一引数の文字列を第二引数回だけ繰り返し足したものを返します。 -::: - --- -## 基礎演習 +## 基礎課題 ### 最大値 @@ -208,7 +208,7 @@ function max(a, b) { -## 中級演習 +## 中級課題 ### 携帯電話料金 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 index 0c4129336..9c1b96491 100644 --- 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 @@ - findMax関数 解答例 (reduce) + findMaxNumber関数 解答例 (reduce) 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 index 1958d5155..26d913f31 100644 --- 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,10 +1,12 @@ -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]; @@ -12,8 +14,16 @@ 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(`

配列 [${array1}] の最大値は${findMax(array1)} です。

`); -document.write(`

配列 [${array2}] の最大値は${findMax(array2)} です。

`); -document.write(`

配列 [${array3}] の最大値は${findMax(array3)} です。

`); -document.write(`

配列 [${array4}] の最大値は${findMax(array4)} です。

`); -document.write(`

空の配列の最大値は ${findMax([])} です。

`); +document.write( + `

配列 [${array1}] の最大値は${findMaxNumber(array1)} です。

`, +); +document.write( + `

配列 [${array2}] の最大値は${findMaxNumber(array2)} です。

`, +); +document.write( + `

配列 [${array3}] の最大値は${findMaxNumber(array3)} です。

`, +); +document.write( + `

配列 [${array4}] の最大値は${findMaxNumber(array4)} です。

`, +); +document.write(`

空の配列の最大値は ${findMaxNumber([])} です。

`); diff --git a/docs/1-trial-session/10-array/_samples/array-sum/index.html b/docs/1-trial-session/10-array/_samples/array-sum-for-of/index.html similarity index 100% rename from docs/1-trial-session/10-array/_samples/array-sum/index.html rename to 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 new file mode 100644 index 000000000..41980b7f1 --- /dev/null +++ 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 new file mode 100644 index 000000000..76c68f538 --- /dev/null +++ b/docs/1-trial-session/10-array/_samples/array-sum-simple-for/index.html @@ -0,0 +1,10 @@ + + + + + 配列の和 解答例 + + + + + 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 new file mode 100644 index 000000000..6f8ff0dc8 --- /dev/null +++ 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 deleted file mode 100644 index 12a47a9cb..000000000 --- a/docs/1-trial-session/10-array/_samples/array-sum/script.js +++ /dev/null @@ -1,13 +0,0 @@ -const array1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; -const array2 = [-3, -1, 9, -10, 3, 7, 6, 1, 0, 5]; - -function sumArray(array) { - let sum = 0; - for (let i = 0; i < array.length; i += 1) { - sum += array[i]; - } - return sum; -} - -document.write(`sum of array1: ${sumArray(array1)}
`); -document.write(`sum of array2: ${sumArray(array2)}
`); diff --git a/docs/1-trial-session/10-array/index.md b/docs/1-trial-session/10-array/index.md index a81ceeacd..9a145375a 100644 --- a/docs/1-trial-session/10-array/index.md +++ b/docs/1-trial-session/10-array/index.md @@ -9,7 +9,7 @@ import Answer from "@site/src/components/Answer"; ## 配列 -JavaScript における配列は、複数の値を並べて一つにまとめたオブジェクトです。`[` から `]` で囲まれた部分は配列を生成する式になります。 +JavaScript における配列は、複数の値を並べて一つにまとめた値です。`[` から `]` で囲まれた部分は配列を生成する式になります。 ```javascript const studentNames = ["田中", "佐藤", "鈴木"]; @@ -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]; +``` + ::: ```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} です。`); +``` + + + +### 別解 + +`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)}
`); -document.write(`sum of array2: ${sumArray(array2)}
`); +document.write(`配列の合計値は ${sum} です。`); ``` - + ## 中級課題 -### 最大値 +### 配列の最大値 -引数にひとつの配列が与えられたとき、その配列の最大値を求める関数 `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(`

配列 [${array1}] の最大値は${findMax(array1)} です。

`); -document.write(`

配列 [${array2}] の最大値は${findMax(array2)} です。

`); -document.write(`

配列 [${array3}] の最大値は${findMax(array3)} です。

`); -document.write(`

配列 [${array4}] の最大値は${findMax(array4)} です。

`); -document.write(`

空の配列の最大値は ${findMax([])} です。

`); +document.write( + `

配列 [${array1}] の最大値は${findMaxNumber(array1)} です。

`, +); +document.write( + `

配列 [${array2}] の最大値は${findMaxNumber(array2)} です。

`, +); +document.write( + `

配列 [${array3}] の最大値は${findMaxNumber(array3)} です。

`, +); +document.write( + `

配列 [${array4}] の最大値は${findMaxNumber(array4)} です。

`, +); +document.write(`

空の配列の最大値は ${findMaxNumber([])} です。

`); ``` :::danger -配列の長さにかかわらず配列の最初の値を使うような処理をする場合は、長さが0である空の配列を渡された時に例外処理することを忘れないでください！ +配列の長さにかかわらず配列の最初の値を使うような処理をする場合は、長さが0である空の配列を除外することを忘れないでください！ :::