Change minor

docs/02advanced/01life-game/index.mdx

@@ -80,7 +80,7 @@ import LifeGame from "@site/src/components/LifeGame/LifeGame";
 
 ## ライフゲームで遊んでみる
 
-ライフゲームを簡単に遊べるプログラムを作ってみました。下のマスをクリックすると、マスの色を反転することができます。これで少し遊ぶことでライフゲームの仕組みを理解してください。
+ライフゲームを簡単に遊べるプログラムを作ってみました。下のマスをクリックまたはタッチすると、マスの色を反転することができます。これで少し遊ぶことでライフゲームの仕組みを理解してください。
 
 <LifeGame />
 

docs/03extras/04website/01npm/index.mdx

@@ -9,51 +9,51 @@ import installCurl from "./install_curl.mp4";
 
 ## npm のインストール方法
 
-このシケプリは、Docusaurus という静的サイトジェネレーターを使っています。Docusaurus をインストールするには npm(Node Package Manager)というパッケージ管理ツールが必要です。また、他に必要なパッケージをインストールする時にも必須となります。npm は JavaScript の開発者によく使われています。
+このシケプリは、Docusaurus という静的サイトジェネレーターを使っています。Docusaurus を使うには npm(Node Package Manager)というパッケージ管理ツールが必要です。また、他に必要なパッケージをインストールする時にも必須となります。npm は JavaScript の開発者によく使われています。
 
 下の動画を見ながら、インストールしてください。以下に概要を記しておきます。
 
 まず、はじめに nvm(Node Version Manager) という Node.js のバージョン管理ツールをインストールします。
 
 - [nvm のウェブサイトの Install & Update Script の項](https://github.com/nvm-sh/nvm#install--update-script)に書かれているスクリプトをターミナル上で実行しましょう。次のようなスクリプトが書いてあるはずです。2022 年 11 月現在
 
-```shell
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
-```
+  ```shell
+  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
+  ```
 
 - ターミナルを再起動しましょう。ターミナル上で `exit` と入力して、ターミナルをもう一度開くことで再起動ができます。※ターミナルを再起動させないと次のコマンドを実行したときにエラーが出ます。
 
 - 次のコマンドを実行してください。これは、nvm のバージョンを確認するコマンドです。
 
-```shell
-nvm -v
-```
+  ```shell
+  nvm -v
+  ```
 
 - 次のように表示されたら、成功です。※2022 年 11 月現在
 
-```shell
-0.39.2
-```
+  ```shell
+  0.39.2
+  ```
 
 次に、nvm を用いて Node.js の安定版（LTS）をインストールします。
 
 - 次のコマンドを実行してください。これは、Node.js の安定版（LTS）をインストールするコマンドです。
 
-```shell
-nvm install --lts
-```
+  ```shell
+  nvm install --lts
+  ```
 
 - 次のコマンドを実行してください。これは、Node.js のバージョンを確認するコマンドです。
 
-```shell
-node -v
-```
+  ```shell
+  node -v
+  ```
 
 - 次のように表示されたら、成功です。※2022 年 11 月現在
 
-```shell
-v18.12.1
-```
+  ```shell
+  v18.12.1
+  ```
 
 <video src={installNpm} controls width="100%" />
 
@@ -64,6 +64,12 @@ v18.12.1
 sudo apt -y install curl
 ```
 
+macOS の場合は、次のコマンドで curl をインストールできます。
+
+```shell
+brew install curl
+```
+
 <video src={installCurl} controls width="100%" />
 
 :::

docs/03extras/04website/02docusaurus/index.mdx

@@ -2,6 +2,7 @@
 sidebar_position: 2
 ---
 
+import BrowserWindow from "@site/src/components/BrowserWindow";
 import installDocusaurus from "./install_docusaurus.mp4";
 import editDocusaurus from "./edit_docusaurus.mp4";
 import LifeGame from "@site/src/components/LifeGame/LifeGame";
@@ -10,27 +11,27 @@ import LifeGame from "@site/src/components/LifeGame/LifeGame";
 
 ## Docusaurus のインストール方法
 
-ここでは、Docusaurus という静的サイトジェネレーターを使って実際にウェブサイトを作ってみます。Docusaurus は、さきほどインストールした npm を使うとコマンド一つで使うことができます。実は、npm を使えば、Docusaurus 以外にも様々なものをコマンド一つで簡単にインストールできます。下の動画を見ながら、インストールしてください。以下に概要を記しておきます。
+ここでは、Docusaurus という静的サイトジェネレーターを使って実際にウェブサイトを作ってみます。Docusaurus は、さきほどインストールした npm を使うとコマンド一つで使うことができます。実は、npm を使えば、Docusaurus 以外にも様々なものをコマンド一つで簡単にインストールできます。下の動画を見ながら、Docusaurus のプロジェクトを作成してください。以下に概要を記しておきます。
 
-- まず、適当に `projects` ファルダを作成して、ターミナルを起動してください。
+- まず、適当なフォルダ例えば `projects` フォルダを作成して、ターミナルを起動してください。
 
 - ここで、次のコマンドを実行すると、Docusaurus のプロジェクトを作成することができます。（`my-website` のところを任意の文字にすることでプロジェクト名を決めることができます。）
 
-```shell
-npx create-docusaurus@latest my-website classic
-```
+  ```shell
+  npx create-docusaurus@latest my-website classic
+  ```
 
 - `Ok to proceed? (y)` と聞かれるので、`y` と入力して `Enterキー` を押します。
 
 - 次のコマンドを順に実行します。すると、ブラウザが自動的に開き、デフォルトのウェブサイトが現れます。
 
-```shell
-cd my-website
-```
+  ```shell
+  cd my-website
+  ```
 
-```shell
-npm start
-```
+  ```shell
+  npm start
+  ```
 
 <video src={installDocusaurus} controls width="100%" />
 
@@ -40,54 +41,70 @@ npm start
 
 - まず、ターミナル上で `Ctrlキー` と `C` を同時に押して、先程起動した Docusaurus のサーバーを終了してください。
 
-- 次に、先程作成した Docusaurus のプロジェクトを VSCode で開きます。
+- 次に、先程作成した Docusaurus のプロジェクトフォルダを VSCode で開きます。
 
 - ターミナルを起動します。
 
 - もう一度次のコマンドを実行して、Docusaurus のサーバーを起動します。先程のようにブラウザが自動的に開きます。
 
-```shell
-npm start
-```
+  ```shell
+  npm start
+  ```
 
 - では、実際に編集してみましょう。今回は、チュートリアルのはじめのページを編集してみます。`docs` ファルダの中の `intro.md` というフォルダを開いて、上から 5 行目の `# Tutorial Intro` というところを `# Hello from Docusaurus` と書き換えてみましょう。（先頭に `#` と書いてあるのは、ここは見出しだという命令です。実は、Docusaurus は Markdown という非常に簡単な形式で書くことができます。）ブラウザを見ると、自動で編集した内容がプレビューされているはずです。
 
 <video src={editDocusaurus} controls width="100%" />
 
 :::info
-先程、Docusaurus は Markdown という形式で書くことができると書きました。ここで、Markdown 記法について少し紹介しておきます。詳しいことは、自分で調べてみてください。
+先程、Docusaurus は Markdown という形式で書くことができると書きました。ここで、Markdown 記法について少し紹介しておきます。より詳しいことは、自分で調べてみてください。
 
 1. `#` と書くことで見出しを書くことができます。
 
    ```markdown
    # レベル 1 の見出し
    ```
 
+   <BrowserWindow>
+
    # レベル 1 の見出し
 
+   </BrowserWindow>
+
 2. `##` は `#` の一個下の見出しです。
 
    ```markdown
    ## レベル 2 の見出し
    ```
 
+   <BrowserWindow>
+
    ## レベル 2 の見出し
 
+   </BrowserWindow>
+
 3. `**` で強調することができます。
 
    ```markdown
    **強調**
    ```
 
+   <BrowserWindow>
+
    **強調**
 
+   </BrowserWindow>
+
 4. `>` とすることで引用することができます。
 
    ```markdown
-   > hoge
+   > 引用
    ```
 
-   > hoge
+   <BrowserWindow>
+
+   > 引用
+
+   </BrowserWindow>
 
 5. 箇条書きは次のようにして書けます。
 
@@ -97,12 +114,16 @@ npm start
    - アイテム 3
    ```
 
+   <BrowserWindow>
+
    <ul style={{ listStyleType: "disc" }}>
      <li>アイテム 1</li>
      <li>アイテム 2</li>
      <li>アイテム 3</li>
    </ul>
 
+   </BrowserWindow>
+
 6. 番号付き箇条書きは次のようにして書けます。
 
    ```markdown
@@ -111,20 +132,28 @@ npm start
    1. アイテム 3
    ```
 
+   <BrowserWindow>
+
    <ol style={{ listStyleType: "decimal" }}>
      <li>アイテム 1</li>
      <li>アイテム 2</li>
      <li>アイテム 3</li>
    </ol>
 
+   </BrowserWindow>
+
 7. バッククォート（ `` ` `` ）で囲むことでインラインコードを表示することができます。
 
    ```markdown
    `コードテキスト`
    ```
 
+   <BrowserWindow>
+
    `コードテキスト`
 
+   </BrowserWindow>
+
 8. バッククォート 3 つで、コードブロックを表示することができます。
 
    ````markdown
@@ -133,55 +162,73 @@ npm start
    ```
    ````
 
+   <BrowserWindow>
+
    ```python
    print("Hello World!")
    ```
 
+   </BrowserWindow>
+
 9. リンクは次のようにして表すことができます。
 
    ```markdown
    [Introduction to Algorithms](https://sikepuri-algorithm.github.io/)
    ```
 
+   <BrowserWindow>
+
    [Introduction to Algorithms](https://sikepuri-algorithm.github.io/)
 
+   </BrowserWindow>
+
 10. 画像は次のようにして表示することができます。もちろん相対パスも使えます。
 
     ```markdown
     ![Introduction to Algorithms](https://sikepuri-algorithm.github.io/img/logo.svg)
     ```
 
+   <BrowserWindow>
+
     <div style={{maxWidth:"200px"}}>
 
     ![Introduction toAlgorithms](https://sikepuri-algorithm.github.io/img/logo.svg)
 
     </div>
 
+   </BrowserWindow>
+
 11. 実は、Markdown の中には HTML も書くことができます。
 
     ```markdown
     <button type="button">ボタン</button>
     ```
 
+   <BrowserWindow>
+
     <button type="button">ボタン</button>
 
+   </BrowserWindow>
+
 :::
 
 :::info
-実は、Docusaurus は Markdown だけでなく MDX でも書くことができます。MDX は、Markdown の中で JSX 記法 を使えるものです。JSX 記法 は、JavaScript の中に HTML を書くことができるものですが、なかなか奥が深くここでは説明できないので、自分で調べてみてください。
+実は、Docusaurus は Markdown だけでなく MDX でも書くことができます。MDX は、Markdown の中で JSX 記法 を使えるものです。JSX 記法 は、JavaScript の中に HTML を書くことができるものですが、JavaScript や HTML の知識が必要になるので、自分で調べてみてください。
 
-ちなみに、このシケプリではライフゲームのコンポーネントを作ったので、それを使うときはファイルの先頭で次のようにインポートしてから、次のように書くだけでライフゲームを表示できます w
+JavaScript を文書の中に書くことができるので、例えば次のような表現が可能です。
+
+```mdx live
+<>{2 * Math.PI}</>
+```
+
+ちなみに、このシケプリではライフゲームのコンポーネントを作ったので、それを使うときはファイルの先頭で次のようにインポートしてから、次のように書くだけでライフゲームを表示できます（笑）
 
 ```markdown
 import LifeGame from "@site/src/components/LifeGame/LifeGame";
 ```
 
-```mdx
+```mdx live
 <LifeGame />
 ```
 
-<div style={{ maxWidth: "200px" }}>
-  <LifeGame />
-</div>
-
 :::

docs/03extras/04website/03GitHub/index.mdx

@@ -61,7 +61,7 @@ GitHub はソースコードのホスティングサービスです。Git とい
   cat id_ed25519.pub
   ```
 
-- 公開鍵をコピーしましょう。（動画では、`ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIFwrVCiY5VvBvo5VRDIzkFZa0eprytqHmoWBS2GBbGpT`）
+- 公開鍵をコピーしましょう。（動画では、`ssh-ed25519 AAAA...bGpT`）
 
 - GitHub で `Settings`、`SSH and GPG keys`、`SSH keys` の中の `New SSH key` をクリックして、`Title` に適当な名前、`Key` に先程コピーした公開鍵を入力して、`Add SSH key` をクリックすると GitHub に公開鍵が登録できます。
 
@@ -73,19 +73,19 @@ GitHub はソースコードのホスティングサービスです。Git とい
 
 作成が終わったら、`SSH` をクリックして、右側にある文字をコピーしましょう。※`SSH` をクリックし忘れないように気をつけてください。
 
-次に、作成した Docusaurus のプロジェクトフォルダを VSCode で開いてそこで、次のコマンドを実行してください。
+次に、作成した Docusaurus のプロジェクトフォルダを VSCode で開いてそこで、次のコマンドを実行してください。これは、リポジトリをローカル上に作成する命令です。
 
 ```shell
 git init
 ```
 
-次に、次のコマンドを実行して、先程作ったリポジトリとパソコン上のリポジトリを紐付けてください。
+次に、次のコマンドを実行して、先程作った GitHub 上で作ったリポジトリとローカル上のリポジトリを紐付けてください。
 
 ```shell
 git remote add origin 先程コピーした文字
 ```
 
-次に、ステージングしましょう。これで、どのファイルを Git 上で管理するか決めることができます。`-A` はすべてを管理する命令です。`git add ファイル名` などのようにして個別にすることもできます。
+次に、ステージングしましょう。これは、どのファイルを Git 上で管理するか決めることができるコマンドです。`-A` はすべてを管理する命令です。`git add ファイル名` などのようにして個別に Git の管理下に含めることもできます。
 
 ```shell
 git add -A
@@ -99,4 +99,6 @@ git commit -m "first commit"
 
 最後に、ローカルのブランチをリモートリポジトリにプッシュしましょう。一回目だと、`Are you sure you want to continue connecting (yes/no/[fingerprint])?` と聞かれるので、`yes` と入力しましょう。これで、GitHub を開くと、ローカルのファイルが GitHub に保存されたことがわかります。
 
+一般的な開発では、ステージングとコミットを繰り返して、時々プッシュしていくような流れになります。
+
 <video src={pushToGithub} controls width="100%" />