From 24d23b7a1fbcde870e5e7e59e80608089995f7a8 Mon Sep 17 00:00:00 2001 From: Pugma Date: Thu, 23 May 2024 08:59:01 +0900 Subject: [PATCH 1/9] =?UTF-8?q?=E3=81=A8=E3=82=8A=E3=81=82=E3=81=88?= =?UTF-8?q?=E3=81=9A=E5=85=A8=E9=83=A8=E7=A7=BB=E5=8B=95=E3=81=97=E3=81=A6?= =?UTF-8?q?=E3=81=8D=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/chapter1/section1/0_setup.md | 181 +++++++++++++++++++--- docs/chapter1/section2/0_vue-intro.md | 75 --------- docs/chapter1/section3/1_json-response.md | 5 - docs/chapter1/section4/0_prepare.md | 29 ---- 4 files changed, 162 insertions(+), 128 deletions(-) diff --git a/docs/chapter1/section1/0_setup.md b/docs/chapter1/section1/0_setup.md index b0e5c310..f633a568 100644 --- a/docs/chapter1/section1/0_setup.md +++ b/docs/chapter1/section1/0_setup.md @@ -3,24 +3,47 @@ [[toc]] ::: tip - 質問をするときにはできるだけスクリーンショットを貼るようにしましょう。テキストだけで説明しても解決に必要な情報を全て伝えるのは難しいです。 -Mac: `Control + Shift + Command + 4`を押すと、矩形選択でスクリーンショットが撮れます。 traQ のメッセージ入力欄に`Command + V`で貼り付けられます。 +Mac: `Control + Shift + Command + 4`を押すと、矩形選択でスクリーンショットが撮れます。 traQ のメッセージ入力欄に`Command + V`で貼り付けられます。 + Windows: `Winキー + Shift + S`を押すと、矩形選択でスクリーンショットが撮れます。 traQ のメッセージ入力欄に`Ctrl + V`で貼り付けられます。 ::: -## WSL の導入(Windows を使っている人のみ) +:::warning +以下の作業では、Mac と Windows で手順が違います。 +まずは自分の PC の OS を以下から選んでください。 + +
+ + + + +
+::: + +:::warning +コマンドは手入力ではなく、コピー & ペースト で入力してください。 +手入力だと写し間違いの可能性があります。 +この際、1 行ずつコピーするようにしてください。 +::: + +## 事前準備 + +
+

WSL の導入

すでに WSL をインストールしている方はこの手順を飛ばして大丈夫です。 WSL は Windows 上で Linux を動かすための仕組みで、`Windows Subsystem for Linux`の略です。 -以下のページの Step 1 を行ってください。 Step 2 以降は行わなくて大丈夫です。 +以下のページの Step 1 を行ってください。 Step 2 以降は行わなくて大丈夫です。 https://pg-basic.trap.show/text/chapter-0/enviroment/windows.html#step-1-install-wsl +
-## Homebrew の導入(Mac を使っている人のみ) +
+

Homebrew の導入

`ターミナル`アプリを開いて、以下のコマンドを貼り付け、`return`キーを押して実行してください。 @@ -31,6 +54,7 @@ Homebrew とは、様々なアプリケーションをインストールしや ``` 参考: https://brew.sh/index_ja +
## VSCode の導入 @@ -40,29 +64,33 @@ Homebrew とは、様々なアプリケーションをインストールしや https://code.visualstudio.com/download -## VSCode 拡張機能の導入 +### 拡張機能の導入 + +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 向けの統合プラグイン。 -::: info -コマンドは手打ちではなくてコピー&ペーストで打ってください。 -手打ちだと写し間違いをする可能性があります。 -::: +インストールが終わったら、反映させるために VSCode を 1 度閉じて開きなおしてください。 -## Go のインストール +## Go と Task のインストール 直接インストールする方法と asdf を使ったインストールの 2 種類がありますが、asdf を使った方が後からバージョンを上げるのが簡単になるので、長期的にオススメです。 どちらか好みのほうを選択しましょう。 -::: info -コマンドは一行ずつ実行してください。 -::: - ### 直接インストールする方法 https://golang.org/doc/install インストールが終わった後に`go version`してみて`go version go1.22.2`と出れば成功です。 -#### Mac + +
Mac のタブを選択し、ダウンロードページに飛んで自分のアーキテクチャの pkg をダウンロード=>インストーラ起動で設定完了です。 @@ -72,16 +100,17 @@ Mac のタブを選択し、ダウンロードページに飛んで自分のア M1/M2 Mac の人は Apple macOS (ARM64) を、Intel Mac の人は Apple macOS (x86-64) を選択してください。 ::: details 確認方法 + 1. 左上の :apple: のアイコンから、「この Mac について」 2. 画像の青枠の場所で確認できます。 ![Mac CPU Arch](./images/mac-cpu-arch_1.png) ![Mac CPU Arch](./images/mac-cpu-arch_2.png) ::: +
+
- -#### Windows (WSL2) ``` bash sudo apt install tar git wget https://go.dev/dl/go1.22.2.linux-amd64.tar.gz @@ -89,6 +118,7 @@ sudo rm -rf /usr/local/go && sudo tar -C /usr/local -xzf go1.22.2.linux-amd64.ta echo 'export PATH=$PATH:/usr/local/go/bin' >> ~/.bash_profile source ~/.bash_profile ``` +
### with asdf(バージョン管理ツール) @@ -97,7 +127,9 @@ asdf を導入したのち、 asdf 経由で go を導入します。 #### asdf導入 [公式資料](https://asdf-vm.com/#/core-manage-asdf) + ::: code-group + ``` bash [Windows(WSL2)] sudo apt install git git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.11.3 @@ -105,12 +137,15 @@ echo '. $HOME/.asdf/asdf.sh' >> ~/.bashrc echo '. $HOME/.asdf/completions/asdf.bash' >> ~/.bashrc source ~/.bashrc ``` + ``` zsh [Mac] brew install asdf echo -e '\n. $(brew --prefix asdf)/libexec/asdf.sh' >> ${ZDOTDIR:-~}/.zshrc source ~/.zshrc ``` + ::: + ##### Go の導入 ``` bash @@ -119,7 +154,7 @@ asdf install golang 1.22.2 asdf global golang 1.22.2 ``` -### Go のツールのインストール(全員) +### Go のツールのインストール VSCode で Windows ならば`Ctrl`+`Shift`+`P`、Mac ならば`Command`+`Shift`+`P`を押して出てくるコマンドパレットに`gotools`と入力して、出てきた「Go: Install/Update Tools」をクリックしてください。 @@ -129,6 +164,102 @@ VSCode で Windows ならば`Ctrl`+`Shift`+`P`、Mac ならば`Command`+`Shift`+ 出力で`All tools successfully installed. You are ready to Go. :)`と出ているのが確認できたら成功です。 +## Taskのインストール + +Go をインストールした方法に応じて、以下をコマンドラインで実行してください。 + +:::code-group + +```sh [asdf (WSL, Mac)] +go run github.com/go-task/task/v3/cmd/task@latest init +asdf reshim golang +``` + +```sh [直接 (WSL, Mac)] +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) + +::: + +## Node.jsの導入 + +Vue を使うために、Node.js を入れます。自分の環境に合わせたものを選んで実行してください。 + +### 簡単 + +前の章で asdf を使って Go をインストールした人はこちらではなくて、「バージョン管理を考える」の方を見てください。 + +
+ +#### mac + +1. Homebrew を用いてインストール + +```zsh +$ brew install node +``` + +2. PATH を通す + +前述のコマンドを実行すると、最後に`If you need to have node first in your PATH, run:`というメッセージが出るので、これに続くコマンドを実行してください。 + +3. バージョンを確認 + +```zsh +$ node -v +``` + +上記のコマンドを実行して、バージョン番号が表示されれば OK。 + +
+
+ +#### Windows(WSL) + +```bash +$ curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash - +$ sudo apt-get install -y nodejs +``` + +バージョンを確認します。 + +```bash +$ node -v +``` + +を実行して、バージョン番号が表示されれば OK。 +
+ +### バージョン管理を考える + +Go のインストールにも用いた asdf を用いてインストールすることで、プロジェクトごとに自動で手元の Node.js のバージョンを変えることができます。 + +```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/ @@ -139,6 +270,7 @@ Mac は M1/M2 の場合、 Apple Chip を、Intel の場合、Intel Chip を選 ::: ### WSL2の追加設定 + #### WSL Backendの有効化 1. 右上の歯車アイコンから `Resources` => `WSL Integration` に移動する。 @@ -147,3 +279,14 @@ Mac は M1/M2 の場合、 Apple Chip を、Intel の場合、Intel Chip を選 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/) + + diff --git a/docs/chapter1/section2/0_vue-intro.md b/docs/chapter1/section2/0_vue-intro.md index fad0fb9c..89da35be 100644 --- a/docs/chapter1/section2/0_vue-intro.md +++ b/docs/chapter1/section2/0_vue-intro.md @@ -19,61 +19,6 @@ $ git clone git@github.com:traPtitech/traQ.git ::: -## Node.jsの導入 -Vue を使うために、Node.js を入れます。自分の環境に合わせたものを選んで実行してください。 - -### 簡単 -前の章で asdf を使って Go をインストールした人はこちらではなくて、「バージョン管理を考える」の方を見てください。 -#### mac -1. Homebrew を用いてインストール - -```zsh -$ brew install node -``` -2. PATH を通す - -前述のコマンドを実行すると、最後に`If you need to have node first in your PATH, run:`というメッセージが出るので、これに続くコマンドを実行してください。 - -3. バージョンを確認 - -```zsh -$ node -v -``` - -上記のコマンドを実行して、バージョン番号が表示されれば OK。 - -#### Windows(WSL) - -```bash -$ curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash - -$ sudo apt-get install -y nodejs -``` - -バージョンを確認します。 - -```bash -$ node -v -``` - -を実行して、バージョン番号が表示されれば OK。 - -### バージョン管理を考える -Go のインストールにも用いた asdf を用いてインストールすることで、プロジェクトごとに自動で手元の Node.js のバージョンを変えることができます。 - -```bash -$ asdf plugin add nodejs -$ asdf install nodejs latest -$ asdf global nodejs latest -``` - -これで、デフォルトで現在出ている最新のバージョンが適用されるようになりました。 - -```bash -$ node -v -``` - -を実行して、バージョン番号が表示されれば OK。 - ## Vue テンプレートのクローン `~/develop`ディレクトリの中にテンプレートリポジトリをクローンしてプログラムを書きます。 @@ -243,26 +188,6 @@ HelloWorld コンポーネントを読み込み → 登録 → 描画してい Chrome Devtool に Vue 向けのデバッグ機能を追加してくれます。 [Vue devtools - Chrome ウェブストア](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja) -#### ESLint - -座学編で紹介した、VSCode の拡張機能。 -コードの書き方をチェックしてくれます。 -[ESLint - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - -#### Prettier - -座学編で紹介した、VSCode の拡張機能。 -コードのフォーマットを整えてくれます。 -保存時に自動で実行されるような設定をしておくと便利です。 -[Prettier - Code formatter - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - -#### Volar - -VSCode の Vue3 向けの統合プラグイン。 -[Vue Language Features (Volar) - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=vue.volar) - -インストールが終わったら、反映させるために VSCode を 1 度閉じて開きなおしてください。 - ### ソースコードの書き進め方 `npm run dev`で起動していれば、ファイルの変更を自動で検知して表示が更新されます。 diff --git a/docs/chapter1/section3/1_json-response.md b/docs/chapter1/section3/1_json-response.md index 4e544860..01202f27 100644 --- a/docs/chapter1/section3/1_json-response.md +++ b/docs/chapter1/section3/1_json-response.md @@ -37,11 +37,6 @@ type jsonData struct { ## Postmanでリクエストしてみよう -### Postmanのインストール -[Postman | API Development Environment](https://www.getpostman.com/) は GUI で HTTP リクエストを行えるアプリケーションです。 - -[ダウンロードページ](https://www.postman.com/downloads/) - Postman を起動したら、workspace を作成して移動し、`Ctrl + N`->`HTTP`または`Overview`タブの横にある`+`を押して、リクエスト設定画面を開きます。 ![](assets/postman.png) diff --git a/docs/chapter1/section4/0_prepare.md b/docs/chapter1/section4/0_prepare.md index 84f6f812..d8cfaa01 100644 --- a/docs/chapter1/section4/0_prepare.md +++ b/docs/chapter1/section4/0_prepare.md @@ -8,35 +8,6 @@ これができたら自分の手元にリポジトリをクローンし、`cd`コマンドでクローンしたリポジトリを開きましょう。 -## Taskのインストール - -Go をインストールした方法に応じて、以下をコマンドラインで実行してください。 - -:::code-group - -```sh [asdf (WSL, Mac)] -go run github.com/go-task/task/v3/cmd/task@latest init -asdf reshim golang -``` - -```sh [直接 (WSL, Mac)] -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) - -::: - ## データベースを立ち上げる この講習会では、「Docker」と呼ばれるコンテナ型仮想環境に MariaDB を載せて使います。Docker は開発でよく使う便利なものですが、今は理解できなくても大丈夫です。インストールした「Docker Desktop」を立ち上げてください。これ以降もデータベースを使う作業をする際は必ず「Docker Desktop」を立ち上げてください。 From 08438ec2878b1279d7a3aa7012bb1dda6bdee0ac Mon Sep 17 00:00:00 2001 From: Pugma Date: Thu, 23 May 2024 09:08:00 +0900 Subject: [PATCH 2/9] =?UTF-8?q?windows=20/=20mac=20=E3=81=A7=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA=E9=A0=85=E7=9B=AE=E3=82=92=E5=A4=89=E3=81=88=E3=82=8B?= =?UTF-8?q?=E3=82=88=E3=81=86=E3=81=AB=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/chapter1/section1/0_setup.md | 33 ++++++++++++++++++++----------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/docs/chapter1/section1/0_setup.md b/docs/chapter1/section1/0_setup.md index f633a568..0457d02e 100644 --- a/docs/chapter1/section1/0_setup.md +++ b/docs/chapter1/section1/0_setup.md @@ -11,25 +11,26 @@ Windows: `Winキー + Shift + S`を押すと、矩形選択でスクリーンシ ::: :::warning +コマンドは手入力ではなく、コピー & ペースト で入力してください。 +手入力だと写し間違いの可能性があります。 +この際、1 行ずつコピーするようにしてください。 +::: + +## 事前準備 + +:::info 以下の作業では、Mac と Windows で手順が違います。 まずは自分の PC の OS を以下から選んでください。
+
::: -:::warning -コマンドは手入力ではなく、コピー & ペースト で入力してください。 -手入力だと写し間違いの可能性があります。 -この際、1 行ずつコピーするようにしてください。 -::: - -## 事前準備 -

WSL の導入

@@ -56,6 +57,8 @@ Homebrew とは、様々なアプリケーションをインストールしや 参考: https://brew.sh/index_ja
+
+ ## VSCode の導入 すでに VSCode をインストールしている方はこの手順を飛ばして大丈夫です。 @@ -118,6 +121,7 @@ sudo rm -rf /usr/local/go && sudo tar -C /usr/local -xzf go1.22.2.linux-amd64.ta echo 'export PATH=$PATH:/usr/local/go/bin' >> ~/.bash_profile source ~/.bash_profile ``` +
### with asdf(バージョン管理ツール) @@ -265,20 +269,25 @@ $ node -v https://www.docker.com/products/docker-desktop/ 上のリンクからそれぞれの OS にあったものをダウンロードしてインストールしてください。 +
+ :::info Mac は M1/M2 の場合、 Apple Chip を、Intel の場合、Intel Chip を選択してください。 ::: -### WSL2の追加設定 +
+ +
-#### WSL Backendの有効化 +

WSL2の追加設定 - WSL Backend の有効化

1. 右上の歯車アイコンから `Resources` => `WSL Integration` に移動する。 -2. `Enable integration with my default WSL distro`にチェックを入れる。 +2. `Enable integration with my default WSL distro`にチェックを入れる。 3. 下に出てくる Distro をすべて有効化する。 4. 最後に、右下の `Apply & Restart` をクリックして設定は完了です。 ![WSL Integration](./images/setup-wsl-backend.png) +
## Postmanのインストール @@ -286,6 +295,8 @@ Mac は M1/M2 の場合、 Apple Chip を、Intel の場合、Intel Chip を選 [ダウンロードページ](https://www.postman.com/downloads/) + + From bd5706b4f97b223553ae2ecf620a19939ff5b754 Mon Sep 17 00:00:00 2001 From: Pugma Date: Fri, 7 Jun 2024 13:47:40 +0900 Subject: [PATCH 4/9] =?UTF-8?q?=E3=83=AA=E3=83=B3=E3=82=AF=E3=81=AE?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E3=81=A8lint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/chapter1/index.md | 6 ++++++ docs/chapter1/section1/1_hello-world.md | 3 ++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/docs/chapter1/index.md b/docs/chapter1/index.md index c507da5a..9f710d46 100644 --- a/docs/chapter1/index.md +++ b/docs/chapter1/index.md @@ -1,3 +1,9 @@ +--- +next: + text: 'きれいなコードを書くために' + link: './dicts/clean-code/0_index.md' +--- + # はじめに Web エンジニアになろう講習会へようこそ。 diff --git a/docs/chapter1/section1/1_hello-world.md b/docs/chapter1/section1/1_hello-world.md index 5718a41f..dc7e99b7 100644 --- a/docs/chapter1/section1/1_hello-world.md +++ b/docs/chapter1/section1/1_hello-world.md @@ -3,6 +3,7 @@ `~/develop/go-hello`ディレクトリの中にプログラムを作成します。 ## VSCodeで`~/develop/go-hello`ディレクトリを開く + - ディレクトリ作成 `mkdir -p ~/develop/go-hello` @@ -12,7 +13,6 @@ - vscode を開く `code .` - ## `main.go`の作成 - `main.go`を作成する @@ -28,6 +28,7 @@ `go run main.go` うまくできれば結果は次のようになります。 + ```bash hijiki51@DESKTOP-JF9KJFE:~/develop/go-hello$ go run main.go Hello, World! From 9da0902a263f2859d12c99f8e935f8f04ea69975 Mon Sep 17 00:00:00 2001 From: Pugma Date: Fri, 7 Jun 2024 14:15:08 +0900 Subject: [PATCH 5/9] =?UTF-8?q?=E3=83=9A=E3=83=BC=E3=82=B8=E3=82=92?= =?UTF-8?q?=E5=88=86=E5=89=B2=E3=81=97=E3=81=A6=E3=81=9D=E3=82=8C=E3=82=92?= =?UTF-8?q?=E5=8F=8D=E6=98=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chapters/chapter1/sections/section1.ts | 5 +- .../{0_setup.md => 0_setup-windows.md} | 203 ++---------------- docs/chapter1/section1/1_setup-unix.md | 160 ++++++++++++++ .../{1_hello-world.md => 2_hello-world.md} | 0 4 files changed, 181 insertions(+), 187 deletions(-) rename docs/chapter1/section1/{0_setup.md => 0_setup-windows.md} (60%) create mode 100644 docs/chapter1/section1/1_setup-unix.md rename docs/chapter1/section1/{1_hello-world.md => 2_hello-world.md} (100%) diff --git a/docs/.vitepress/sidebarConfigs/chapters/chapter1/sections/section1.ts b/docs/.vitepress/sidebarConfigs/chapters/chapter1/sections/section1.ts index 954e0418..20c6564b 100644 --- a/docs/.vitepress/sidebarConfigs/chapters/chapter1/sections/section1.ts +++ b/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' } ] diff --git a/docs/chapter1/section1/0_setup.md b/docs/chapter1/section1/0_setup-windows.md similarity index 60% rename from docs/chapter1/section1/0_setup.md rename to docs/chapter1/section1/0_setup-windows.md index 4c48711d..2cd268a9 100644 --- a/docs/chapter1/section1/0_setup.md +++ b/docs/chapter1/section1/0_setup-windows.md @@ -1,4 +1,4 @@ -# 環境構築 +# 環境構築 (windows) [[toc]] @@ -10,36 +10,13 @@ ## 事前準備 -:::info -以下の作業では、Mac と Windows で手順が違います。 -まずは自分の PC の OS を以下から選んでください。 - -
- - -
- - -
-::: - ::: tip 質問をするときにはできるだけスクリーンショットを貼るようにしましょう。テキストだけで説明しても解決に必要な情報を全て伝えるのは難しいです。 -
- `Control + Shift + Command + 4`を押すと、矩形選択でスクリーンショットが撮れます。 traQ のメッセージ入力欄に`Command + V`で貼り付けられます。 - -
-
- -`Winキー + Shift + S`を押すと、矩形選択でスクリーンショットが撮れます。 traQ のメッセージ入力欄に`Ctrl + V`で貼り付けられます。 - -
::: -
-

WSL の導入

+### WSL の導入 すでに WSL をインストールしている方はこの手順を飛ばして大丈夫です。 @@ -48,23 +25,6 @@ WSL は Windows 上で Linux を動かすための仕組みで、`Windows Subsys 以下のページの Step 1 を行ってください。 Step 2 以降は行わなくて大丈夫です。 https://pg-basic.trap.show/text/chapter-0/enviroment/windows.html#step-1-install-wsl -
- -
-

Homebrew の導入

- -`ターミナル`アプリを開いて、以下のコマンドを貼り付け、`return`キーを押して実行してください。 - -Homebrew とは、様々なアプリケーションをインストールしやすくし、アップデートなどもやりやすくするためのソフトです。 - -```bash -/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" -``` - -参考: https://brew.sh/index_ja -
- -
## VSCode の導入 @@ -90,74 +50,11 @@ VSCode は拡張機能により様々な言語でのプログラミングをラ インストールが終わったら、反映させるために VSCode を 1 度閉じて開きなおしてください。 -## asdf の導入 (任意) - -asdf とは、一つのプログラムの複数のバージョンを PC 内で管理できるようにするものです。 -それ以外にもあとからバージョンを更新するのが容易にもなるので長期的に見るとオススメです。 -しかし、本講習会で必須というわけではないので任意とします。 - -:::info -以下の作業では、asdf を使うかどうかで手順が違います。 -どちらか一方を選んで次の作業に移ってください。 - -
- - -
- - -
-::: - -
- -[公式資料](https://asdf-vm.com/#/core-manage-asdf) - -以下のコマンドにより asdf の導入を行います。 - -
- -``` bash [Windows(WSL2)] -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 -``` - -
-
- -``` zsh [Mac] -brew install asdf -echo -e '\n. $(brew --prefix asdf)/libexec/asdf.sh' >> ${ZDOTDIR:-~}/.zshrc -source ~/.zshrc -``` - -
- -
- -
- ## Go と Task のインストール ここでは、Go というプログラミング言語の導入をします。 この講習会では Go という言語でサーバーサイドの制作を行います。 -
-
- -先ほど導入した Homebrew を用いてインストールします。 - -```bash -brew install go@1.22 -``` - -
- -
- ``` bash sudo apt install tar git wget https://go.dev/dl/go1.22.3.linux-amd64.tar.gz @@ -166,8 +63,6 @@ echo 'export PATH=$PATH:/usr/local/go/bin' >> ~/.bash_profile source ~/.bash_profile ``` -
- ここまでで、以下のコマンドを実行して ```bash @@ -181,34 +76,6 @@ go version go run github.com/go-task/task/v3/cmd/task@latest init ``` -
- -
- -``` bash -asdf plugin add golang -asdf install golang 1.22.3 -asdf global golang 1.22.3 -go run github.com/go-task/task/v3/cmd/task@latest init -asdf reshim golang -``` - -ここまでで、以下のコマンドを実行して - -```bash -go version -``` - -`go version go1.22.3`と表示されれば Go の導入は完了。 - -```bash -task --version -``` - -と入力して`Task version: 3.37.2`と表示されれば Task の導入も完了です。 - -
- :::info 詳しく知りたい人向け。 **`Task`って何だ。** @@ -223,7 +90,7 @@ Task GitHub [https://github.com/go-task/task](https://github.com/go-task/task) ### Go のツールのインストール -VSCode で`Ctrl`+`Shift`+`P``Command`+`Shift`+`P`を押して出てくるコマンドパレットに`gotools`と入力して、出てきた「Go: Install/Update Tools」をクリックしてください。 +VSCode で `Ctrl`+`Shift`+`P` を押して出てくるコマンドパレットに`gotools`と入力して、出てきた「Go: Install/Update Tools」をクリックしてください。 ![](images/vscode_gotools.png) @@ -235,37 +102,27 @@ VSCode で`Ctrl`+`Shift`+`P` +## asdf の導入 -
- -以下のコマンドで、Homebrew を用いてインストールします。 - -```zsh -brew install node -``` +asdf とは、一つのプログラムの複数のバージョンを PC 内で管理できるようにするものです。 +それ以外にもあとからバージョンを更新するのが容易にもなるので長期的に見るとオススメです。 -このコマンドを実行すると、最後に`If you need to have node first in your PATH, run:`というメッセージが出るので、これに続くコマンドを実行してください。 +[公式資料](https://asdf-vm.com/#/core-manage-asdf) -
-
+以下のコマンドにより asdf の導入を行います。 -```bash -curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash - -sudo apt-get install -y nodejs +``` 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の導入 -asdf を用いてインストールすると、プロジェクトごとに自動で手元の Node.js のバージョンを変えることができます。 +Vue を使うために、Node.js を入れます。 +この講習会では、クライアントサイドを Vue を用いて制作します。 ```bash asdf plugin add nodejs @@ -275,9 +132,6 @@ asdf global nodejs latest これで、デフォルトで現在出ている最新のバージョンが適用されるようになりました。 -
- -
ここで、インストールが正常にできているかを確認します。 ```bash @@ -285,24 +139,13 @@ node -v ``` を実行して、バージョン番号が表示されれば OK。 -
## Docker Desktopのインストール https://www.docker.com/products/docker-desktop/ 上のリンクからそれぞれの OS にあったものをダウンロードしてインストールしてください。 -
- -:::info -Mac は M1/M2 の場合、 Apple Chip を、Intel の場合、Intel Chip を選択してください。 -::: - -
- -
- -

WSL2の追加設定 - WSL Backend の有効化

+### WSL2の追加設定 - WSL Backend の有効化 1. 右上の歯車アイコンから `Resources` => `WSL Integration` に移動する。 2. `Enable integration with my default WSL distro`にチェックを入れる。 @@ -310,19 +153,9 @@ Mac は M1/M2 の場合、 Apple Chip を、Intel の場合、Intel Chip を選 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/) - -
- - - diff --git a/docs/chapter1/section1/1_setup-unix.md b/docs/chapter1/section1/1_setup-unix.md new file mode 100644 index 00000000..bb55b7b3 --- /dev/null +++ b/docs/chapter1/section1/1_setup-unix.md @@ -0,0 +1,160 @@ +# 環境構築 (macOS) + +[[toc]] + +:::warning +コマンドは手入力ではなく、コピー & ペースト で入力してください。 +手入力だと写し間違いの可能性があります。 +この際、1 行ずつコピーするようにしてください。 +::: + +## 事前準備 + +::: tip +質問をするときにはできるだけスクリーンショットを貼るようにしましょう。テキストだけで説明しても解決に必要な情報を全て伝えるのは難しいです。 + +`Winキー + Shift + S`を押すと、矩形選択でスクリーンショットが撮れます。 traQ のメッセージ入力欄に`Ctrl + V`で貼り付けられます。 +::: + +### Homebrew の導入 + +`ターミナル`アプリを開いて、以下のコマンドを貼り付け、`return`キーを押して実行してください。 + +Homebrew とは、様々なアプリケーションをインストールしやすくし、アップデートなどもやりやすくするためのソフトです。 + +```bash +/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" +``` + +参考: https://brew.sh/index_ja + +## 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 という言語でサーバーサイドの制作を行います。 + +先ほど導入した Homebrew を用いてインストールします。 + +```bash +brew install go@1.22 +``` + +ここまでで、以下のコマンドを実行して + +```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 で `Command`+`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 内で管理できるようにするものです。 +それ以外にもあとからバージョンを更新するのが容易にもなるので長期的に見るとオススメです。 +しかし、本講習会で必須というわけではないので任意とします。 + +:::info +以下の作業では、asdf を使うかどうかで手順が違います。 +どちらか一方を選んで次の作業に移ってください。 +::: + +[公式資料](https://asdf-vm.com/#/core-manage-asdf) + +以下のコマンドにより asdf の導入を行います。 + +``` zsh [Mac] +brew install asdf +echo -e '\n. $(brew --prefix asdf)/libexec/asdf.sh' >> ${ZDOTDIR:-~}/.zshrc +source ~/.zshrc +``` + +## 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 にあったものをダウンロードしてインストールしてください。 + +:::info +Mac は M1/M2 の場合、 Apple Chip を、Intel の場合、Intel Chip を選択してください。 +::: + +## Postmanのインストール + +[Postman | API Development Environment](https://www.getpostman.com/) は GUI で HTTP リクエストを行えるアプリケーションです。 + +[ダウンロードページ](https://www.postman.com/downloads/) diff --git a/docs/chapter1/section1/1_hello-world.md b/docs/chapter1/section1/2_hello-world.md similarity index 100% rename from docs/chapter1/section1/1_hello-world.md rename to docs/chapter1/section1/2_hello-world.md From 162002f88378b37ef672c5b9660a3a103473fe1e Mon Sep 17 00:00:00 2001 From: Pugma <132571355+Pugma@users.noreply.github.com> Date: Fri, 7 Jun 2024 15:17:12 +0900 Subject: [PATCH 6/9] Update docs/chapter1/section1/0_setup-windows.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit OSを指定するように Co-authored-by: alt--er <119784456+alter334@users.noreply.github.com> --- docs/chapter1/section1/0_setup-windows.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/chapter1/section1/0_setup-windows.md b/docs/chapter1/section1/0_setup-windows.md index 2cd268a9..36be0bb3 100644 --- a/docs/chapter1/section1/0_setup-windows.md +++ b/docs/chapter1/section1/0_setup-windows.md @@ -30,7 +30,7 @@ https://pg-basic.trap.show/text/chapter-0/enviroment/windows.html#step-1-install すでに VSCode をインストールしている方はこの手順を飛ばして大丈夫です。 -以下のサイトから使用している OS に合った VSCode のインストーラーをダウンロードして、それを実行してインストールしてください。 +以下のサイトから`windows`の VSCode のインストーラーをダウンロードして、それを実行してインストールしてください。 https://code.visualstudio.com/download From 84f0be89c6538e38d70955f9d2452e86e524ed1d Mon Sep 17 00:00:00 2001 From: alt--er <119784456+alter334@users.noreply.github.com> Date: Fri, 7 Jun 2024 17:43:34 +0900 Subject: [PATCH 7/9] Update docs/chapter1/section1/0_setup-windows.md --- docs/chapter1/section1/0_setup-windows.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/chapter1/section1/0_setup-windows.md b/docs/chapter1/section1/0_setup-windows.md index 36be0bb3..6de9e778 100644 --- a/docs/chapter1/section1/0_setup-windows.md +++ b/docs/chapter1/section1/0_setup-windows.md @@ -13,7 +13,7 @@ ::: tip 質問をするときにはできるだけスクリーンショットを貼るようにしましょう。テキストだけで説明しても解決に必要な情報を全て伝えるのは難しいです。 -`Control + Shift + Command + 4`を押すと、矩形選択でスクリーンショットが撮れます。 traQ のメッセージ入力欄に`Command + V`で貼り付けられます。 +`Windowsキー+Shift+s`を押すと、矩形選択でスクリーンショットが撮れます。 traQ のメッセージ入力欄に`Ctrl + V`で貼り付けられます。 ::: ### WSL の導入 From 97bc78000e42a3663e1d28a27582cfef8af76c8b Mon Sep 17 00:00:00 2001 From: alt--er <119784456+alter334@users.noreply.github.com> Date: Fri, 7 Jun 2024 17:45:13 +0900 Subject: [PATCH 8/9] Update docs/chapter1/section1/1_setup-unix.md --- docs/chapter1/section1/1_setup-unix.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/chapter1/section1/1_setup-unix.md b/docs/chapter1/section1/1_setup-unix.md index bb55b7b3..fadd8685 100644 --- a/docs/chapter1/section1/1_setup-unix.md +++ b/docs/chapter1/section1/1_setup-unix.md @@ -13,7 +13,7 @@ ::: tip 質問をするときにはできるだけスクリーンショットを貼るようにしましょう。テキストだけで説明しても解決に必要な情報を全て伝えるのは難しいです。 -`Winキー + Shift + S`を押すと、矩形選択でスクリーンショットが撮れます。 traQ のメッセージ入力欄に`Ctrl + V`で貼り付けられます。 +`Control + Shift + Command + 4`を押すと、矩形選択でスクリーンショットが撮れます。 traQ のメッセージ入力欄に` Command + V`で貼り付けられます。 ::: ### Homebrew の導入 From 44f7733add077affc5a00eb0966ea0de8ba813a5 Mon Sep 17 00:00:00 2001 From: alt--er <119784456+alter334@users.noreply.github.com> Date: Fri, 7 Jun 2024 17:46:28 +0900 Subject: [PATCH 9/9] Update docs/chapter1/section1/1_setup-unix.md --- docs/chapter1/section1/1_setup-unix.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/chapter1/section1/1_setup-unix.md b/docs/chapter1/section1/1_setup-unix.md index fadd8685..3d4ed27c 100644 --- a/docs/chapter1/section1/1_setup-unix.md +++ b/docs/chapter1/section1/1_setup-unix.md @@ -32,7 +32,7 @@ Homebrew とは、様々なアプリケーションをインストールしや すでに VSCode をインストールしている方はこの手順を飛ばして大丈夫です。 -以下のサイトから使用している OS に合った VSCode のインストーラーをダウンロードして、それを実行してインストールしてください。 +以下のサイトから`macOS`の VSCodeインストーラーをダウンロードして、それを実行してインストールしてください。 https://code.visualstudio.com/download