Refactor/setup

docs/.vitepress/sidebarConfigs/chapters/chapter1/sections/section1.ts

@@ -1,9 +1,10 @@
 import type { DefaultTheme } from 'vitepress'
 
 export const section1SidebarItems: DefaultTheme.SidebarItem[] = [
-  { text: '環境構築', link: '/chapter1/section1/0_setup' },
+  { text: '環境構築 (windows)', link: '/chapter1/section1/0_setup-windows' },
+  { text: '環境構築 (macOS)', link: '/chapter1/section1/1_setup-unix' },
   {
     text: 'Go で Hello World',
-    link: '/chapter1/section1/1_hello-world'
+    link: '/chapter1/section1/2_hello-world'
   }
 ]

docs/chapter1/index.md

@@ -1,3 +1,9 @@
+---
+next:
+  text: 'きれいなコードを書くために'
+  link: './dicts/clean-code/0_index.md'
+---
+
 # はじめに
 
 Web エンジニアになろう講習会へようこそ。

docs/chapter1/section1/0_setup-windows.md

@@ -0,0 +1,161 @@
+# 環境構築 (windows)
+
+[[toc]]
+
+:::warning
+コマンドは手入力ではなく、コピー & ペースト で入力してください。  
+手入力だと写し間違いの可能性があります。  
+この際、1 行ずつコピーするようにしてください。
+:::
+
+## 事前準備
+
+::: tip
+質問をするときにはできるだけスクリーンショットを貼るようにしましょう。テキストだけで説明しても解決に必要な情報を全て伝えるのは難しいです。
+
+`Control + Shift + Command + 4`を押すと、矩形選択でスクリーンショットが撮れます。 traQ のメッセージ入力欄に`Command + V`で貼り付けられます。
+:::
+
+### WSL の導入
+
+すでに WSL をインストールしている方はこの手順を飛ばして大丈夫です。
+
+WSL は Windows 上で Linux を動かすための仕組みで、`Windows Subsystem for Linux`の略です。
+
+以下のページの Step 1 を行ってください。 Step 2 以降は行わなくて大丈夫です。
+
+https://pg-basic.trap.show/text/chapter-0/enviroment/windows.html#step-1-install-wsl
+
+## VSCode の導入
+
+すでに VSCode をインストールしている方はこの手順を飛ばして大丈夫です。
+
+以下のサイトから使用している OS に合った VSCode のインストーラーをダウンロードして、それを実行してインストールしてください。
+
+https://code.visualstudio.com/download
+
+### 拡張機能の導入
+
+VSCode は拡張機能により様々な言語でのプログラミングをラクにすることができます。  
+次回以降に使うものも最初にまとめて導入しておきましょう。
+
+- [Go](https://marketplace.visualstudio.com/items?itemName=golang.Go)
+  - Go 言語で書いたコードをチェックしてくれたり、プログラムを書くときに補完 (予測変換のような機能) を使えるようになったりします。
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+  - コードの書き方をチェックしてくれます。
+- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+  - コードのフォーマットを整えてくれます。保存時に自動で実行されるような設定をしておくと便利です。
+- [Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=vue.volar)
+  - VSCode の Vue3 向けの統合プラグイン。  
+
+インストールが終わったら、反映させるために VSCode を 1 度閉じて開きなおしてください。
+
+## Go と Task のインストール
+
+ここでは、Go というプログラミング言語の導入をします。
+この講習会では Go という言語でサーバーサイドの制作を行います。
+
+``` bash
+sudo apt install tar git
+wget https://go.dev/dl/go1.22.3.linux-amd64.tar.gz
+sudo rm -rf /usr/local/go && sudo tar -C /usr/local -xzf go1.22.3.linux-amd64.tar.gz
+echo 'export PATH=$PATH:/usr/local/go/bin' >> ~/.bash_profile
+source ~/.bash_profile
+```
+
+ここまでで、以下のコマンドを実行して
+
+```bash
+go version
+```
+
+`go version go.1.22.3`と表示されればインストール完了です。
+ここまでできれば、次は以下のコマンドも実行して Task のインストールをしてください。
+
+```sh
+go run github.com/go-task/task/v3/cmd/task@latest init
+```
+
+:::info 詳しく知りたい人向け。
+
+**`Task`って何だ。**
+
+Task は、Go で動いているタスクランナーです。これによって長いコマンドを短くできたり、複数のコマンドを 1 回で実行できたりと、開発においてとても便利なツールです。テンプレートリポジトリに`Taskfile.yaml`というファイルがありますが、このファイルによってコマンドの設定をしています。公式ドキュメントは英語しかありませんが、興味のある人は目を通してみてください。
+
+Task 公式ドキュメント [https://taskfile.dev/](https://taskfile.dev/)
+
+Task GitHub [https://github.com/go-task/task](https://github.com/go-task/task)
+
+:::
+
+### Go のツールのインストール
+
+VSCode で `Ctrl`+`Shift`+`P` を押して出てくるコマンドパレットに`gotools`と入力して、出てきた「Go: Install/Update Tools」をクリックしてください。
+
+![](images/vscode_gotools.png)
+
+利用可能なツールの一覧が出てくるので、全てにチェックを入れて「OK」をクリックします。
+
+:::tip
+一番上の入力欄の左にあるチェックボックスを押すと一括選択ができます。
+:::
+
+出力で`All tools successfully installed. You are ready to Go. :)`と出ているのが確認できたら成功です。
+
+## asdf の導入
+
+asdf とは、一つのプログラムの複数のバージョンを PC 内で管理できるようにするものです。
+それ以外にもあとからバージョンを更新するのが容易にもなるので長期的に見るとオススメです。
+
+[公式資料](https://asdf-vm.com/#/core-manage-asdf)
+
+以下のコマンドにより asdf の導入を行います。
+
+``` bash
+sudo apt install git
+git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.11.3
+echo '. $HOME/.asdf/asdf.sh' >> ~/.bashrc
+echo '. $HOME/.asdf/completions/asdf.bash' >> ~/.bashrc
+source ~/.bashrc
+```
+
+## Node.jsの導入
+
+Vue を使うために、Node.js を入れます。
+この講習会では、クライアントサイドを Vue を用いて制作します。
+
+```bash
+asdf plugin add nodejs
+asdf install nodejs latest
+asdf global nodejs latest
+```
+
+これで、デフォルトで現在出ている最新のバージョンが適用されるようになりました。
+
+ここで、インストールが正常にできているかを確認します。
+
+```bash
+node -v
+```
+
+を実行して、バージョン番号が表示されれば OK。
+
+## Docker Desktopのインストール
+
+https://www.docker.com/products/docker-desktop/  
+上のリンクからそれぞれの OS にあったものをダウンロードしてインストールしてください。
+
+### WSL2の追加設定 - WSL Backend の有効化
+
+1. 右上の歯車アイコンから `Resources` => `WSL Integration` に移動する。
+2. `Enable integration with my default WSL distro`にチェックを入れる。
+3. 下に出てくる Distro をすべて有効化する。
+4. 最後に、右下の `Apply & Restart` をクリックして設定は完了です。
+
+![WSL Integration](./images/setup-wsl-backend.png)
+
+## Postmanのインストール
+
+[Postman | API Development Environment](https://www.getpostman.com/) は GUI で HTTP リクエストを行えるアプリケーションです。
+
+[ダウンロードページ](https://www.postman.com/downloads/)