Merge pull request #69 from sikepuri-algorithm/feature-extra

補足の項を執筆

Author: chvmvd

.gitignore

@@ -1,4 +1,5 @@
 /docs/**/*.json
+!_category_.json
 
 # Dependencies
 /node_modules

.pre-commit-config.yaml

@@ -56,9 +56,8 @@ repos:
       - id: check-added-large-files
       - id: check-json
         exclude: .eslintrc.json|tsconfig.json
-      - id: pretty-format-json
-        args: [--autofix]
-        exclude: ^(package.json|package-lock.json|.eslintrc.json|tsconfig.json)$
+      # - id: pretty-format-json
+      #   args: [--autofix]
       - id: check-merge-conflict
       - id: check-toml
       - id: check-xml

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

@@ -0,0 +1,69 @@
+---
+sidebar_position: 1
+---
+
+import installNpm from "./install_npm.mp4";
+import installCurl from "./install_curl.mp4";
+
+# npm のインストール方法
+
+## npm のインストール方法
+
+このシケプリは、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
+```
+
+- ターミナルを再起動しましょう。ターミナル上で `exit` と入力して、ターミナルをもう一度開くことで再起動ができます。※ターミナルを再起動させないと次のコマンドを実行したときにエラーが出ます。
+
+- 次のコマンドを実行してください。これは、nvm のバージョンを確認するコマンドです。
+
+```shell
+nvm -v
+```
+
+- 次のように表示されたら、成功です。※2022 年 11 月現在
+
+```shell
+0.39.2
+```
+
+次に、nvm を用いて Node.js の安定版（LTS）をインストールします。
+
+- 次のコマンドを実行してください。これは、Node.js の安定版（LTS）をインストールするコマンドです。
+
+```shell
+nvm install --lts
+```
+
+- 次のコマンドを実行してください。これは、Node.js のバージョンを確認するコマンドです。
+
+```shell
+node -v
+```
+
+- 次のように表示されたら、成功です。※2022 年 11 月現在
+
+```shell
+v18.12.1
+```
+
+<video src={installNpm} controls width="100%" />
+
+:::tip
+一番はじめのスクリプトを実行する時に `Command 'curl' not found ...` のようにエラーが出た場合は、curl がインストールされていない可能性があります。エラーメッセージにあるように、WSL や Ubuntu 系の Linux では次のスクリプトを実行して curl をインストールすればうまく動きます。
+
+```shell
+sudo apt -y install curl
+```
+
+<video src={installCurl} controls width="100%" />
+
+:::

docs/03extras/04website/01npm/install_curl.mp4

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

docs/03extras/04website/01npm/install_npm.mp4

@@ -0,0 +1,102 @@
+---
+sidebar_position: 3
+---
+
+import sighupGitHub from "./sighup_github.mp4";
+import setupGit from "./setup_git.mp4";
+import setupSshGithub from "./setup_ssh_github.mp4";
+import pushToGithub from "./push_to_github.mp4";
+
+# GitHub へ保存
+
+## GitHub のアカウントを作る
+
+GitHub はソースコードのホスティングサービスです。Git というバージョン管理ソフトウェアを用いて、ソースコードの管理や共有が簡単にできます。
+
+下の動画を参考にまずはアカウントを作成しましょう。
+
+<video src={sighupGitHub} controls width="100%" />
+
+## 初期設定
+
+まずは Git の初期設定をしましょう。
+
+- GitHub で `Settings`、`Emails`の順にクリックして、`Keep my email addresses private` の下に書いてあるダミーのメールアドレス（動画では、`118946511+sample-hovwec@users.noreply.github.com`）をコピーしてください。
+
+- 次のコマンドを順に実行してください。それぞれユーザー名の設定、メールアドレスの設定、デフォルトブランチの設定（これをやっておくと、後で混乱がなくなります。）になってます。
+
+  ```shell
+  git config --global user.name ユーザー名
+  ```
+
+  ```shell
+  git config --global user.email 先程確認したメールアドレス
+  ```
+
+  ```shell
+  git config --global init.defaultBranch main
+  ```
+
+<video src={setupGit} controls width="100%" />
+
+次に、GitHub に自分のパソコンの公開鍵を登録して、認証しましょう。
+
+- 次のコマンドを実行して公開鍵を作りましょう。
+
+  ```shell
+  cd ~
+  ```
+
+  ```shell
+  ssh-keygen -t ed25519
+  ```
+
+- 次のコマンドを実行して公開鍵を表示しましょう。
+
+  ```shell
+  cd ~/.ssh
+  ```
+
+  ```shell
+  cat id_ed25519.pub
+  ```
+
+- 公開鍵をコピーしましょう。（動画では、`ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIFwrVCiY5VvBvo5VRDIzkFZa0eprytqHmoWBS2GBbGpT`）
+
+- GitHub で `Settings`、`SSH and GPG keys`、`SSH keys` の中の `New SSH key` をクリックして、`Title` に適当な名前、`Key` に先程コピーした公開鍵を入力して、`Add SSH key` をクリックすると GitHub に公開鍵が登録できます。
+
+<video src={setupSshGithub} controls width="100%" />
+
+## GitHub へ保存
+
+初期設定が終わったので、GitHub に保存しましょう。`Repositories`、`New`を押して、`Repository name` に好きな名前を入力し、`Private` を押して、`Create repository` を押してください。これで、リポジトリを作ることができます。※他の人に見られても良いのであれば、`Public` にしてください。
+
+作成が終わったら、`SSH` をクリックして、右側にある文字をコピーしましょう。※`SSH` をクリックし忘れないように気をつけてください。
+
+次に、作成した Docusaurus のプロジェクトフォルダを VSCode で開いてそこで、次のコマンドを実行してください。
+
+```shell
+git init
+```
+
+次に、次のコマンドを実行して、先程作ったリポジトリとパソコン上のリポジトリを紐付けてください。
+
+```shell
+git remote add origin 先程コピーした文字
+```
+
+次に、ステージングしましょう。これで、どのファイルを Git 上で管理するか決めることができます。`-A` はすべてを管理する命令です。`git add ファイル名` などのようにして個別にすることもできます。
+
+```shell
+git add -A
+```
+
+次に、コミットしましょう。ダブルクォーテーション（`"`）の中は好きなメッセージを入れることができます。
+
+```shell
+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%" />