Merge pull request #354 from ut-code/develop

Merge into `master` from `develop`

Author: chvmvd

…rm/_samples/book-search-system/server.js …form/_samples/book-search-system/main.jsdocs/3-web-servers/06-form/_samples/book-search-system/server.js renamed to docs/3-web-servers/06-form/_samples/book-search-system/main.js docs/3-web-servers/06-form/_samples/book-search-system/server.js renamed to docs/3-web-servers/06-form/_samples/book-search-system/main.js

@@ -2,10 +2,10 @@
   "name": "book-search-system",
   "version": "1.0.0",
   "description": "",
-  "main": "server.js",
+  "main": "main.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node server.js"
+    "start": "node main.js"
   },
   "author": "",
   "license": "ISC",

docs/3-web-servers/06-form/_samples/book-search-system/package.json

@@ -2,10 +2,10 @@
   "name": "bulletin-board",
   "version": "1.0.0",
   "description": "",
-  "main": "server.js",
+  "main": "main.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node server.js"
+    "start": "node main.js"
   },
   "author": "",
   "license": "ISC",

…t-post/_samples/bulletin-board/server.js …get-post/_samples/bulletin-board/main.jsdocs/3-web-servers/07-get-post/_samples/bulletin-board/server.js renamed to docs/3-web-servers/07-get-post/_samples/bulletin-board/main.js docs/3-web-servers/07-get-post/_samples/bulletin-board/server.js renamed to docs/3-web-servers/07-get-post/_samples/bulletin-board/main.js

@@ -76,7 +76,7 @@ $ git config --global user.email メールアドレス
 
 <video src={setupGitVideo} controls muted />
 
-現在 WSL 上の Ubuntu の Git では、デフォルトブランチの名前が `master` ですが、macOS では `main` になっています。また、GitHub ではデフォルトブランチの名前が `main` になっています。これらを統一するために、次のコマンドを実行してください。
+現在 WSL 上の Ubuntu の Git では、デフォルトブランチというものが `master` に設定されていますが、macOS では `main` になっています。また、GitHub ではデフォルトブランチが `main` になっています。これらを統一するために、次のコマンドを実行してください。
 
 ```shell
 git config --global init.defaultBranch main
@@ -111,8 +111,7 @@ $ ssh-keygen -t ed25519
 デフォルトでは公開鍵が `~/.ssh/id_ed25519.pub`、秘密鍵が `~/.ssh/id_ed25519` に格納されます。公開鍵のファイルを `cat` コマンドを用いて出力しましょう。
 
 ```shell
-$ cd ~/.ssh
-$ cat id_ed25519.pub
+$ cat ~/.ssh/id_ed25519.pub
 ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIGz9wBSTWY0W4yJXPGQ/XsaffDTdvGOKg3mtR9pP3D6i [ユーザー名]@[コンピューター名]
 ```
 
@@ -146,13 +145,16 @@ ssh-ed25519 AAAAC3...P3D6i user@computer
 
 VS Code 標準の機能だけでも多くのことができますが、より便利に利用するために拡張機能を併用していきます。次の拡張機能をインストールしておきましょう。
 
-- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
-  コミットの差分などが見やすくなり便利
-  ![GitLens](./gitLens.png)
+### [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
 
-- [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
-  コマンドパレット(`Cmd / Ctrl + Shift + P`)に `Git Graph: View Git Graph (git log)` というメニューが出て見やすい
+コミットの差分などが見やすくなり便利
 
-  ![GitGragh](./gitGraph.png)
+![GitLens](./gitLens.png)
 
-  ![GitGragh拡張機能の様子](./gitGraph-view.png)
+### [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
+
+コマンドパレット(`Cmd / Ctrl + Shift + P`)に `Git Graph: View Git Graph (git log)` というメニューが出て見やすい
+
+![GitGragh](./gitGraph.png)
+
+![GitGragh拡張機能の様子](./gitGraph-view.png)

docs/3-web-servers/07-get-post/_samples/bulletin-board/package.json

@@ -8,20 +8,22 @@ import createNewBranchWithCliVideo from "./create-new-branch-with-cli.mp4";
 import pushNewBranchVideo from "./push-new-branch.mp4";
 import pushNewBranchWithCliVideo from "./push-new-branch-with-cli.mp4";
 import prPracticeVideo from "./pr-practice.mp4";
+import pullBranchVideo from "./pull-branch.mp4";
+import pullBranchWithCliVideo from "./pull-branch-with-cli.mp4";
 
 ## GitHub を用いた共同開発をする
 
 GitHub を用いると簡単に共同開発ができます。[練習用のリポジトリ](https://github.com/ut-code/readme_practice)を用意してあるのでここに変更を加えてみましょう。変更を加えるのにはリポジトリの編集権限が必要なので、事前に権限をもらっておきましょう。
 
-まずは、共同開発をするリポジトリをローカルにクローンします。クローンするとは、リモートリポジトリを自分の PC 上にコピーすることです。[練習用のリポジトリ](https://github.com/ut-code/readme_practice)の **SSH** の URL をコピーして、次のコマンドを実行してください。その後、クローンしたリポジトリを VS Code で開いてください。
+まずは、共同開発をするリポジトリをローカルにクローンします。クローンするとは、リモートリポジトリを自分の PC 上に複製することです。[練習用のリポジトリ](https://github.com/ut-code/readme_practice)の **SSH** の URL をコピーして、次のコマンドを実行してください。その後、クローンしたリポジトリを VS Code で開いてください。
 
 ```shell
 git clone [email protected]:ut-code/readme_practice.git
 ```
 
 <video src={cloneRepositoryVideo} muted autoPlay loop controls />
 
-複数のメンバーが並行して変更を加えていくために、Git にはブランチという仕組みが備わっています。まず変更を加えたい時には、メインのブランチから自分の作業専用のブランチを作成します。そして、作業が終わったらメインのブランチに自分のブランチの変更を取り込みます。これによって、プロジェクトの本体に影響を与えずに同時並行で開発を進めることが出来ます。
+複数のメンバーが並行して変更を加えていくために、Git にはブランチという仕組みが備わっています。まず変更を加えたい時には、メインのブランチから自分の作業専用のブランチを作成します。
 
 ```mermaid
 gitGraph
@@ -35,6 +37,22 @@ gitGraph
   commit id: "Add contact.html"
 ```
 
+そして、作業が終わったらメインのブランチに自分のブランチの変更を取り込みます。これによって、プロジェクトの本体に影響を与えずに同時並行で開発を進めることが出来ます。
+
+```mermaid
+gitGraph
+  commit id: "Add index.html"
+  commit id: "Add service.html"
+  commit id: "Add company.html"
+  branch add-recruit-page
+  commit id: "Add recruit.html"
+  checkout main
+  branch add-contact-page
+  commit id: "Add contact.html"
+  checkout main
+  merge add-recruit-page
+```
+
 まずは、メインのブランチから自分の作業専用のブランチを作成しましょう。
 左下の `main` というボタンをクリックして、`Create new branch from...` を選択します。次に、分岐元のブランチを選択します。今回は `main` を選択します。最後に、新しいブランチの名前を入力します。新しいブランチ名には、変更の内容を端的に表す名前をつけてください。今回は `hello-自分のアカウント名` という名前にしてみましょう。左下の表示が新しいブランチ名に変わったことを確認してください。
 
@@ -71,7 +89,7 @@ $ git branch
 
 :::
 
-この状態で、ファイルに必要な変更を行います。練習用のリポジトリに自分だけの新しいファイルを作ってみましょう。`自分のアカウント名.txt` とします。ファイルの中身は何でも構いません。変更ができたらその都度、変更をステージし、コミットします。必要に応じて、コミットの履歴やコミットの差分を確認してください。
+この状態で、ファイルに必要な変更を行います。練習用のリポジトリに自分だけの新しいファイルを作ってみましょう。今回は、`自分のアカウント名.txt` というファイルを作ってみましょう。ファイルの中身は何でも構いません。変更ができたらその都度、変更をステージし、コミットします。必要に応じて、コミットの履歴やコミットの差分を確認してください。
 
 変更が終わったら、変更をリモートにも反映します。新しく作ったブランチをリモートリポジトリにプッシュします。
 
@@ -131,10 +149,28 @@ GitHub を開き `Pull requests` を開いてください。
 
 ![Merge pull request](./merge-pull-request.png)
 
-変更が良さそうだったら、`Merge pull request` を押してください。これで、変更を反映できます。
+メインのブランチと自分の加えた変更の差分は、`Files changed` タブから確認できます。変更が良さそうだったら、`Merge pull request` を押してください。これで、変更を反映できます。
 
 ![Delete branch](./delete-branch.png)
 
 マージしたら、不要になったブランチは削除しておきましょう。
 
 <video src={prPracticeVideo} muted controls />
+
+この後、また変更を加える場合は、他の人が変更を加えている可能性があるので、まずは `main` ブランチに戻って、プルをすることでリモートの変更を取り込みます。その後は、今までと同様に新しいブランチを作成して進めて言ってください。
+
+リモートの変更をプルするには、`Source Control` パネルから `Pull` を押してリモートの変更を取り込みます。
+
+<video src={pullBranchVideo} muted controls />
+
+:::info
+
+コマンドラインからプルするには、次のコマンドを実行します。
+
+```shell
+git pull
+```
+
+<video src={pullBranchWithCliVideo} muted controls />
+
+:::

docs/3-web-servers/10-git-github-init/index.md

@@ -29,7 +29,7 @@ document.getElementById("fetch-button").onclick = async () => {
 
 <ViewSource url={import.meta.url} path="_samples/fetch-api" />
 
-`async () => {}` は、<Term type="asynchronousProcess">非同期関数</Term>、つまり<Term type="asynchronousProcess">async キーワードのついた関数</Term>を生成するための<Term type="arrowFunction">アロー関数式</Term>です。
+`async () => {}` は、<Term type="asynchronousProcess">非同期関数</Term>、つまり <Term type="asynchronousProcess">`async` キーワードのついた関数</Term>を生成するための<Term type="arrowFunction">アロー関数式</Term>です。
 
 [`fetch` 関数](https://developer.mozilla.org/ja/docs/Web/API/fetch)は、<Term type="httpRequestResponse">リクエスト</Term>を発行するための関数です。標準では<Term type="httpMethod">GET リクエスト</Term>が発行されます。この関数の戻り値に <Term type="asynchronousProcess">`await 演算子`</Term>を適用すると、発行した<Term type="httpRequestResponse">リクエスト</Term>に対する [`Response` クラス](https://developer.mozilla.org/ja/docs/Web/API/Response)のインスタンスが得られます。`fetch` 関数を利用することで、ページの再読み込みを伴わず、関数が実行されるタイミングで<Term type="httpRequestResponse">リクエスト</Term>を発行することができます。