Windows で FastAPI + Vue を動かす

Windows で FastAPI + Vue を動かす

今日のゴール: FastAPI と Vue.js を同時に起動する

first-step / ch02-windows-setup

対象

項目	内容
OS	Windows 10 / 11
想定学習者	Python も Node.js も入っていない初期状態の人
所要時間	60 分
完走時の状態	PowerShell から FastAPI (port 8000) と Vue (port 5173) を 2 つのターミナルで同時起動できる

> ⚠️ WSL2 を使える人は ch01-uv-mise を推奨。

> 本書は WSL2 を使わない / 使えない Windows ネイティブ環境向け。

今日やること

ステップ	内容
Step 1	VS Code をインストールする
Step 2	Python をインストールする
Step 3	Node.js をインストールする
Step 4	Git をインストールする
Step 5	Git の初期設定をする
Step 6	FastAPI を venv + uvicorn で起動する
Step 7	Vue.js を npm + Vite で起動する
Step 8	2 つを同時起動して疎通確認

> ⚠️ インストールが必要なのは 4 つだけ (VS Code / Python / Node.js / Git)。 他は不要。

PowerShell の開き方

1. キーボードの Windows キー を押す
2. 「PowerShell」 と入力する
3. 「Windows PowerShell」 をクリック

> 青い画面が開けば OK。

コマンドの打ち方

青い画面 (= PowerShell) が開いたら:

1. キーボードで文字を入力する
2. Enter キー を押す

python --version

↑ これを入力して Enter を押す。

Step 1: VS Code をインストール

https://code.visualstudio.com/ を開いて 「Download for Windows」 をクリック。

インストーラーを実行する。

選択肢	設定
追加タスクの選択	「PATH への追加」 にチェックを入れる ⚠️
その他	デフォルトのまま

インストール後に VS Code が起動すれば OK。

Step 2: Python をインストール

https://www.python.org/downloads/ を開いて最新版 (3.11 以上) をダウンロード。

インストーラーを実行する。

> ⚠️ 「Add Python to PATH」 に必ずチェックを入れる

> チェックを入れないとコマンドが使えない

「Install Now」 をクリック。

Step 2: 確認する

PowerShell を開いて実行する:

python --version

Python 3.11.x が表示されれば OK。

> ⚠️ 「python は内部コマンドまたは外部コマンドとして認識されていません」 と出る場合は、

> Python インストール時の 「Add Python to PATH」 チェックを忘れている。 再インストールする。

Step 3: Node.js をインストール

https://nodejs.org/ を開いて LTS 版 (推奨版) をダウンロード。

インストーラーをデフォルト設定のまま実行する。

PowerShell を閉じて開き直してから 確認する:

node --version
npm --version

v18.x.x 以上 / 9.x.x 以上が表示されれば OK。

Step 4: Git をインストール

https://git-scm.com/download/win を開いてダウンロード。

インストール中の選択肢は すべてデフォルト で進む。

> ただし 「Choosing the default editor used by Git」 は VS Code を選ぶ

PowerShell を閉じて開き直してから 確認する:

git --version

git version 2.x.x が表示されれば OK。

確認: 4 つまとめて

4 つ全部確認できたか:

python --version; node --version; npm --version; git --version

4 行全部出れば OK。

Step 5: Git の初期設定

git config --global user.name "自分の名前"
git config --global user.email "自分のメールアドレス"

確認する:

git config --global --list

user.name と user.email が表示されれば OK。

> 自分のメールアドレス = GitHub に登録するアドレス と同じものにしておくと、 後の commit author 統一が楽。

Step 6: FastAPI を動かす

mkdir C:\dev\fastapi-practice
cd C:\dev\fastapi-practice
python -m venv .venv
.venv\Scripts\activate
pip install fastapi uvicorn

VS Code で C:\dev\fastapi-practice\main.py を開いて以下を入力:

from fastapi import FastAPI
app = FastAPI()

@app.get("/")
def root():
    return {"message": "Hello FastAPI"}

Step 6: 起動して確認

python -m uvicorn main:app --reload

ブラウザで http://localhost:8000/docs を開く。

Swagger UI が表示されれば OK。

> ⚠️ .venv\Scripts\activate で PowerShell の行頭に (.venv) が付いた状態で実行する。

> 別のターミナルで実行する場合は、 もう一度 cd C:\dev\fastapi-practice; .venv\Scripts\activate を打つ。

Step 7: Vue.js を動かす

新しい PowerShell を開いて 実行する (= Step 6 のターミナルは FastAPI が動いているのでそのまま):

cd C:\dev
npm create vue@latest my-tasks

選択肢はすべて No (= Enter キーを押すだけ)。

cd my-tasks
npm install
npm run dev

ブラウザで http://localhost:5173 を開いて Vue の画面が表示されれば OK。

Step 8: 完了条件

以下の 3 つをすべて満たしたら完了:

確認項目	結果
http://localhost:8000/docs の Swagger UI が見える	☐
http://localhost:5173 の Vue 初期画面が見える	☐
2 つが 同時に 起動している (= ターミナルを 2 つ並べた状態)	☐

詰まったら — コマンドが見つからない

まず PowerShell を閉じて開き直す:

python --version
node --version
git --version

開き直しても出ない場合は、 該当のインストーラを再実行して 「PATH に追加」 にチェックを入れ直す。

詰まったら — FastAPI が起動しない

ポート 8000 が使われている可能性がある:

python -m uvicorn main:app --reload --port 8001

確認 URL: http://localhost:8001/docs

ポートを既に何かが使っているか調べたい場合は:

Get-NetTCPConnection -LocalPort 8000

詰まったら — Vue.js が起動しない

Node.js のバージョンを確認:

node --version

v16 以下が表示された場合は、 Node.js を再ダウンロード (= LTS 版 v18 以上)。

ポート 5173 が使われている場合は別ポート:

npm run dev -- --port 5174

Windows 固有の落とし穴

落とし穴	対処
PATH 追加忘れ	再インストールで 「Add to PATH」 チェック
venv activate 忘れ	.venv\Scripts\activate を毎ターミナルで実行
日本語ファイル名で cp932 エラー	git config --global core.quotepath false / Python は encoding='utf-8' 明示
symlink が機能しない	Windows は管理者権限が要る / WSL2 を検討
パスの区切りが \ (= JS/Python のエスケープ)	raw string r"..." か / を使う

次に学ぶ領域

領域	続けて読む chapter
FastAPI の最初の API	fastapi-basic/ch01-hello
FastAPI の CRUD 一気通貫	app-memo/
FastAPI の DB 永続化	app-task-sqlite/
Vue の最初の SFC	frontend/vue/topics/vue-basic/ch01-sfc/

お疲れさま

PowerShell + 公式インストーラで FastAPI / Vue / Git が動く Windows 環境が手に入った。

次は 本物のコードを書く ステップへ。