Merge pull request #65 from jigintern/haruto17/chapter-4

📝 4章「条件によって処理を変えよう」の修正

Author: haruto17

javascript/DOCS.md

@@ -24,7 +24,7 @@
     - [3-5. 論理演算](#3-5-論理演算)
   - [4. 条件によって処理を変えよう](#4-条件によって処理を変えよう)
     - [4-1. 比較演算子](#4-1-比較演算子)
-    - [4-2. if文](#4-2-if文)
+    - [4-2. if 文](#4-2-if-文)
     - [4-3. 三項演算子](#4-3-三項演算子)
   - [5. 繰り返し処理をさせよう](#5-繰り返し処理をさせよう)
     - [5-1. 配列](#5-1-配列)
@@ -288,72 +288,72 @@ value += 2; // value = value + 2; と同じ
 
 ## 4. 条件によって処理を変えよう
 
-数学の問題でも場合分けが発生するように、プログラムでも条件によって処理を変更したいことがあります。
-ここではプログラムで条件分岐を記述する方法を説明します。
+数学の問題で場合分けが発生するように、プログラムでも条件によって処理を変更したいことがあります。  
+ここでは二次方程式の判別式を例に、条件分岐を記述する方法を説明します。
 
 ### 4-1. 比較演算子
 
-場合分けが発生する簡単な例として、二次方程式の判別式Dがあります。判別式Dは以下の式で、次のような分岐がわかります。
-判別式D: $D = b^2 - 4ac$
-判別式Dの結果が
+まずはじめに判別式 $D$ は以下の式で表され、 $D$ の値によって3つの分岐がわかります。
 
-- 正の値 → 実数解
-- 0 → 重解
-- 負の値 → 虚数解
+$D = b^2 - 4ac$
 
-これは判別式Dの結果を`value`として、それぞれ比較演算子を用いて以下のように表現できます。
+- 正の値　のとき　実数解をもつ
+- 0　のとき　重解をもつ
+- 負の値　のとき　虚数解をもつ
 
-- 正の値 → `value > 0`
-- 0 → `value === 0`
-- 負の値 → `value < 0`
+ここで $D$ の結果を `value` という変数に置き換えたとき、それぞれの条件は比較演算子を用いて以下のように表せます。  
 
-JSではこのようにして値の大小や等価かどうかを比較できます。
-以下に比較演算子の表を示します。
+- 正の値　→　`value > 0`
+- 0　→　`value === 0`
+- 負の値　→　`value < 0`
+
+JS ではこのようにして値の大小や等価かどうかを比較できます。以下に比較演算子の表を示します。
 
 | 演算 | 記述 |
 | ---- | ---- |
 | `厳密等価` | `a === b` |
 | `厳密不等価` | `a !== b` |
-| `超過/より大きい` | `a > b` |
+| `超過 / より大きい` | `a > b` |
 | `以上` | `a >= b` |
-| `未満/より小さい` | `a < b` |
+| `未満 / より小さい` | `a < b` |
 | `以下` | `a <= b` |
 
 <details>
-  <summary>厳密でない等価/不等価</summary>
+  <summary>厳密でない等価 / 不等価</summary>
 
-  厳密等価/厳密不等価の演算が存在するということは、厳密**でない**等価・不等価の演算があると言うことです。
-  これらは暗黙的な型変換を行うため一見して予想できない挙動をすることがあります。
-  このため、厳密等価演算子・厳密不等価演算子を使用することが推奨されます。
-  以下に厳密でない等価・不等価演算子の表を示します。
+  厳密等価 / 厳密不等価とは逆に、厳密**でない**等価 / 不等価も存在します。  
+  これらは暗黙的な型変換を行うため、一見して予想できない挙動をすることがあります。  
+  このため、厳密等価 / 厳密不等価演算子を使用することが推奨されます。  
+  以下に厳密**でない**等価 / 不等価演算子の表を示します。  
 
   | 演算 | 記述 |
   | ---- | ---- |
   | 等価 | `==` |
   | 不等価 | `!=` |
 
-  繰り返しになりますが、厳密でない演算子の使用は非推奨です。
 </details>
 
-### 4-2. if文
+### 4-2. if 文
+
+4-1. では比較演算子を用いて条件を表現する方法を説明しました。ここでは判別式 $D$ の結果を評価し、実数解・重解・虚数解のどれをもつのか出力するプログラムを考えてみましょう。  
 
-3-1.でプログラムで条件を表現する方法を説明しました。先程の判別式Dの結果を評価し、実数解、重解、虚数解のどれになるかを出力するプログラムを作ることを考えてみましょう。
-評価の結果によって処理を分岐させるためには `if`文を使います。
+評価の結果によって処理を分岐させるためには `if` 文を使います。
 
 ```javascript
 if (<条件1>) {
-   条件1が真のときの処理
+  条件1が真のときの処理
 } else if (<条件2>) {
-   条件2が真のときの処理
+  条件2が真のときの処理
 } else {
-   条件1も条件2も偽のときの処理
+  条件1と条件2が偽のときの処理
 }
 ```
 
-if文は`()`内の評価結果が真のときに直後の`{}`で囲まれたブロック内の処理を行い、`()`内の評価結果が偽のときに直後の`else`句の処理を行います。このとき、`else`のあとに`if`でif文をつなげることで条件分岐を追加できます。`else`句のあとにある`{}`ブロック内の処理は、それより前にある`if`と`else if`のすべての条件を満たさなかったときに実行されます。
-`if`\~`else if`\~`else`句は一連の処理の塊として捉えられます。この中で上から順に評価が行われるため、条件の順番には気をつける必要があります。
+if 文は `()` 内の評価結果が真のとき、直後の `{}` で囲まれたブロック内の処理を行います。反対に偽であるときは直後の `else` 句の処理を行います。このとき、`else` のあとに `if` で if 文をつなげることで条件分岐を追加できます。  
+`else` 句のあとにある `{}` ブロック内の処理は、それより前にある `if` と `else if` のすべての条件を満たさなかったときに実行されます。  
+`if` から `else` までは一連の処理の塊として捉えられます。この中で上から順に評価が行われるため、条件の順番には気をつける必要があります。  
 
-では判別式の結果から解がどうなるかを出力するプログラムを以下に書きます。
+では判別式 $D$ の結果を評価して、どの解をもつのか出力するプログラムを以下に示します。
 
 ```javascript
 let a, b, c;
@@ -364,17 +364,17 @@ c = <定数項>;
 const d = b ** 2 - 4 * a * c;
 
 if (d === 0) {
-   console.log('重解');
+  console.log('重解');
 } else if (d > 0) {
-   console.log('実数解');
+  console.log('実数解');
 } else {
-   console.log('虚数解');
+  console.log('虚数解');
 }
 ```
 
 実行結果は以下のようになります。
 
-![重解](imgs/if-discriminant-1.png)![実数解](imgs/if-discriminant-2.png)
+![重解](imgs/if-discriminant-1.webp)![実数解](imgs/if-discriminant-2.webp)
 
 ### 4-3. 三項演算子
 
@@ -385,7 +385,7 @@ if (d === 0) {
 value = <条件> ? <条件が真のときの値> : <条件が偽のときの値>;
 ```
 
-例えばある値の真偽によって値を返したいときに活用できます。↑の判別式の例を書き換えると以下のようになります。
+例えばある値の真偽に応じて値を返したいときに活用できます。4-2. の判別式の例を書き換えると以下のようになります。
 
 ```javascript
 let a, b, c;
@@ -404,10 +404,10 @@ const res = d === 0
 console.log(res);
 ```
 
-三項演算子はこのように三項演算子の下に三項演算子を書くことができます。
-しかし、階層が深くなると複雑で読みづらくなるので注意が必要です。
+このように三項演算子の下に、新たに三項演算子を書くことができます。
+しかし階層が深くなると複雑になり、読みづらくなるので注意が必要です。
 
-![三項演算子](imgs/conditional-operator-1.png)![三項演算子](imgs/consitional-operator-2.png)
+![三項演算子](imgs/conditional-operator-1.webp)![三項演算子](imgs/conditional-operator-2.webp)
 
 ## 5. 繰り返し処理をさせよう