はじめに
みなさんこんにちは！B3の soma です。
普段、業務委託や個人開発でコードを書くとき、AIをバリバリ使っている方も多いと思います。
自分も普段はAIを使いながら開発することが多いです。
ただ、AIが便利になっているからこそ、
「基礎的な力ってやっぱり大事なのでは？」
と思いました。
そこで今回は、AIを使用せず、公式ドキュメントなどを読みながらTODOアプリを作っていきます！
今回は第1回として、フロントエンドとバックエンドの環境構築をやっていきます。
使用するもの
今回は主に以下の2つを使います。
- GitHub Desktop
- Visual Studio Code
構成は、
- Frontend：Vite + React + TypeScript
- Backend：Go
で進めていきます。
最終的なディレクトリ構成はざっくりこんな感じです。
todoapp/
├── frontend/
│ └── ...
└── backend/
└── ...
では、リポジトリ作成からやっていきましょう！
GitHubリポジトリを作る
GitHub Desktopを開き、
Add → Create a New Repository
からリポジトリを作成します。
今回は todoapp という名前で作成しました。
作成できたら Publish repository からGitHubへPublishします。
続いて、
Current Branch → New Branch
から develop ブランチを作成します。
こんな感じになったらOKです。
さらに develop から、フロントエンドの環境構築用ブランチを切ります。
feature/setup-frontend
VS Codeで、作成した todoapp リポジトリを開きましょう。
ここから環境構築をしていきます！
フロントエンドの環境構築
まずはフロントエンドから。
今回は Vite + React + TypeScript を使います。
Viteの公式ドキュメントを見ながら進めます。
今回はnpmを使うので、リポジトリのルートで以下を実行します。
npm create vite@latest
今回は以下のように選択しました。
こんな感じで選択しました。
作成できたら frontend に移動して、
cd frontend
npm install
npm run dev
ブラウザから、
http://localhost:5173/
にアクセスします。
Viteの画面が表示されたら無事に動作確認完了です！
React Routerを導入する
TODOアプリではページのルーティングもしたいので、React Routerを入れておきます。
公式ドキュメントを確認します。
インストール方法を見ると、
npm i react-router
とあるので、todoapp/frontend にいる状態で実行します。
npm i react-router
これでReact Routerの導入は完了です。
Tailwind CSSを導入する
続いてTailwind CSSです。
こちらも公式ドキュメントを見ながら進めます。
まずは、
npm install tailwindcss @tailwindcss/vite
を実行します。
続いて vite.config.ts を編集します。
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [react(), tailwindcss()],
})
そして App.css の先頭に、
@import "tailwindcss";
を追加します。
では、動作確認してみましょう。
App.tsx を以下のようにします。
import './App.css'
function App() {
return (
<>
<h1 className="text-3xl font-bold underline">
test
</h1>
</>
)
}
export default App
これで文字が大きく、太字＋下線になれば成功です。
無事失敗しました（笑）
なぜかTailwindが反映されません。
原因を探していると、
className='"text-3xl font-bold underline'
となっていました。
" が余計に入ってますね。
完全にタイポです（笑）
修正します。
className="text-3xl font-bold underline"
これでいける！
……と思ったら、まだ反映されません。
さらにいろいろ調べた結果、
VS CodeのAuto SaveがOFFでした。
つまり、途中からコード自体は合っていたんですね……。
Auto Saveを有効にして保存すると、
無事動作確認できました。
これでフロントエンドの環境構築完了です。
developにPRを出して、マージしましょう
無事動作確認できました！
こういうところも含めて、AIなし開発ですね（笑）
これでフロントエンドの環境構築は完了です。
developへマージする
環境構築が終わったので、変更をコミットします。
自分はこんな感じで分けました。
フロントエンドの環境構築
add react-router
add tailwind
そしたら、pushして、
developを選択して、
その後、Pull Requestを作成します。
Base branchには、
develop
を指定して、PRを作成します。
問題なければ、そのまま develop にマージします。
マージできたらGitHub Desktopに戻り、develop ブランチへ移動します。
Fetch origin → Pull origin
として、リモートの最新状態をローカルにも反映しておきます。
Fetch はリモートに新しい変更がないかを取得し、Pull はその変更をローカルブランチへ反映します。
続いてバックエンド用のブランチを作ります。
feature/setup-backend
最初から
feature/setup-frontend
feature/setup-backend
にしておけば分かりやすかったですね……。
では、バックエンドもやっていきます！
バックエンドの環境構築
続いてGoの環境構築をしていきます。
Goの公式ドキュメントを見ながら進めます。
自分はすでにGoをインストール済みなので、まだインストールしていない方は公式サイトを参考にインストールしてください。
インストールできているか確認します。
go version
バージョンが表示されればOKです。
Go Moduleを作成する
まず backend ディレクトリへ移動します。
cd backend
続いて、Go Moduleを作成します。
go mod init github.com/ユーザー名/todoapp/backend
自分の場合はGitHubのユーザー名が KEIDOROa なので、
go mod init github.com/KEIDOROa/todoapp/backend
としました。
実行すると go.mod が作成されます。
backend/
└── go.mod
なぜGitHubのURLを指定するの？
例えば、
go mod init todoapp/backend
のような名前でも動作します。
ただ今回はGitHubで管理するプロジェクトなので、
github.com/KEIDOROa/todoapp/backend
という、実際にコードが存在する場所をModule Pathにしています。
こうしておくことで、他のGoプロジェクトから取得・importするときにも、そのパッケージがどこに存在するのか分かりやすくなります。
今後、例えば、
backend/
├── main.go
├── handler/
│ └── todo.go
└── go.mod
という構成になった場合、
import "github.com/KEIDOROa/todoapp/backend/handler"
のように、自分で作ったパッケージをimportできます。
main.goを作成する
go mod init では main.go は自動で作成されないので、自分で作成します。
backend/
├── go.mod
└── main.go
今回は動作確認として、シンプルにHello Worldを書きます。
package main
import "fmt"
func main() {
fmt.Println("Hello, World!")
}
VS CodeのGo環境を整える
VS Codeの設定もしておきます。
File → Preferences → Settings
から設定を開きます。
右上にあるファイルアイコンのようなボタンから settings.json を開き、以下を追加します。
{
"go.formatTool": "goimports",
"go.toolsEnvVars": {
"GO111MODULE": "on"
}
}
続いて、
View → Command Palette
を開きます。
Go: Install/Update Tools
を検索します。
必要なGoのツールにチェックを入れてインストールします。
これでVS Code側の準備も完了です。
Goを動かしてみる
最後にターミナルから実行してみます。
backend ディレクトリで、
go run .
を実行します。
と表示されれば成功です！
これでやっと、
フロントエンド・バックエンド両方の環境構築が完了しました！！
バックエンドもdevelopへマージする
フロントエンドと同じように、バックエンドの変更もコミットしてPushします。
その後、
feature/setup-backend
↓
develop
のPull Requestを作成します。
問題なければマージしましょう！
最終的な構成
ここまでで、ざっくり以下のような構成になりました。
todoapp/
├── frontend/
│ ├── src/
│ ├── package.json
│ ├── vite.config.ts
│ └── ...
│
└── backend/
├── go.mod
└── main.go
Frontendは、
Vite
React
TypeScript
React Router
Tailwind CSS
Backendは、
Go
という構成です。
これでTODOアプリを作り始める準備が整いました！
おわりに
今回は、AIを使わずにTODOアプリを作る第1回として、環境構築を行いました。
普段AIを使っていると、エラーが出た瞬間にそのまま貼り付けて聞いてしまうことも多いですが、自分で公式ドキュメントを読んだり、原因を一つずつ確認したりするのも大事だなと思いました。
特に今回、
「Tailwindが動かない！」
といろいろ調べた結果、
Auto SaveがOFFだっただけ
というオチもありました（笑）
こういうミスも含めて、自分で原因を探す練習になればと思います。
次回から実際にTODOアプリの実装に入っていきます！