「変数のスコープ」の項をリライト (#927)

Author: nakaterm

docs/1-trial-session/09-functions/index.mdx

@@ -104,65 +104,44 @@ document.write(multiply(3, 4));
 ## <Term>変数</Term>の<Term>スコープ</Term>
 
 {/* prettier-ignore */}
-<Term>関数</Term>内で<Term>宣言</Term>された<Term>変数</Term>は、<Term>関数</Term>内でのみ有効です。<Term>変数</Term>が有効な範囲のことを、その<Term>変数</Term>の<Term>**スコープ**</Term>と呼んでいます。
+<Term>関数</Term>やif文などの中で`let`や`const`を使って宣言された<Term>変数</Term>は、それらの内部でのみ有効です。<Term>変数</Term>が有効な範囲のことを、その<Term>変数</Term>の<Term>**スコープ**</Term>と呼んでいます。
 
-{/* prettier-ignore */}
-<Term>関数</Term>外で<Term>宣言</Term>された<Term>変数</Term>は<Term>関数</Term>内でも利用できます。
+次の例では、<Term>関数</Term>`greet`の中で<Term>変数</Term>`siteName`を宣言しています。
 
 ```javascript
-let guestCount = 0;
-
 function greet() {
-  guestCount += 1;
-  document.write("あなたは" + guestCount + "人目のお客様です。");
+  const siteName = "田中のブログ";
+  document.write("ようこそ、" + siteName + "へ！");
 }
 
-greet(); // あなたは1人目のお客様です。
-greet(); // あなたは2人目のお客様です。
+greet(); // ようこそ、田中のブログへ！ と表示される
 ```
 
-この例における、`greet`<Term>関数</Term>は、呼び出されるたびに`guestCount`に1を加えています。
-
-:::tip[複合代入演算子]
-
-[**複合代入演算子**](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E4%BB%A3%E5%85%A5%E6%BC%94%E7%AE%97%E5%AD%90) は、計算と代入を同時に行うことができる演算子です。
-
-`x += y`は、`x = x + y`という意味になります。他にも`-=`や`*=`などの演算子が定義されています。`x -= y`は`x = x - y`、`x *= y`は`x = x * y`という意味になります。
+ここで、<Term>関数</Term>の外側から`siteName`を利用しようとするとエラーになります。
 
 ```javascript
-guestCount += 1;
-```
+function greet() {
+  const siteName = "田中のブログ";
+  document.write("ようこそ、" + siteName + "へ！");
+}
 
-は以下の文のように読み替えられます。
+greet(); // ようこそ、田中のブログへ！ と表示される
 
-```javascript
-guestCount = guestCount + 1;
+document.write(siteName); // これはエラーになる (Uncaught ReferenceError: siteName is not defined)
 ```
 
-:::
-
-:::warning[<Term>変数</Term>の<Term>**スコープ**</Term>]
-
-{/* prettier-ignore */}
-<Term>スコープ</Term>が終わった<Term>変数</Term>は、その時点で破棄されます。
+一方で、<Term>関数</Term>の外側で宣言された<Term>変数</Term>を<Term>関数</Term>の内側から利用することは可能です。
 
 ```javascript
-let outer = 0;
-
-function increment() {
-  let inner = 0;
-  outer += 1;
-  inner += 1;
-  document.write(outer); // 1ずつ増える
-  document.write(inner); // 常に1
+const siteName = "田中のブログ";
+
+function greet() {
+  document.write("ようこそ、" + siteName + "へ！");
 }
 
-increment();
-increment();
+greet(); // ようこそ、田中のブログへ！ と表示される
 ```
 
-:::
-
 ## 演習問題1
 
 {/* prettier-ignore */}

docs/1-trial-session/10-loop/index.mdx

@@ -59,6 +59,26 @@ document.write(sum);
 
 <ViewSource url={import.meta.url} path="_samples/answer-while" />
 
+:::tip[複合代入演算子]
+
+[**複合代入演算子**](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E4%BB%A3%E5%85%A5%E6%BC%94%E7%AE%97%E5%AD%90) は、計算と代入を同時に行うことができる演算子です。
+
+`x += y`は、`x = x + y`という意味になります。他にも`-=`や`*=`などの演算子が定義されています。`x -= y`は`x = x - y`、`x *= y`は`x = x * y`という意味になります。
+
+上の例の`sum = sum + i;`や`i = i + 1;`は、それぞれ`sum += i;`や`i += 1;`のように読み替えられます。
+
+```javascript
+let i = 1;
+let sum = 0;
+while (i <= 10) {
+  sum += i;
+  i += 1;
+}
+document.write(sum);
+```
+
+:::
+
 </Answer>
 
 ## for 文