Rewrite between html and if statement

docs/1-trial-session/03-javascript/index.md

@@ -50,7 +50,7 @@ document.write("Hello World!");
 
 まず、この記述によって、 `script.js` ファイルがブラウザによって読み込まれます。この `script.js` に記述されているのが <Term type="javascript">JavaScript</Term> です。
 
-:::note
+:::info
 
 この講座の中では、`script` <Term type="element">要素</Term>を常に **`body` <Term type="element">要素</Term>の末尾**に記述するようにします。これは、<Term type="javascript">JavaScript</Term> が読み込まれるタイミングで他のすべての <Term type="element">HTML 要素</Term>がすでに表示されていることを保証するためです。
 
@@ -66,6 +66,12 @@ document.write("Hello World2");
 document.write("Hello World3");
 ```
 
+:::tip
+
+改行が表示されず困っていますか？`document.write`は HTML タグを出力できます。`<br>`を用いたり、`p`タグで囲んでみたりしてみましょう。
+
+:::
+
 ## コメント
 
 `//` から行末までの部分や、`/*` から `*/` で囲まれた部分は**コメント**とみなされ、プログラムの実行に影響を与えません。この講座内でもプログラムの意味を説明するのに利用していきます。
@@ -76,9 +82,3 @@ document.write("Hello World"); // この部分もコメントです
 /* この部分も
 やはりコメントです。 */
 ```
-
-:::tip
-
-改行が表示されず困っていますか？`document.write`は HTML タグを出力できます。`<br>`を用いたり、`p`タグで囲んでみたりしてみましょう。
-
-:::

docs/1-trial-session/05-variables/index.md

@@ -9,53 +9,74 @@ import ViewSource from "@site/src/components/ViewSource";
 
 <p><Term type="javascriptVariable">変数</Term>を用いると、<Term type="javascriptValue">値</Term>を一時的に保存し、再利用することができます。数学における変数は通常数値を表すものですが、プログラムにおける<Term type="javascriptVariable">変数</Term>は、<Term type="javascriptString">文字列</Term>等を含め、全ての種類の「<Term type="javascriptValue">値</Term>」を格納することができます。</p>
 
-## <Term type="javascriptVariable">変数</Term>の宣言と使用
+## <Term type="javascriptVariable">変数</Term>の<Term type="javascriptDeclaration">宣言</Term>と使用
 
 <p><Term type="javascriptVariable">変数</Term>を使用するには、まず<Term type="javascriptVariable">変数</Term>を<Term strong type="javascriptDeclaration">宣言</Term>する必要があります。</p>
 
 ```javascript title="script.js"
-let myGreatName;
-myGreatName = "Becky Jones";
+let myGreatName = "Becky Jones";
 document.write(myGreatName);
 ```
 
-1 行目の `let myGreatName;` で、`myGreatName` という名前の<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>しています。`let` は、<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>するためのキーワードです。
+`let` は、<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>するためのキーワードです。1 行目では、`myGreatName` という名前の<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>し、そこに文字列 `"Becky Jones"` を<Term strong type="javascriptAssignment">代入</Term>しています。`=` は<Term type="javascriptAssignment">代入</Term>を表し、左側に指定した<Term type="javascriptVariable">変数</Term>に対し、右側に指定された<Term type="javascriptValue">値</Term>を<Term type="javascriptAssignment">代入</Term>します。
+
+2 行目では、<Term type="javascriptVariable">変数</Term> `myGreatName` が<Term type="javascriptEvaluation">評価</Term>され、<Term type="javascriptAssignment">代入</Term>されていた<Term type="javascriptString">文字列</Term><Term type="javascriptValue">値</Term> `"Becky Jones"` が画面に表示されます。
 
-続いて 2 行目では、<Term type="javascriptVariable">変数</Term> `myGreatName` に文字列 `"Becky Jones"` を<Term strong type="javascriptAssignment">代入</Term>しています。`=` は<Term type="javascriptAssignment">代入</Term>を表し、左側に指定した<Term type="javascriptVariable">変数</Term>に対し、右側に指定された<Term type="javascriptValue">値</Term>を<Term type="javascriptAssignment">代入</Term>します。
+<p><Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>するキーワードには、<code>let</code> 以外にも <code>const</code> があります。記法自体は<code>let</code> と同様ですが、少し違いがあります。違いについては、次の節で説明します。</p>
 
-3 行目では、<Term type="javascriptVariable">変数</Term> `myGreatName` が<Term type="javascriptEvaluation">評価</Term>され、<Term type="javascriptAssignment">代入</Term>されていた<Term type="javascriptString">文字列</Term><Term type="javascriptValue">値</Term> `"Becky Jones"` が画面に表示されます。
+```javascript title="script.js"
+const myGreatName = "Becky Jones";
+document.write(myGreatName);
+```
 
-上の例では、`my great name` というフレーズを、`myGreatName` のように記述しています。
+ここまでの例では、`my great name` というフレーズを、`myGreatName` のように記述しています。
 
 このように、複数の単語にわたるフレーズを、2 語目以降の先頭の文字を大文字にして結合する命名規則を、<Term strong type="camelCase">キャメルケース</Term>と呼びます。
 
-:::note
+:::info
 
 <p><Term type="javascript">JavaScript</Term> の<Term type="javascriptVariable">変数</Term>名には、通常<Term type="camelCase">キャメルケース</Term>が用いられます。<Term type="snakeCase">スネークケース</Term>や<Term type="pascalCase">パスカルケース</Term>などの命名規則が利用される文法もあります。</p>
 
 :::
 
-<p><Term type="javascriptVariable">変数</Term>の<Term type="javascriptDeclaration">宣言</Term>と同時に初回の<Term type="javascriptAssignment">代入</Term>を行うこともできます。</p>
+:::tip
 
-```javascript title="script.js"
-let myGreatName = "Becky Jones";
-document.write(myGreatName);
+<Term type="javascriptVariable">変数</Term>に適切な命名をすることは非常に重要です。以下の例を見てみましょう。
+
+```javascript
+const a = 500;
+const b = 3;
+const c = a * b;
+document.write(c);
+```
+
+```javascript
+const itemPrice = 500;
+const itemCount = 3;
+const totalPrice = itemPrice * itemCount;
+document.write(totalPrice);
 ```
 
-## <Term type="javascriptVariable">変数</Term>の性質
+前者と後者のコードは、同じ計算を行っています。しかし、前者のコードでは `a` や `b`、`c` という変数名が何を表しているのかがわかりません。一方、後者のコードでは、`itemPrice` や `itemCount`、`totalPrice` という変数名から、どのような計算を行っているのかがすぐに分かります。共同で開発を行うときや、後からコードを読み返すときに、変数名が適切に付けられていると、コードの理解が容易になります。
 
-<p><Term type="javascriptVariable">変数</Term>には、最後に<Term type="javascriptAssignment">代入</Term>された<Term type="javascriptValue">値</Term>のみを保持する性質があります。</p>
+:::
+
+## <Term type="javascriptVariable">変数</Term>への再<Term type="javascriptAssignment">代入</Term>
+
+`let` と `const` の大きな違いは、再<Term type="javascriptAssignment">代入</Term>が可能かどうかです。`let` で<Term type="javascriptDeclaration">宣言</Term>された<Term type="javascriptVariable">変数</Term>には再<Term type="javascriptAssignment">代入</Term>が可能ですが、`const` で<Term type="javascriptDeclaration">宣言</Term>された<Term type="javascriptVariable">変数</Term>にはできません。次の例を見てみましょう。
 
 ```javascript title="script.js"
 let mysteriousNumber = 0;
 mysteriousNumber = 1;
 mysteriousNumber = 2;
-document.write(mysteriousNumber);
+document.write(mysteriousNumber); // 2
 ```
 
-変数 `mysteriousNumber` は 3 回<Term type="javascriptAssignment">代入</Term>されていますが、最後に<Term type="javascriptAssignment">代入</Term>された `2` が表示されます。
+<p><Term type="javascriptVariable">変数</Term>には、最後に<Term type="javascriptAssignment">代入</Term>された<Term type="javascriptValue">値</Term>のみを保持する性質があります。そのため、<Term type="javascriptVariable">変数</Term> <code>mysteriousNumber</code> は 3 回<Term type="javascriptAssignment">代入</Term>が行われていますが、最後に<Term type="javascriptAssignment">代入</Term>された <code> 2</code> が表示されます。</p>
+
+一方、`const` で<Term type="javascriptDeclaration">宣言</Term>された<Term type="javascriptVariable">変数</Term>には、再<Term type="javascriptAssignment">代入</Term>ができません。そのため、上記のコードの `let` を `const` に置き換えることはできません。
 
-それでは、以下の場合はどうでしょうか。
+さらに、再<Term type="javascriptAssignment">代入</Term>について詳しく見てみましょう。それでは、以下の場合はどうでしょうか。
 
 ```javascript title="script.js"
 let price = 100;

docs/1-trial-session/07-if-statement/index.md

@@ -4,6 +4,7 @@ title: 条件分岐
 
 import Term from "@site/src/components/Term";
 import ViewSource from "@site/src/components/ViewSource";
+import Answer from "@site/src/components/Answer";
 
 ## if 構文
 
@@ -87,4 +88,23 @@ let age = 20;
 - 18 歳以上 ～ 25 歳未満なら `投票に行けます` と表示する
 - 25 歳以上なら `衆議院議員に立候補できます` と表示する
 
+<Answer>
+
+if ～ else if ～ else 構文を使うと、次のように書くことができます。
+
+```javascript title=script.js showLineNumbers
+let age = 20;
+if (age < 18) {
+  document.write("選挙権はありません");
+} else if (age < 25) {
+  document.write("投票に行けます");
+} else {
+  document.write("衆議院議員に立候補できます");
+}
+```
+
 <ViewSource url={import.meta.url} path="_samples/the-right-to-vote" />
+
+4 行目の式は `age >= 18 && age < 25` ではないかと思うかもしれませんが、上のように `age < 25` としても同じ結果になります。これは、if ～ else if ～ else 構文では、一つ目の条件が満たされた場合、二つ目の条件は実行されないためです。
+
+</Answer>