Merge pull request #244 from ut-code/develop

本番環境に開発ブランチをマージ

Author: kazukinumazato

.github/workflows/build-test.yml

@@ -3,7 +3,6 @@ name: Build Test
 
 on:
   pull_request:
-    branches: [main, master]
 
 jobs:
   build-test:

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode"]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

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

@@ -1,5 +1,5 @@
 ---
-title: はじめてのWeb開発
+title: はじめての Web 開発
 ---
 
 import installVscodeVideo from "./install-vscode.mp4";
@@ -8,7 +8,7 @@ import openFolderVideo from "./open-folder.mp4";
 
 ## Visual Studio Code のインストール
 
-**Visual Studio Code** (以下 VSCode) は、Microsoft 社が開発するテキストエディタです。多くの開発者に使用されています。
+**Visual Studio Code** (以下 VS Code) は、Microsoft 社が開発するテキストエディタです。多くの開発者に使用されています。
 
 Visual Studio Code は、[公式サイト](https://code.visualstudio.com)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。
 
@@ -24,12 +24,12 @@ Visual Studio Code は、[公式サイト](https://code.visualstudio.com)から
 
 ## Visual Studio Code でプロジェクトフォルダを開く
 
-`File` メニューから `Open Folder...` をクリックして、先ほど作成したフォルダを VSCode で開きます。
+`File` メニューから `Open Folder...` をクリックして、先ほど作成したフォルダを VS Code で開きます。
 
 <video src={openFolderVideo} controls />
 
 :::info
 
-最初にフォルダを開いたとき、`Do you trust the authors of the files in this folder?` と聞かれるのは、インターネットからダウンロードした悪意のあるフォルダを VSCode で開いたとき、VSCode によって勝手に実行されてしまうのを防ぐためです。自分で作成したフォルダの場合は問題ありません。
+最初にフォルダを開いたとき、`Do you trust the authors of the files in this folder?` と聞かれるのは、インターネットからダウンロードした悪意のあるフォルダを VS Code で開いたとき、VS Code によって勝手に実行されてしまうのを防ぐためです。自分で作成したフォルダの場合は問題ありません。
 
 :::

docs/1-trial-session/02-html/index.md

@@ -40,7 +40,7 @@ Web 開発に必ず用いられる言語があります。<Term type="html" stro
 
 :::info 拡張子
 
-VSCode 上で作成したファイルは `index.html` でした。しかしながら、Windows でフォルダの中身を見ると `index` しか表示されません（Mac の場合は正しく表示されます）。なぜでしょうか？
+VS Code 上で作成したファイルは `index.html` でした。しかしながら、Windows でフォルダの中身を見ると `index` しか表示されません（Mac の場合は正しく表示されます）。なぜでしょうか？
 
 ファイル名の `.` (ピリオド) 以降の部分は<Term type="fileExtension" strong>拡張子</Term>と呼ばれ、ファイルの種類を識別するために用いられることが多いです。先ほど `index.html` という名前のファイルを作成したのは、<Term type="html">HTML</Term>ファイルであることを明示するためです。
 

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

@@ -1,5 +1,5 @@
 ---
-title: JavaScriptことはじめ
+title: JavaScript ことはじめ
 ---
 
 import Term from "@site/src/components/Term";

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

@@ -64,3 +64,12 @@ document.write("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"` となるのです。
+
+### 代表的な演算子
+
+| 演算子 | 説明     | 例                                  |
+| ------ | -------- | ----------------------------------- |
+| `+`    | 　足す   | `1 + 1 === 2 ` `"A" + "B" === "AB"` |
+| `-`    | 　引く   | `2 - 1 === 1`                       |
+| `*`    | 　掛ける | `2 * 2 === 4`                       |
+| `/`    | 　割る   | `4 / 2 === 2`                       |

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

@@ -55,6 +55,21 @@ person.age = person.age + 1;
 document.write(person.age);
 ```
 
+:::tip 複合代入演算子
+
+[複合代入演算子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment_operators)は、計算と代入を同時に行うことができる演算子です。
+
+`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/1-trial-session/13-project/_samples/stopwatch/script.js

@@ -7,7 +7,7 @@ function start() {
 let time = 0;
 
 function tick() {
-  time = time + 1;
+  time += 1;
   timer.textContent = time;
 }
 

docs/1-trial-session/13-project/index.md

@@ -105,7 +105,7 @@ startButton.onclick = start;
 let time = 0;
 
 function tick() {
-  time = time + 1;
+  time += 1;
 }
 ```