Merge pull request #292 from ut-code/develop

`develop` を `master` にマージ

Author: ts5-25

docs/2-browser-apps/02-constant/_samples/object-mutated-by-function/script.js

@@ -1,10 +1,11 @@
 function incrementAge(person) {
   person.age += 1;
+  return person;
 }
 
 const tanaka = { name: "田中", age: 18 };
 const nextYearTanaka = incrementAge(tanaka);
 document.write(nextYearTanaka.age);
-
+document.write(" ");
 // 19 と表示されてしまう
 document.write(tanaka.age);

docs/2-browser-apps/02-constant/index.md

@@ -38,6 +38,8 @@ JavaScript において、それはコードを読んだ際に読みやすいか
 ```javascript
 const person = { name: "田中", age: 18 };
 person.name = "佐藤"; // OK
+// 変数自体への再代入はできない
+// person = { name: "佐藤", age: 20 };
 ```
 
 :::
@@ -101,7 +103,7 @@ function incrementAge(person) {
 const tanaka = { name: "田中", age: 18 };
 const nextYearTanaka = incrementAge(tanaka);
 document.write(nextYearTanaka.age);
-
+document.write(" ");
 // 19 と表示されてしまう
 document.write(tanaka.age);
 ```

docs/2-browser-apps/04-class/index.md

@@ -9,7 +9,7 @@ import Answer from "@site/src/components/Answer";
 
 ## <Term type="javascriptClass">クラス</Term>と<Term type="javascriptInstance">インスタンス</Term>
 
-<Term type="javascriptObject">オブジェクト</Term>を使うと、複数の値をひとまとまりに扱うことができました。実世界においては、同じ<Term type="javascriptProperty">プロパティ</Term>(属性)を持つ<Term type="javascriptObject">オブジェクト</Term>を多く扱う場合が多いです。例えば、学生を<Term type="javascriptObject">オブジェクト</Term>として表すことを考えてみましょう。学生には必ず名前と年齢という属性があるはずなので、ひとまず `name` と `age` を<Term　type="javascriptProperty">プロパティ</Term>に持つとしましょう。
+オブジェクトを使うと、複数の値をひとまとまりに扱うことができました。実世界においては、同じ<Term type="javascriptProperty">プロパティ</Term>(属性)を持つ<Term type="javascriptObject">オブジェクト</Term>を多く扱う場合が多いです。例えば、学生を<Term type="javascriptObject">オブジェクト</Term>として表すことを考えてみましょう。学生には必ず名前と年齢という属性があるはずなので、ひとまず `name` と `age` を<Term　type="javascriptProperty">プロパティ</Term>に持つとしましょう。
 
 ```javascript
 const tanaka = {

docs/2-browser-apps/09-project/_samples/calender/script.js

@@ -7,24 +7,24 @@ const endDate = new Date(year, month + 1, 0);
 const calender = document.getElementById("calender");
 const button = document.getElementById("button");
 
-//編集中の予定を追うための変数
+// 編集中の予定を追うための変数
 let editedLi = null;
 
-//各日付の要素を格納するオブジェクト
+// 各日付の要素を格納するオブジェクト
 const container = {};
 
-//曜日の行を作成
+// 曜日の行を作成
 const firstRow = document.createElement("tr");
 for (let i = 0; i < 7; i += 1) {
   const th = document.createElement("th");
   th.textContent = days[i];
   firstRow.appendChild(th);
 }
 
-//曜日の行を追加
+// 曜日の行を追加
 calender.appendChild(firstRow);
 
-//日付の行を作成
+// 日付の行を作成
 for (let x = 1; x <= 6; x += 1) {
   const tr = document.createElement("tr");
   calender.appendChild(tr);
@@ -51,7 +51,7 @@ for (let i = 1; i <= 42; i += 1) {
   }
 }
 
-//予定を追加する関数
+// 予定を追加する関数
 function addTask(e) {
   const li = document.createElement("li");
   const input = document.createElement("input");
@@ -61,7 +61,7 @@ function addTask(e) {
   editedLi = li;
 }
 
-//予定を固定する関数
+// 予定を固定する関数
 function fixTask(e) {
   if (e.keyCode === 13) {
     const input = editedLi.firstChild;
@@ -78,7 +78,7 @@ function fixTask(e) {
   }
 }
 
-//予定を編集できるようにする関数
+// 予定を編集できるようにする関数
 function editTask(e) {
   editedLi = e.target.parentNode;
   const input = document.createElement("input");
@@ -87,17 +87,17 @@ function editTask(e) {
   editedLi.replaceChild(input, editedLi.firstChild);
 }
 
-//予定を消す関数
+// 予定を消す関数
 function deleteTask() {
   editedLi.remove();
   button.style.visibility = "hidden";
   editedLi = null;
 }
 
-//クリックしたときに実行される関数
+// クリックしたときに実行される関数
 
 function clicked(e) {
-  //予定を編集していないとき
+  // 予定を編集していないとき
 
   if (editedLi === null) {
     if (e.target.class === "task") {
@@ -111,7 +111,7 @@ function clicked(e) {
       addTask(e);
     }
   }
-  //予定を編集中の時
+  // 予定を編集中の時
   else {
     if (e.target.tagName !== "INPUT" && e.target.tagName !== "BUTTON") {
       button.style.visibility = "hidden";

docs/4-advanced/01-fetch-api/index.md

@@ -12,7 +12,7 @@ import chatAppVideo from "./chat-app.mp4";
 
 これまで、ブラウザが<Term type="serverClient">サーバー</Term>に対して<Term type="httpRequestResponse">リクエスト</Term>を送信するのは、リンクがクリックされたときや、フォームが送信されたときなど、ページの再読み込みが起こる場合のみでした。
 
-しかしながら、ブラウザ上で動く JavaScript から利用できる **<Term type="api">FetchAPI</Term >** を用いると、任意のタイミングで<Term type="httpRequestResponse">リクエスト</Term>が発行できるようになります。<Term type="api">API</Term > は、アプリケーションプログラミングインターフェース(Application Programming Interface)の略で、あるソフトウェアの機能や管理するデータを、外部の他のソフトウェアで利用するための手順やデータ形式を定めた規約のことです。多くのソフトウェアが共通して利用する機能がまとめて提供されており、<Term type="api">API</Term > に従い短いコードを記述するだけでその機能を利用することができます。
+しかしながら、ブラウザ上で動く JavaScript から利用できる **Fetch <Term type="api">API</Term >** を用いると、任意のタイミングで<Term type="httpRequestResponse">リクエスト</Term>が発行できるようになります。<Term type="api">API</Term > は、アプリケーションプログラミングインターフェース(Application Programming Interface)の略で、あるソフトウェアの機能や管理するデータを、外部の他のソフトウェアで利用するための手順やデータ形式を定めた規約のことです。多くのソフトウェアが共通して利用する機能がまとめて提供されており、<Term type="api">API</Term > に従い短いコードを記述するだけでその機能を利用することができます。
 <Term type="serverClient">サーバー</Term>と<Term type="serverClient">クライアント</Term>、どちらで動く JavaScript なのかに注意しながら、次のプログラムを実行してみましょう。
 
 ```html title="/static/index.html の body 内"

docs/6-exercise/1-basis-of-web/_samples/blackjack/script.js

@@ -1,14 +1,14 @@
-let numberOfA = 19;
-let numberOfB = 22;
+let tanakaHandTotal = 19;
+let satoHandTotal = 22;
 
 // 21を超えていた場合は0(最弱)として扱う
-if (numberOfA > 21) numberOfA = 0;
-if (numberOfB > 21) numberOfB = 0;
+if (tanakaHandTotal > 21) tanakaHandTotal = 0;
+if (satoHandTotal > 21) satoHandTotal = 0;
 
-if (numberOfA > numberOfB) {
-  document.write("Aさんの勝ち");
-} else if (numberOfA < numberOfB) {
-  document.write("Bさんの勝ち");
+if (tanakaHandTotal > satoHandTotal) {
+  document.write("田中さんの勝ち");
+} else if (tanakaHandTotal < satoHandTotal) {
+  document.write("佐藤さんの勝ち");
 } else {
   document.write("引き分け");
 }

docs/6-exercise/1-basis-of-web/_samples/truck/script.js

@@ -2,11 +2,11 @@ let box = 25;
 let weight = 1000;
 
 if (box <= 30 && weight <= 2000) {
-  document.write("<p style='color: green'>出発できます</p>");
+  document.write('<p style="color: green">出発できます</p>');
 } else if (box > 30 && weight <= 2000) {
-  document.write("<p style='color: red'>箱の数を減らしてください</p>");
+  document.write('<p style="color: red">箱の数を減らしてください</p>');
 } else if (box <= 30 && weight > 2000) {
-  document.write("<p style='color: red'>重量を減らしてください</p>");
+  document.write('<p style="color: red">重量を減らしてください</p>');
 } else {
-  document.write("<p style='color: red'>箱の数と重量を減らしてください</p>");
+  document.write('<p style="color: red">箱の数と重量を減らしてください</p>');
 }

…ise/1-basis-of-web/blue-hello-world.jpeg …cise/1-basis-of-web/blue-hello-world.jpgdocs/6-exercise/1-basis-of-web/blue-hello-world.jpeg renamed to docs/6-exercise/1-basis-of-web/blue-hello-world.jpg docs/6-exercise/1-basis-of-web/blue-hello-world.jpeg renamed to docs/6-exercise/1-basis-of-web/blue-hello-world.jpg

@@ -119,30 +119,30 @@ if (4 <= lengthOfName && lengthOfName <= 10) {
 
 ## 3. ブラックジャック
 
-A さんと B さんの 2 人が、トランプゲームのブラックジャックで遊んでいます。ブラックジャックのルールは以下の通りとします。
+田中さんと佐藤さんの 2 人が、トランプゲームのブラックジャックで遊んでいます。ブラックジャックのルールは以下の通りとします。
 
 - 2 人の手札の数字の合計を比べ、より大きい方が勝ちとなる。
 - ただし、どちらか 1 人の手札の数字の合計が 21 を超えていた場合、その人の負けとなる。
 - 2 人の手札の数字の合計が同じだった場合や、2 人とも 21 を超えていた場合は引き分けとなる。
 
-A さんと B さんの手札の数字の合計をそれぞれ変数に入れておき、A さんと B さんのどちらが勝つか、あるいは引き分けかを表示するプログラムを作成してください。
+田中さんと佐藤さんの手札の数字の合計をそれぞれ変数に入れておき、田中さんと佐藤さんのどちらが勝つか、あるいは引き分けかを表示するプログラムを作成してください。
 
 ### 解答例
 
 <Answer>
 
 ```javascript
-let numberOfA = 19;
-let numberOfB = 22;
+let tanakaHandTotal = 19;
+let satoHandTotal = 22;
 
 // 21を超えていた場合は0(最弱)として扱う
-if (numberOfA > 21) numberOfA = 0;
-if (numberOfB > 21) numberOfB = 0;
+if (tanakaHandTotal > 21) tanakaHandTotal = 0;
+if (satoHandTotal > 21) satoHandTotal = 0;
 
-if (numberOfA > numberOfB) {
-  document.write("Aさんの勝ち");
-} else if (numberOfA < numberOfB) {
-  document.write("Bさんの勝ち");
+if (tanakaHandTotal > satoHandTotal) {
+  document.write("田中さんの勝ち");
+} else if (tanakaHandTotal < satoHandTotal) {
+  document.write("佐藤さんの勝ち");
 } else {
   document.write("引き分け");
 }
@@ -237,13 +237,13 @@ function fibonacci(n) {
 
 ### ヒント
 
-`document.write()` では文字列だけでなく、HTML 要素を出力することができます。
+`document.write()` は文字列だけでなく、HTML 要素を出力することができます。
 
 ```javascript title=script.js
-document.write("<p style='color: blue'>Hello World!</p>");
+document.write('<p style="color: blue">Hello World!</p>');
 ```
 
-![青いHello World](./blue-hello-world.jpeg)
+![青い Hello World](./blue-hello-world.jpg)
 
 ### 解答例
 
@@ -254,13 +254,13 @@ let box = 25;
 let weight = 1000;
 
 if (box <= 30 && weight <= 2000) {
-  document.write("<p style='color: green'>出発できます</p>");
+  document.write('<p style="color: green">出発できます</p>');
 } else if (box > 30 && weight <= 2000) {
-  document.write("<p style='color: red'>箱の数を減らしてください</p>");
+  document.write('<p style="color: red">箱の数を減らしてください</p>');
 } else if (box <= 30 && weight > 2000) {
-  document.write("<p style='color: red'>重量を減らしてください</p>");
+  document.write('<p style="color: red">重量を減らしてください</p>');
 } else {
-  document.write("<p style='color: red'>箱の数と重量を減らしてください</p>");
+  document.write('<p style="color: red">箱の数と重量を減らしてください</p>');
 }
 ```
 

docs/6-exercise/1-basis-of-web/index.md

@@ -283,7 +283,9 @@ ctx.fillRect(10, 10, 100, 100);
 
 ```html
 <button id="button">押してください</button>
-<div id="display"></div>
+<div id="tag-name-display"></div>
+<div id="display-x"></div>
+<div id="display-y"></div>
 ```
 
 ```javascript