Merge branch 'master' into combine-http-and-express

Author: kazukinumazato

docs/1-trial-session/01-get-started/index.md

@@ -10,7 +10,7 @@ import openFolderVideo from "./open-folder.mp4";
 
 **Visual Studio Code** (以下 VS Code) は、Microsoft 社が開発するテキストエディタです。多くの開発者に使用されています。
 
-Visual Studio Code は、[公式サイト](https://code.visualstudio.com/Download)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。
+Visual Studio Code は、[公式サイト](https://code.visualstudio.com)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。
 
 <video src={installVscodeVideo} controls />
 

docs/1-trial-session/08-loop/_samples/answer-while/script.js

@@ -1,7 +1,7 @@
 let i = 1;
 let sum = 0;
 while (i <= 10) {
-  sum += i;
-  i += 1;
+  sum = sum + i;
+  i = i + 1;
 }
 document.write(sum);

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

@@ -16,7 +16,7 @@ while 文を用いると、ある条件が満たされている間実行され
 let i = 0;
 while (i < 5) {
   document.write(i);
-  i += 1;
+  i = i + 1;
 }
 document.write("終了");
 ```
@@ -43,7 +43,7 @@ while (条件式) {
 
 1 から 10 までの整数の合計を計算するプログラムを作ってみましょう。
 
-:::tip ヒント
+:::tip
 
 `1` から `10` まで順番に増えていく変数 `i` と、合計値を保存しておく変数 `sum` を用意しましょう。
 
@@ -55,8 +55,8 @@ while (条件式) {
 let i = 1;
 let sum = 0;
 while (i <= 10) {
-  sum += i;
-  i += 1;
+  sum = sum + i;
+  i = i + 1;
 }
 document.write(sum);
 ```
@@ -65,6 +65,46 @@ document.write(sum);
 
 </Answer>
 
+:::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` という意味になります。
+
+複合代入演算子を用いると、
+
+```javascript
+i = i + 1;
+```
+
+は以下のように書き換えることができます。
+
+```javascript
+i += 1;
+```
+
+<!-- 教えるかどうか議論
+[**インクリメント演算子**](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Increment) は、与えられた変数に1を足します。
+一方、[**デクリメント演算子**](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Decrement) は、与えられた変数から1を引きます。
+
+`x++` は `x = x + 1`（＝`x += 1`）、 `y--` は `y = y - 1` （＝`y -= 1`） という意味になります。
+インクリメント演算子を使うと、
+
+```javascript
+i = i + 1;
+```
+
+は以下のように書き換えることができます。
+
+```javascript
+i++;
+```
+
+-->
+
+:::
+
+
 ## for 文
 
 `for` 文は、`while` 文にほんの少しだけ機能を追加したものになります。

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

@@ -51,13 +51,16 @@ greet("morning", "佐藤");
 
 ```javascript
 function add(a, b) {
-  return a + b;
+  const sum = a + b;
+  return sum;
 }
 
 document.write(add(3, 4));
 ```
 
-上の例の 4 行目で、<Term type="javascriptExpression">式</Term> `add(3, 4)` が<Term type="javascriptEvaluation">評価</Term>されると、 `a = 3, b = 4` として `add` <Term type="javascriptFunction">関数</Term>が実行されます。`add`<Term type="javascript">関数</Term>の中で<Term type="javascriptStatement">文</Term> `return a + b;` が実行されると、<Term type="javascriptExpression">式</Term> `a + b` が<Term type="javascriptEvaluation">評価</Term>され、`7` になります。これにより、 `add` <Term type="javascriptFunction">関数</Term>は `7` を<Term type="javascriptReturn">返し</Term>、<Term type="javascriptExpression">式</Term> `add(3, 4)` の<Term type="javascriptEvaluation">評価</Term>結果は `7` となります。
+上の例の 6 行目で、<Term type="javascriptExpression">式</Term> `add(3, 4)` が<Term type="javascriptEvaluation">評価</Term>されると、 `a = 3, b = 4` として `add` <Term type="javascriptFunction">関数</Term>が実行されます。`add`<Term type="javascript">関数</Term>の中で<Term type="javascriptStatement">文</Term> `const sum = a + b;` が実行されると、<Term type="javascriptExpression">式</Term> `a + b` が<Term type="javascriptEvaluation">評価</Term>され、`7` になります。これにより、`sum` に`7`が代入されます。
+次の行 `return sum;` で `add` <Term type="javascriptFunction">関数</Term>は <Term type="javascriptVariable">変数</Term> `sum` を<Term type="javascriptEvaluation">評価</Term>した結果である、`7` を<Term type="javascriptReturn">返します。</Term>
+そして<Term type="javascriptExpression">式</Term> `add(3, 4)` の<Term type="javascriptEvaluation">評価</Term>結果が `7` となります。
 
 <video src={returnValueVideo} controls autoPlay muted loop />
 

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

@@ -50,26 +50,11 @@ let person = {
 
 ドット記号を用いることで、<Term type="javascriptObject">オブジェクト</Term>の<Term type="javascriptProperty">プロパティ</Term>を取得・変更できます。通常の<Term type="javascriptVariable">変数</Term>のように扱えます。
 
-```javascript
-person.age = person.age + 1;
-document.write(person.age);
-```
-
-:::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` という意味になります。
-
-複合代入演算子を用いると、先ほどのプログラムは以下のように書くことができます。
-
 ```javascript
 person.age += 1;
 document.write(person.age);
 ```
 
-:::
-
 ## 課題
 
 <p><Term type="javascriptObject">オブジェクト</Term>も<Term type="javascriptValue">値</Term>の一種なので、<Term type="javascriptFunction">関数</Term>の<Term type="javascriptParameter">引数</Term>や<Term type="javascriptReturnValue">戻り値</Term>として使用できます。</p>

docs/2-browser-apps/04-anonymous-function/index.md

@@ -40,10 +40,11 @@ document.getElementById("strange-button").onclick = () => {
 
 JavaScript における関数式の構文は、次のとおりです。`=>` の記号が特徴的な構文となっています。
 
+<!-- prettier-ignore -->
 ```javascript
 (引数1, 引数2) => {
   処理;
-};
+}
 ```
 
 :::tip 無名関数を用いて関数定義を書き換える

src/components/Term/index.jsx

@@ -22,22 +22,35 @@ export default function Term({ type, strong = false, children }) {
   const location = useLocation();
 
   const wrap = (content) => {
-    // 現在のページで用語が初出であればリンクを表示する必要がない
-    const shouldLinkToReferencePage = Boolean(
-      location.pathname !== term.referencePage &&
-        location.pathname + "/" !== term.referencePage,
-    );
+    const shouldLinkToReferencePage = () => {
+      // referencePageがundefinedならばリンクを表示しない
+      if (term.referencePage === undefined) return false;
+
+      // referencePageTitleがundefinedならばエラーを投げる (明らかに人的ミスのため)
+      if (referencePageTitle === undefined) {
+        throw new Error(
+          `The page title of the reference \n" ${term.referencePage} " \n is not defined in referencePageTitles in "src/components/Term/definition.js"`,
+        );
+      }
+
+      // referencePageの#アンカーを除外
+      const referenceLink = term.referencePage.split("#")[0];
+      // 現在のページで用語が初出であればリンクを表示する必要がない
+      if (location.pathname === referenceLink) return false;
+      if (location.pathname + "/" === referenceLink) return false;
+      return true;
+    };
 
     return (
       <Tippy
         theme="material"
-        interactive={shouldLinkToReferencePage}
+        interactive={shouldLinkToReferencePage()}
         appendTo={window.document.body}
         content={
           <div className={styles.tooltipContent}>
             <header className={styles.tooltipContentHeader}>{term.name}</header>
             <div>{term.definition}</div>
-            {shouldLinkToReferencePage && (
+            {shouldLinkToReferencePage() && (
               <Link className={styles.tooltipLink} to={term.referencePage}>
                 <span>{referencePageTitle} へ</span>
                 <MdArrowForward size="1.2rem" />