Merge pull request #268 from ut-code/develop

`develop` を `master` にマージ

Author: chvmvd

docs/1-trial-session/04-expressions/index.md

@@ -6,7 +6,7 @@ import Term from "@site/src/components/Term";
 
 ## <Term type="javascriptValue">値</Term>
 
-次のコードを実行すると、`Hello World`が画面に表示されました。
+次のコードを実行すると、`Hello World` が画面に表示されました。
 
 ```javascript title="script.js"
 document.write("Hello World");
@@ -36,7 +36,7 @@ document.write(3 + 4);
 document.write(3 + 4 * 5);
 ```
 
-`*`（乗算<Term type="javascriptOperator">演算子</Term>）は`+`より<Term type="javascriptOperatorPriority">優先順位</Term>が高く設定されているため、上記のコードの実行結果は`23`となります。
+`*`（乗算<Term type="javascriptOperator">演算子</Term>）は `+` より<Term type="javascriptOperatorPriority">優先順位</Term>が高く設定されているため、上記のコードの実行結果は `23` となります。
 
 このコードにおいて、`3 + 4 * 5` や、`4 * 5`、`4` を<Term strong type="javascriptExpression">式</Term>と呼びます。また、<Term type="javascriptExpression">式</Term>が計算され、その結果としての<Term type="javascriptValue">値</Term>が確定することを式が<Term strong type="javascriptEvaluation">評価</Term>されるといいます。
 
@@ -61,15 +61,15 @@ document.write("Hello" + 1 + 2);
 
 このような場合、<Term type="javascriptOperator">演算子</Term>の**結合規則**を考える必要があります。
 
-`+` の結合規則は左から右なので、`3 + 4 + "Hello"` は `(3 + 4) + "Hello"` 、`"Hello" + 1 + 2` は`("Hello" + 1) + 2`と解釈されることになります。
+`+` の結合規則は左から右なので、`3 + 4 + "Hello"` は `(3 + 4) + "Hello"`、`"Hello" + 1 + 2` は`("Hello" + 1) + 2`と解釈されることになります。
 
-`+`は、両辺が<Term type="javascriptNumber">数値</Term>の場合のみ加算<Term type="javascriptOperator">演算子</Term>として振る舞い、片方が<Term type="javascriptNumber">数値</Term>で片方が<Term type="javascriptString">文字列</Term>の場合は<Term type="javascriptNumber">数値</Term>を<Term type="javascriptString">文字列</Term>に変換してから<Term type="javascriptString">文字列</Term>結合<Term type="javascriptOperator">演算子</Term>として機能します。このため、最終的な<Term type="javascriptExpression">式</Term>全体の<Term type="javascriptEvaluation">評価</Term>結果は前者が `"7Hello"` 、後者が `"Hello12"` となるのです。
+`+` は、両辺が<Term type="javascriptNumber">数値</Term>の場合のみ加算<Term type="javascriptOperator">演算子</Term>として振る舞い、片方が<Term type="javascriptNumber">数値</Term>で片方が<Term type="javascriptString">文字列</Term>の場合は<Term type="javascriptNumber">数値</Term>を<Term type="javascriptString">文字列</Term>に変換してから<Term type="javascriptString">文字列</Term>結合<Term type="javascriptOperator">演算子</Term>として機能します。このため、最終的な<Term type="javascriptExpression">式</Term>全体の<Term type="javascriptEvaluation">評価</Term>結果は前者が `"7Hello"` 、後者が `"Hello12"` となるのです。
 
 ### 代表的な演算子
 
-| 演算子 | 説明     | 例                                  |
-| ------ | -------- | ----------------------------------- |
-| `+`    | 　足す   | `1 + 1 === 2 ` `"A" + "B" === "AB"` |
-| `-`    | 　引く   | `2 - 1 === 1`                       |
-| `*`    | 　掛ける | `2 * 2 === 4`                       |
-| `/`    | 　割る   | `4 / 2 === 2`                       |
+| 演算子 | 意味     | 例                                    |
+| ------ | -------- | ------------------------------------- |
+| `+`    | 　足す   | `1 + 1` は `2`、`"A" + "B"` は `"AB"` |
+| `-`    | 　引く   | `2 - 1` は `1`                        |
+| `*`    | 　掛ける | `2 * 2` は `4`                        |
+| `/`    | 　割る   | `4 / 2` は `2`                        |

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

@@ -7,7 +7,7 @@ import ViewSource from "@site/src/components/ViewSource";
 
 ## if 構文
 
-**if 構文**は、<Term type="javascript">JavaScript</Term>の<Term strong type="javascriptControlFlow">制御構造</Term>で、特定の条件下のみで実行されるプログラムを記述することができます。
+**if 構文**は、<Term type="javascript">JavaScript</Term> の<Term strong type="javascriptControlFlow">制御構造</Term>で、特定の条件下のみで実行されるプログラムを記述することができます。
 
 ## 基本構造
 
@@ -18,7 +18,7 @@ if (age < 20) {
 }
 ```
 
-このプログラムは、 `未成年者の場合は法定代理人の同意が必要です。` と表示しますが、1 行目を `let age = 20;` に変更すると何も表示されなくなります。
+このプログラムは、`未成年者の場合は法定代理人の同意が必要です。` と表示しますが、1 行目を `let age = 20;` に変更すると何も表示されなくなります。
 
 2 行目の `if (age < 20) {` 部分がポイントです。ここに差し掛かると、括弧内の<Term type="javascriptExpression">式</Term> `age < 20` が<Term type="javascriptEvaluation">評価</Term>され、`true` になります。このため、直後の波括弧内の処理が実行されます。
 

docs/1-trial-session/08-functions/index.md

@@ -21,7 +21,7 @@ greet();
 greet();
 ```
 
-上のプログラムにおいて、`function`キーワードから始まる部分は<Term type="javascriptFunction">関数</Term>を定義するための<Term type="javascriptControlFlow">制御構文</Term>です。<Term type="javascriptFunction">関数</Term>定義では、 `function` キーワードに続けて<Term type="javascriptFunction">関数</Term>名、かっこを記述します。この後、<Term type="javascriptFunction">関数</Term>内で実行したい処理を波かっこの中に記述していきます。
+上のプログラムにおいて、`function` キーワードから始まる部分は<Term type="javascriptFunction">関数</Term>を定義するための<Term type="javascriptControlFlow">制御構文</Term>です。<Term type="javascriptFunction">関数</Term>定義では、 `function` キーワードに続けて<Term type="javascriptFunction">関数</Term>名、かっこを記述します。この後、<Term type="javascriptFunction">関数</Term>内で実行したい処理を波かっこの中に記述していきます。
 
 <p><Term type="javascriptFunction">関数</Term>を定義すると、<Term type="javascriptFunction">関数</Term>名に続けてかっこを記述することにより、その<Term type="javascriptFunction">関数</Term>を実行できるようになります。</p>
 

docs/1-trial-session/10-object/index.md

@@ -17,7 +17,7 @@ JavaScript で扱うことのできる<Term type="javascriptValue">値</Term>の
 
 :::tip ほかの言語の経験者へ
 
-JavaScript の<Term type="javascriptObject">オブジェクト</Term>は、ほかの言語でいう**辞書**や**連想配列**、**Map**に近いものです。ただ、こういったものと比べ、JavaScript の<Term type="javascriptObject">オブジェクト</Term>は使用頻度が非常に高いです。
+JavaScript の<Term type="javascriptObject">オブジェクト</Term>は、ほかの言語でいう**辞書**や**連想配列**、**Map** に近いものです。ただ、こういったものと比べ、JavaScript の<Term type="javascriptObject">オブジェクト</Term>は使用頻度が非常に高いです。
 
 :::
 
@@ -57,7 +57,7 @@ document.write(person.age);
 
 :::tip 複合代入演算子
 
-[複合代入演算子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment_operators)は、計算と代入を同時に行うことができる演算子です。
+[複合代入演算子](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` という意味になります。
 

docs/1-trial-session/11-dom/index.md

@@ -26,7 +26,7 @@ element.textContent = "Hello DOM";
 
 ![DOM](./dom.png)
 
-`document.getElementById` が<Term type="javascriptReturn">返す</Term><Term type="javascriptObject">オブジェクト</Term>には、取得した HTML<Term type="element">要素</Term>の特徴を表す、たくさんの<Term type="javascriptProperty">プロパティ</Term>が含まれています。下はその一部分です。
+`document.getElementById` が<Term type="javascriptReturn">返す</Term><Term type="javascriptObject">オブジェクト</Term>には、取得した HTML <Term type="element">要素</Term>の特徴を表す、たくさんの<Term type="javascriptProperty">プロパティ</Term>が含まれています。下はその一部分です。
 
 | プロパティ    | 説明                                                 |
 | ------------- | ---------------------------------------------------- |

docs/1-trial-session/12-events/index.md

@@ -24,7 +24,7 @@ func();
 ## <Term type="eventHandler">イベントハンドラ</Term>
 
 <p><Term type="javascriptObject">オブジェクト</Term>の<Term type="javascriptProperty">プロパティ</Term>として<Term type="javascriptFunction">関数</Term>を利用することもできます。 <code>document.getElementById</code> が返す<Term type="javascriptObject">オブジェクト</Term>の <code>onclick</code> <Term type="javascriptProperty">プロパティ</Term>には、<Term type="element">要素</Term>がクリックされたときに実行される<Term type="javascriptFunction">関数</Term>を指定できます。</p>
-ボタンのクリック、フォームへの入力、ページの読み込みなど、Webページ上で発生するあらゆるアクションを総称して<Term type="events">イベント</Term>と呼びます。このような<Term type="events">イベント</Term>の処理を行うのが<Term type="eventHandler">イベントハンドラ</Term>で、<code>onclick</code> 関数はその一例です。
+ボタンのクリック、フォームへの入力、ページの読み込みなど、Web ページ上で発生するあらゆるアクションを総称して<Term type="events">イベント</Term>と呼びます。このような<Term type="events">イベント</Term>の処理を行うのが<Term type="eventHandler">イベントハンドラ</Term>で、<code>onclick</code> 関数はその一例です。
 
 ```html title="index.html"
 <button id="greet-button" type="button">クリック</button>

docs/6-exercise/4-css/index.md

@@ -450,7 +450,7 @@ h3 {
 
 ### 問題 1
 
-水色の部分(ヘッダー)が、スクロールしても同じ位置にとどまるようにしてみましょう。
+「スタイルシート大学 文化祭」と書かれた灰色の部分(ヘッダー)が、スクロールしても同じ位置にとどまるようにしてみましょう。
 
 <video src={headerScrollVideo} controls />
 

docs/6-exercise/9-fetch-api/_samples/restaurants/server.js

@@ -22,7 +22,7 @@ app.post("/register", (request, response) => {
 
 app.post("/rate", (request, response) => {
   const index = request.body.index;
-  restaurants[index].totalRating += Number(request.body.points); // 文字列を数値に変換
+  restaurants[index].totalRating += Number(request.body.rating); // 文字列を数値に変換
   restaurants[index].numRatings += 1;
 
   if (restaurants[index].numRatings !== 0) {

docs/6-exercise/9-fetch-api/_samples/restaurants/static/index.html

@@ -16,7 +16,7 @@
         <th>お店を評価</th>
         <td>
           <select id="name-select"></select>
-          <select id="points-select">
+          <select id="rating-select">
             <option value="5">☆5</option>
             <option value="4">☆4</option>
             <option value="3">☆3</option>

docs/6-exercise/9-fetch-api/_samples/restaurants/static/script.js

@@ -1,13 +1,13 @@
 const restaurantList = document.getElementById("restaurant-list");
 const nameInput = document.getElementById("name-input");
 const nameSelect = document.getElementById("name-select");
-const pointsSelect = document.getElementById("points-select");
+const ratingSelect = document.getElementById("rating-select");
 
 setInterval(async () => {
-  // nameSelect にも pointsSelect にもフォーカスが当たっていない際にのみ、要素を再生成する
+  // nameSelect にも ratingSelect にもフォーカスが当たっていない際にのみ、要素を再生成する
   if (
     document.activeElement !== nameSelect &&
-    document.activeElement !== pointsSelect
+    document.activeElement !== ratingSelect
   ) {
     const response = await fetch("/restaurants");
     const restaurants = await response.json();
@@ -45,10 +45,10 @@ document.getElementById("register-button").onclick = async () => {
 
 document.getElementById("rate-button").onclick = async () => {
   const index = nameSelect.value;
-  const points = pointsSelect.value;
+  const rating = ratingSelect.value;
   await fetch("/rate", {
     method: "post",
     headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ index: index, points: points }),
+    body: JSON.stringify({ index: index, rating: rating }),
   });
 };