Change extra structure

docs/03extras/01wsl/index.mdx

@@ -0,0 +1,36 @@
+---
+sidebar_position: 1
+---
+
+import installWsl from "./install_wsl.mov";
+
+# WSL のインストール（Windows のみ必要）
+
+macOS は、Linux という OS と源流を同じくするので、非常に簡単にプログラミングの開発環境を整えることができます。
+
+しかし、Windows では多くの場合プログラミングの開発環境を構築するのはとても難しく大変です。そこで、プログラミング環境を簡単に構築できるように Linux という OS を Windows 上で動かす必要が出てきます。
+
+実は、昔は Windows 上に Linux 環境を構築するのはとても難しかったのですが、最近 Microsoft 社 が Windows 上に簡単に Linux 環境を構築できる WSL(Windows Subsystem for Linux) という機能を開発して非常に簡単になりました。
+
+## WSL のインストール方法
+
+詳しくは、下記の動画を参考にしてください。
+簡単な流れを説明します。
+
+- コマンドプロンプトを `管理者として実行` します。
+
+- コマンドプロンプト上で `wsl --install` と入力して `Enterキー` を押します。
+
+- 完了したら、コンピューターを再起動します。
+
+- しばらく待ってから、`username` と `password` を入力します。（これは、何でも構いません。）
+
+- もう一度 `password` を入力します。
+
+:::tip
+`new password` を求められたときに、入力しても画面上は何も変化しませんが正しく入力されています。そのまま入力して `Enterキー` を押してください。
+:::
+
+<video src={installWsl} controls width="100%" />
+
+WSL の具体的な使い方に関しては、[Visual Studio Code をインストールの項](/docs/03extras/02vscode/)で述べます。

docs/03extras/02vscode/index.mdx

@@ -0,0 +1,73 @@
+---
+sidebar_position: 2
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import installVscode from "./install_vscode.mov";
+import openFolder from "./open_folder.mp4";
+import installRemoteWsl from "./install_remote_wsl.mov";
+import startWsl from "./start_wsl.mov";
+import openFolderWSL from "./open_folder_wsl.mov";
+import openTerminal from "./open_terminal.mp4";
+
+# Visual Studio Code のインストール
+
+## Visual Studio Code のインストール方法
+
+Visual Studio Code は、Microsoft 社 が開発しているフリーかつオープンソースなソースコードエディタです。様々な便利な拡張機能があり、多くの開発者に使われています。
+
+ここでは、Visual Studio Code のインストール方法について簡単に説明します。
+
+次の動画を見ながら、インストールしてください。
+
+<Tabs groupId="os">
+  {/* <TabItem value="win11" label="Windows 11"></TabItem> */}
+  <TabItem value="win10" label="Windows 10">
+    <video src={installVscode} controls width="100%" />
+  </TabItem>
+  <TabItem value="mac" label="macOS">
+    macOSでも、Windowsと同じようにすればできます。macOSを持っていないので、動画は撮れませんでした…。申し訳ありません。
+  </TabItem>
+  {/* <TabItem value="ubuntu" label="Ubuntu"></TabItem> */}
+</Tabs>
+
+## Remote WSL のインストール方法（Windows のみ）
+
+ここでは、VSCode で WSL 上のファイルに簡単にアクセスできる Remote WSL 拡張機能のインストール方法を紹介します。
+
+[WSL をインストールの項](/docs/03extras/01wsl/)を参考に WSL をインストールしておいてください。
+
+下記の動画を参考に VSCode に Remote WSL 拡張機能をインストールしてください。
+
+- VSCode で拡張機能を検索して、インストールします。
+
+<video src={installRemoteWsl} controls width="100%" />
+
+## プロジェクトフォルダの開き方
+
+VSCode ではプロジェクトフォルダは次の動画のようにして開きます。プロジェクトフォルダに様々なファイルを置いて開発をしていきます。
+
+<video src={openFolder} controls width="100%" />
+
+## WSL 上でのプロジェクトフォルダの開き方（Windows のみ）
+
+WSL の起動は、次の動画のようにします。
+
+左下の緑のボタンを押して、`New WSL Window` をクリックすれば、WSL にアクセスすることができます。
+
+<video src={startWsl} controls width="100%" />
+
+次の動画のようにして、新しくプロジェクトフォルダを作成して、それを VSCode で開くことができます。
+
+エクスプローラーのアドレスバーに `¥¥wsl$` と入力すると、WSL 上のファイルを表示することができます。さらに、`Ubuntu`、`home`、`ユーザー名` の順にクリックしていくことでホームフォルダに移動することができます。
+
+その後、VSCode でそのフォルダを開きます。
+
+<video src={openFolderWSL} controls width="100%" />
+
+## ターミナルの起動方法
+
+ターミナルは、次の動画のようにして開くことができます。
+
+<video src={openTerminal} controls width="100%" />

docs/03extras/3python/index.mdx → docs/03extras/03python/index.mdx

@@ -8,9 +8,9 @@ import installPython from "./install_python.mp4";
 
 ## ローカル環境への Python のインストール方法
 
-[Visual Studio Code をインストールの項](/docs/03extras/1vscode/)を参考に VSCode をインストールしておいてください。
+[Visual Studio Code をインストールの項](/docs/03extras/02vscode/)を参考に VSCode をインストールしておいてください。
 
-Windows を使っている場合は、[WSL をインストールの項](/docs/03extras/2wsl/)を参考に WSL もインストールしておいてください。
+Windows を使っている場合は、[WSL をインストールの項](/docs/03extras/01wsl/)を参考に WSL もインストールしておいてください。
 
 VSCode で `samples` プロジェクトフォルダを開いている状態にしておいてください。
 

docs/03extras/5tex/index.mdx → docs/03extras/05tex/index.mdx

@@ -13,9 +13,9 @@ import typesetTex from "./typeset_tex.mp4";
 
 ## TeXLive のインストール
 
-[Visual Studio Code をインストールの項](/docs/03extras/1vscode/)を参考に VSCode をインストールしておいてください。
+[Visual Studio Code をインストールの項](/docs/03extras/02vscode/)を参考に VSCode をインストールしておいてください。
 
-Windows を使っている場合は、[WSL をインストールの項](/docs/03extras/2wsl/)を参考に WSL もインストールしておいてください。
+Windows を使っている場合は、[WSL をインストールの項](/docs/03extras/01wsl/)を参考に WSL もインストールしておいてください。
 
 VSCode で `samples` プロジェクトフォルダを開いている状態にしておいてください。