「変数」の章を改訂 (#6)

chvmvd · web-flow · commit 36fdd1585c4b · 2024-06-19T14:20:30.000+09:00
diff --git a/docs/05-variables/_samples/compound-assignment/index.html b/docs/05-variables/_samples/compound-assignment/index.html
@@ -2,7 +2,7 @@
 <html lang="ja">
   <head>
     <meta charset="utf-8" />
-    <title>Title</title>
+    <title>タイトル</title>
   </head>
   <body>
     <script src="./script.js"></script>
diff --git a/docs/05-variables/index.mdx b/docs/05-variables/index.mdx
@@ -2,78 +2,78 @@
 title: 変数
 ---
 
-## <Term>変数</Term>とは
+## 変数とは
 
-{/* prettier-ignore */}
-<Term>**変数**</Term>は値を一時的に保存しておくための入れ物で、他のところで再利用することができます。
-プログラムにおける<Term>変数</Term>は、数値だけでなく、<Term>文字列</Term>等を含め、全ての種類の「<Term>値</Term>」を入れることができます。
+**変数**を用いると<Term>値</Term>を一時的に保存し、他のところで再利用することができます。
 
-## <Term>変数</Term>の<Term>宣言</Term>と使用
+数学における変数は数値のことを表しますが、プログラムにおける<Term>変数</Term>には、<Term>数値</Term>だけでなく、<Term>文字列</Term>などのすべての「<Term>値</Term>」を入れることができます。
+
+## 変数の宣言と使用
+
+次のプログラムでは、`myName` という<Term>変数</Term>を宣言し、そこに `"田中太郎"` という<Term>文字列</Term>を代入しています。
+その後に、変数 `myName` に代入されている<Term>値</Term>を画面に表示しています。
 
-{/* prettier-ignore */}
 ```javascript
 let myName = "田中太郎";
 document.write(myName); // 田中太郎
 ```
 
-`let` は、<Term>変数</Term>を<Term>**宣言**</Term>するためのキーワードです。
+`let myName = "田中太郎";` とすることで、`myName` という名前の<Term>変数</Term>を**宣言**し、そこに<Term>文字列</Term> `"田中太郎"` を**代入**しています。
 
-1 行目では、`myName` という名前の<Term>変数</Term>を<Term>宣言</Term>し、そこに文字列 `"田中太郎"` を<Term>**代入**</Term>しています。
+`let` は、<Term>変数</Term>を<Term>宣言</Term>するためのキーワードです。
 
-`=` は<Term>代入</Term>を表し、左側に指定した<Term>変数</Term>に対し、右側に指定された<Term>値</Term>を<Term>代入</Term>します。
-プログラミングにおける `=` はあくまでも代入の意味で、数学における等号 ($=$) とは意味が異なります。
+`=` は<Term>代入</Term>を表します。
+プログラムにおける `=` はあくまでも代入の意味で、数学における等号 ($=$) とは意味が異なります。
 
-2 行目では、<Term>変数</Term> `myName` に<Term>代入</Term>されていた<Term>文字列</Term> `"田中太郎"` が画面に表示されます。
+`document.write(myName);` とすることで、<Term>変数</Term> `myName` に<Term>代入</Term>されていた<Term>値</Term> `"田中太郎"` が画面に表示されます。
 
 ## 再代入
 
+一度代入が行われた変数に、新しい<Term>値</Term>を再び代入することができます。
+これを**再代入**と呼びます。
+
+次のプログラムは、2 回再代入を行っており、最後に再代入された<Term>値</Term> `12` が表示されます。
+
 ```javascript
-let myAge = 14;
+let myAge = 11;
 myAge = 13;
-myAge = 15;
-document.write(myAge); // 15
+myAge = 12;
+document.write(myAge); // 12
 ```
 
-上のコードを見てください。
-一度宣言した変数に、再び代入が行われています。
-これを**再代入**と呼びます。
-
-{/* prettier-ignore */}
-<Term>変数</Term> `myAge` には 2 回再<Term>代入</Term>が行われており、最後に<Term>代入</Term>された `15` が表示されています。
-<Term>変数</Term>には、最後に<Term>代入</Term>された<Term>値</Term>のみを保持する性質があるのです。
-
-さらに、再<Term>代入</Term>について詳しく見てみましょう。
-それでは、以下の場合はどうでしょうか。このコードの結果は何でしょう？
+再代入について、さらに詳しく見ていきましょう。
+次のプログラムを実行すると、何と表示されるでしょうか。
 
-```javascript
+```javascript showLineNumbers
 let price = 100;
 price = price / 2;
 document.write(price);
 ```
 
 <ViewSource url={import.meta.url} path="_samples/compound-assignment" />
 
-{/* prettier-ignore */}
-2行目は `price / 2` が `100 / 2` となり、その結果の `50` が `price` に再代入されています。
+このプログラムを実行すると、`50` と表示されます。
+それは、2 行目では `price / 2` が先に計算されて `100 / 2` となり、その結果の `50` が `price` に再代入されているからです。
 
 ![変数の再代入](./reassignment-evaluation.png)
 
 :::tip
 
-ここまでの例では、`my name` というフレーズを、`myName` のように記述しています。
-このように、複数の単語にわたるフレーズを、2 語目以降の先頭の文字を大文字にして結合する命名規則を、キャメルケースと呼びます。
+ここまでの例では、変数を宣言する時に `my name` というフレーズを `myName` のように書いてきました。
+JavaScript では変数の名前は、複数の単語にわたるフレーズを 2 語目以降の先頭の文字を大文字にして結合するのが一般的です。
 
 :::
 
-## 確認問題
+## 演習問題
 
-`counter` という名前の変数を作成し初期値を `0` としてください。
-その後、`counter` に `1` を加え、その結果を表示してください。
+`counter` という名前の変数を作成し初期値を `0` として、変数 `counter` に代入されている<Term>値</Term>を表示してください。
+その後、変数 `counter` に `1` を足し、変数 `counter` に代入されている<Term>値</Term>を表示してください。
 
 <Answer title="カウンター">
 
 ```javascript
 let counter = 0;
+document.write(counter);
 counter = counter + 1;
 document.write(counter);
 ```
