macOS中心の説明からWindows中心の説明に変更 (#884)

Author: chvmvd

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

@@ -2,14 +2,14 @@
 title: はじめてのWeb開発
 ---
 
-import installChromeOnMacVideo from "./install-chrome-on-mac.mp4";
 import installChromeOnWindowsVideo from "./install-chrome-on-windows.mp4";
-import installVscodeOnMacVideo from "./install-vscode-on-mac.mp4";
+import installChromeOnMacVideo from "./install-chrome-on-mac.mp4";
 import installVscodeOnWindowsVideo from "./install-vscode-on-windows.mp4";
-import createFolderOnMacVideo from "./create-folder-on-mac.mp4";
+import installVscodeOnMacVideo from "./install-vscode-on-mac.mp4";
 import createFolderOnWindowsVideo from "./create-folder-on-windows.mp4";
-import openFolderOnMacVideo from "./open-folder-on-mac.mp4";
+import createFolderOnMacVideo from "./create-folder-on-mac.mp4";
 import openFolderOnWindowsVideo from "./open-folder-on-windows.mp4";
+import openFolderOnMacVideo from "./open-folder-on-mac.mp4";
 
 ## Google Chromeのインストール
 
@@ -18,12 +18,12 @@ import openFolderOnWindowsVideo from "./open-folder-on-windows.mp4";
 Google Chromeは、[公式サイト](https://www.google.com/intl/ja_jp/chrome/)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。
 
 <Tabs groupId="os">
-  <TabItem value="mac" label="macOS">
-    <video src={installChromeOnMacVideo} controls />
-  </TabItem>
   <TabItem value="win" label="Windows">
     <video src={installChromeOnWindowsVideo} controls />
   </TabItem>
+  <TabItem value="mac" label="macOS">
+    <video src={installChromeOnMacVideo} controls />
+  </TabItem>
 </Tabs>
 
 ## Visual Studio Codeのインストール
@@ -33,32 +33,32 @@ Google Chromeは、[公式サイト](https://www.google.com/intl/ja_jp/chrome/)
 Visual Studio Codeは、[公式サイト](https://code.visualstudio.com)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。
 
 <Tabs groupId="os">
-  <TabItem value="mac" label="macOS">
-    <video src={installVscodeOnMacVideo} controls />
-  </TabItem>
   <TabItem value="win" label="Windows">
     <video src={installVscodeOnWindowsVideo} controls />
   </TabItem>
+  <TabItem value="mac" label="macOS">
+    <video src={installVscodeOnMacVideo} controls />
+  </TabItem>
 </Tabs>
 
 ## プロジェクトを格納するフォルダを作成する
 
-これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ホームフォルダ (macOS) /ユーザーフォルダ (Windows) の中に`projects`という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。ホームフォルダ (macOS) /ユーザーフォルダ (Windows) の場所については次の動画をご確認ください。
+これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ユーザーフォルダ (Windows) /ホームフォルダ (macOS) の中に`projects`という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。ユーザーフォルダ (Windows) /ホームフォルダ (macOS) の場所については次の動画をご確認ください。
 
 次の例では、`hello-world`の名前でプロジェクト用のフォルダを作成しています。
 
 <Tabs groupId="os">
-  <TabItem value="mac" label="macOS">
-    <video src={createFolderOnMacVideo} controls />
-  </TabItem>
   <TabItem value="win" label="Windows">
     <video src={createFolderOnWindowsVideo} controls />
   </TabItem>
+  <TabItem value="mac" label="macOS">
+    <video src={createFolderOnMacVideo} controls />
+  </TabItem>
 </Tabs>
 
 :::info
 
-これから作成するプログラムは、さきほど作成したホームフォルダ (macOS) /ユーザーフォルダ (Windows) の中の`projects`フォルダの中に保存するようにしてください。これは、ドキュメントフォルダなどのフォルダはクラウドストレージサービスによって自動的に同期されることがあり、Visual Studio Codeなどの開発ツールが期待通りに動作しなくなってしまうことがあるからです。
+これから作成するプログラムは、さきほど作成したユーザーフォルダ (Windows) /ホームフォルダ (macOS) の中の`projects`フォルダの中に保存するようにしてください。これは、ドキュメントフォルダなどのフォルダはクラウドストレージサービスによって自動的に同期されることがあり、Visual Studio Codeなどの開発ツールが期待通りに動作しなくなってしまうことがあるからです。
 
 :::
 
@@ -67,12 +67,12 @@ Visual Studio Codeは、[公式サイト](https://code.visualstudio.com)から
 `File`メニューから`Open Folder...`をクリックして、先ほど作成したフォルダをVS Codeで開きます。
 
 <Tabs groupId="os">
-  <TabItem value="mac" label="macOS">
-    <video src={openFolderOnMacVideo} controls />
-  </TabItem>
   <TabItem value="win" label="Windows">
     <video src={openFolderOnWindowsVideo} controls />
   </TabItem>
+  <TabItem value="mac" label="macOS">
+    <video src={openFolderOnMacVideo} controls />
+  </TabItem>
 </Tabs>
 
 :::info

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

@@ -13,7 +13,7 @@ Web開発に必ず用いられる言語があります。<Term>**HTML**</Term>
 
 ## <Term>HTML</Term>を書き始める
 
-VS Codeの画面左端には、ファイル一覧が表示されています。新しいファイルを作成して、`index.html`と名付けましょう。ファイルの中身を次のようにした後、保存します。保存にはショートカットキー (<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) ) を用いてください。
+VS Codeの画面左端には、ファイル一覧が表示されています。新しいファイルを作成して、`index.html`と名付けましょう。ファイルの中身を次のようにした後、保存します。保存にはショートカットキー (<kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) / <kbd>command</kbd> + <kbd>S</kbd> (macOS) ) を用いてください。
 
 ```html title="index.html"
 <!doctype html>
@@ -75,13 +75,13 @@ VS Code上で作成したファイルは`index.html`でした。しかしなが
 </html>
 ```
 
-繰り返しになりますが、<Term>HTML</Term>を編集したら、<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) キーを押してファイルを保存します。ファイル名の横に表示されている丸い記号が消えたら保存が完了しています。
+繰り返しになりますが、<Term>HTML</Term>を編集したら、<kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) / <kbd>command</kbd> + <kbd>S</kbd> (macOS) キーを押してファイルを保存します。ファイル名の横に表示されている丸い記号が消えたら保存が完了しています。
 
 ![ファイルを保存する](./save-file.png)
 
 :::tip[ショートカットキー]
 
-ショートカットキーがうまく押せませんか？<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) はよく、「<kbd>command</kbd> (macOS) または<kbd>Ctrl</kbd> (Windows) キーと<kbd>S</kbd>キーを同時に押す」と言われますが、実は同時に押すと半分くらいの確率で失敗します。<kbd>command</kbd> (macOS) / <kbd>Ctrl</kbd> (Windows) キーを押した後、キーから指を離す前に<kbd>S</kbd>キーを押しましょう。
+ショートカットキーがうまく押せませんか？<kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) / <kbd>command</kbd> + <kbd>S</kbd> (macOS) はよく、「<kbd>Ctrl</kbd> (Windows) または<kbd>command</kbd> (macOS) キーと<kbd>S</kbd>キーを同時に押す」と言われますが、実は同時に押すと半分くらいの確率で失敗します。<kbd>Ctrl</kbd> (Windows) / <kbd>command</kbd> (macOS) キーを押した後、キーから指を離す前に<kbd>S</kbd>キーを押しましょう。
 
 ショートカットキーを使いこなせるようになると、パソコンの操作速度が飛躍的に上昇します。慣れている人がパソコンを操作しているのを見たら、ぜひ後ろから覗き込んでみましょう。便利そうなショートカットキーを使っている人がいたら身に付けるようにすると良いです。
 

docs/2-browser-apps/01-inspector/index.mdx

@@ -20,7 +20,7 @@ Google Chrome以外のブラウザにも開発者ツールは搭載されてい
 
 :::
 
-開発者ツールは、<kbd>command</kbd> + <kbd>option</kbd> + <kbd>I</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> (Windows) キーを押すことにより起動できます。
+開発者ツールは、<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> (Windows) / <kbd>command</kbd> + <kbd>option</kbd> + <kbd>I</kbd> (macOS) キーを押すことにより起動できます。
 
 ![開発者ツールを起動した様子](open-inspector.png)
 

docs/3-web-servers/02-linux-commands/index.mdx

@@ -6,7 +6,7 @@ import commandsAnswerVideo from "./commands-answer.mp4";
 
 ## ターミナル
 
-**ターミナル**は、文字を用いてコンピューターと会話するためのソフトウェアです。macOSだと標準搭載のターミナルアプリが、Windowsだと[Windows Terminalアプリ](https://apps.microsoft.com/store/detail/windows-terminal/9N0DX20HK701)が利用できますが、VS Code内蔵のターミナルもなかなか便利です。
+**ターミナル**は、文字を用いてコンピューターと会話するためのソフトウェアです。Windowsだと[Windows Terminalアプリ](https://apps.microsoft.com/store/detail/windows-terminal/9N0DX20HK701)が、macOSだと標準搭載のターミナルアプリが利用できますが、VS Code内蔵のターミナルもなかなか便利です。
 
 VS Code内蔵のターミナルを起動させるには、メニューの`Terminal`から`New Terminal`をクリックします。
 
@@ -17,7 +17,7 @@ VS Code内蔵のターミナルを起動させるには、メニューの`Termin
 VS Codeの**コマンド パレット**は、現在VS Code上で使用できる全ての機能を一覧表示する機能です。
 
 {/* prettier-ignore */}
-<kbd>command</kbd> + <kbd>shift</kbd> + <kbd>P</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (Windows) キーを押すことにより起動できます。
+<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (Windows) / <kbd>command</kbd> + <kbd>shift</kbd> + <kbd>P</kbd> (macOS) キーを押すことにより起動できます。
 
 次の画像は、コマンド パレットを用いて新しいターミナルを作成する例です。コマンド パレットを使用することで、ショートカットキーを知らなくても、キーボードのみでVS Codeが操作できるようになります。
 

docs/3-web-servers/03-node-js/index.mdx

@@ -61,6 +61,12 @@ v22.15.0
 ```
 
 <Tabs groupId="os">
+  <TabItem value="win" label="Windows (WSL)">
+    Windows上での作業は、WSLのターミナルを利用するようにしましょう。
+
+    <video src={installNvmInWslVideo} controls />
+
+  </TabItem>
   <TabItem value="mac" label="macOS">
     macOSの場合、インストールコマンドを実行してターミナルを再起動しても、`nvm`が使用できない場合があります。その場合、次のコマンドを実行してみてください。
 
@@ -71,12 +77,6 @@ v22.15.0
     <video src={installNvmInMacVideo} controls />
 
   </TabItem>
-  <TabItem value="win" label="Windows (WSL)">
-    Windows上での作業は、WSLのターミナルを利用するようにしましょう。
-
-    <video src={installNvmInWslVideo} controls />
-
-  </TabItem>
 </Tabs>
 
 ## Node.jsでHello World

docs/3-web-servers/05-server/index.mdx

@@ -78,7 +78,7 @@ node main.mjs
 
 :::warning[Webサーバーの停止]
 
-サーバーは、クライアントからのリクエストを待ち受けるため、管理者により指示されない限り終了しないソフトウェアとして動作します。Expressで構築したサーバーは、ターミナル上で<kbd>control</kbd> + <kbd>C</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>C</kbd> (Windows) を押すことで停止することができます。
+サーバーは、クライアントからのリクエストを待ち受けるため、管理者により指示されない限り終了しないソフトウェアとして動作します。Expressで構築したサーバーは、ターミナル上で<kbd>Ctrl</kbd> + <kbd>C</kbd> (Windows) / <kbd>control</kbd> + <kbd>C</kbd> (macOS) を押すことで停止することができます。
 
 :::
 

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

@@ -29,7 +29,7 @@ VS Code標準の機能だけでも多くのことができますが、より便
 
 ### [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
 
-コマンドパレット (<kbd>command</kbd> + <kbd>shift</kbd> + <kbd>P</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (Windows) ) に`Git Graph: View Git Graph (git log)`というメニューが出て見やすい
+コマンドパレット (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (Windows) / <kbd>command</kbd> + <kbd>shift</kbd> + <kbd>P</kbd> (macOS) ) に`Git Graph: View Git Graph (git log)`というメニューが出て見やすい
 
 ![GitGragh](./gitGraph.png)
 

docs/3-web-servers/11-git/index.mdx

@@ -139,7 +139,7 @@ git commit -m "コミットメッセージ"
 
 <video src={secondCommitVideo} muted controls />
 
-これにより、2つ目のコミットが作成されました。それぞれのコミットでどのような変更がなされたのかを確認するために、先ほどインストールした`Git Graph`拡張機能を使ってコミット履歴を確認しましょう。<kbd>command</kbd> + <kbd>shift</kbd> + <kbd>P</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (Windows) キーを押してコマンドパレットを開き、`Git Graph: View Git Graph (git log)`を選択します。それぞれのコミットでどのような変更がなされたのかを確認することができます。
+これにより、2つ目のコミットが作成されました。それぞれのコミットでどのような変更がなされたのかを確認するために、先ほどインストールした`Git Graph`拡張機能を使ってコミット履歴を確認しましょう。<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (Windows) / <kbd>command</kbd> + <kbd>shift</kbd> + <kbd>P</kbd> (macOS) キーを押してコマンドパレットを開き、`Git Graph: View Git Graph (git log)`を選択します。それぞれのコミットでどのような変更がなされたのかを確認することができます。
 
 <video src={showGitHistoryVideo} muted controls />
 

docs/4-advanced/02-bundler/index.mdx

@@ -70,7 +70,7 @@ Vite内蔵のウェブサーバーが起動し、`http://localhost:5173/`でウ
 
 ## Viteの仕組み
 
-Viteの挙動を理解するため、<kbd>control</kbd> + <kbd>C</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>C</kbd> (Windows) で先ほど起動させたウェブサーバーを停止させ、`npm run build`コマンドを実行してみましょう。
+Viteの挙動を理解するため、<kbd>Ctrl</kbd> + <kbd>C</kbd> (Windows) / <kbd>control</kbd> + <kbd>C</kbd> (macOS) で先ほど起動させたウェブサーバーを停止させ、`npm run build`コマンドを実行してみましょう。
 
 ```shell
 $ npm run build

docs/5-team-development/01-git-workflow/index.mdx

@@ -75,7 +75,7 @@ HEADが `master` ブランチを指している状態で、コミットを行っ
 
 :::tip[Git標準のエディタ]
 
-コマンドラインからコミットを作成する際、`-m` オプションを指定しなかった場合、コミットメッセージを編集するためのエディタが起動します。このエディタは自分で設定することができますが、上の例では[nano](https://www.nano-editor.org/)が起動しており、この場合は<kbd>control</kbd> + <kbd>X</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>X</kbd> (Windows) で終了します。
+コマンドラインからコミットを作成する際、`-m` オプションを指定しなかった場合、コミットメッセージを編集するためのエディタが起動します。このエディタは自分で設定することができますが、上の例では[nano](https://www.nano-editor.org/)が起動しており、この場合は<kbd>Ctrl</kbd> + <kbd>X</kbd> (Windows) / <kbd>control</kbd> + <kbd>X</kbd> (macOS) で終了します。
 
 環境によっては[Vim](https://www.vim.org/)が起動する場合があります。この場合は、`:q` を入力して `Enter` を押下することにより終了できます。