【Next.js × FastAPI】ライブ情報検索アプリ開発とGitHubを使ったチーム開発の手順まとめ

ハッカソンで、Next.js (フロントエンド) と FastAPI (バックエンド) を使ったライブ情報検索アプリを開発しています。
その中で実施した「バックエンドの起動設定」「UIライブラリの導入」、そして「友達とGitHubで共同開発する際の手順」について自分の復習用としてまとめます。

1. FastAPI: `python Main.py` で起動できるようにする

通常： uvicorn Main:app --reload のようなコマンドで起動
変更： python Main.py だけでサーバーを起動できるようにする

if __name__ == "__main__":
    import uvicorn
    # "Main:app" は「Main.pyのappというFastAPIインスタンス」という意味
    uvicorn.run("Main:app", host="127.0.0.1", port=8000, reload=True)

2. Next.js: shadcn/ui の導入でUI構築を爆速化

Tailwind CSSのHTMLタグに一からクラスを当てる手間を省くため、急速に利用者が増えているshadcn/ui を導入した。

パッケージのインストールと初期化

ターミナルで以下のコマンドを実行し、プロジェクトに導入する。

npx shadcn@latest init

# アプリで必要なコンポーネントのみをダウンロード
npx shadcn@latest add button
npx shadcn@latest add input

3. GitHubを使ったチーム開発の進め方

今回、自分がリポジトリ所有者で、もう一人のメンバーがログイン機能を担当したので、その際のGit/GitHubの連携手順をまとめました。

パターン1：友達をリポジトリの共同開発者（Collaborator）に追加する（おすすめ）

メンバーをCollaboratorに追加し、権限URLを共有する
- GitHubのリポジトリ画面 Settings → Collaborators → Add people と進み、メンバーのGitHubアカウントを追加
- 編集権限を承認するための招待URL（Pending inviteのリンク）をコピーしてメンバーに直接送る。メンバーがそのURLを開いて承認することで、初めてpush権限が付与される
メンバーがローカルに環境を作り、ブランチを切る
- メンバーのPCでリポジトリをクローンし、作業用のブランチを作成する
```
git clone "https://github.com/あなた/repository.git"
git switch -c feature/login
```
メンバーが開発してpushする
- 開発が終わったらコミットし、GitHubへプッシュする。
```
git add .
git commit -m "ログイン機能実装"
git push origin feature/login
```
Pull Request（PR）を作成し、私がMergeする
- メンバーがpull requestを作成します。
- 私がコードをレビューし、問題なければマージする

今後の方針

UIを改善する
app下のフォルダ構成を機能ごとに作成する
スケルトンUIの導入
トースト通知
Vercelなどへデプロイ

そろそろ終わらなくなってきたので、上手くAIを使いながらの方針にシフトしていきます。頑張りましょう。