【初心者向け】viteを用いたreact × fastAPIの環境構築方法

# 目次
- [はじめに](#はじめに)
- [Viteとは？](#viteとは)
- [Reactの雛形の作り方](#reactの雛形の作り方)
- [ReactとFastAPIとの連携方法](#reactとfastapiとの連携方法)
- [まとめ](#まとめ)

## はじめに
こんにちは。
この記事では、ViteとReact、そしてFastAPIを使った開発環境のセットアップ方法について説明します。最近、モダンなウェブ開発を始めようと思っていて、自分用メモとしてこの記事を残します。（この記事はあくまで自分用なので、細かい部分は適宜更新していきます。もし修正箇所があればしてしていただけると幸いです...）
しかし、自分はこの方法で環境構築に成功したので、Viteを使ってReactのプロジェクトを作成し、FastAPIと連携する方法を探している方の少しの参考にはなると思います！

## Viteとは？
Vite（ヴィート）は、ウェブ開発のためのツールです。特に、開発中のサーバーを素早く立ち上げたり、コードの変更をリアルタイムで反映するのが得意です。以下にViteのメリット３つを簡単にまとめました。（詳しいviteのメリットは後ほど記事にまとめたい）

- **速いスタートアップ**：開発サーバーがすぐに立ち上がる。
- **高速な開発**：コードの変更がすぐに反映される。
- **最新技術の活用**：ESモジュールやesbuildなどを利用して効率化。

## Reactの雛形の作り方
では、本題に入ります。
まず、Viteを使ってReactのプロジェクトを作成する手順を説明します。

1. **Node.jsをインストール**
   - まず、Node.jsがインストールされているか確認します。インストールされていない場合は、[Node.js公式サイト](https://nodejs.org/)からインストールしてください。
   - インストールしたかを確かめたい人は、Nodeのバージョン確認をして結果が返ってくればokです。
     ```bash
     npm -v
     # v21.6.2などとかエアされればインストール済み
     ```



2. **Viteプロジェクトを作成**
   - ターミナルを開いて、以下のコマンドを実行します：
     ```bash
     npm create vite@latest
     ```
   - プロジェクトの名前を聞かれるので、適当に入力します。
     ```bash
     Need to install the following packages:
     create-vite@5.3.0
     Ok to proceed? (y) 
     ✔ Project name: … 
     ```
   - 次に、フレームワークを聞かれるので、「React」を選びます。
     ```bash
     Select a framework: › - Use arrow-keys. Return to submit.
     Vanilla
     Vue
     ❯   React
     Preact
     Lit
     Svelte
     Solid
     Qwik
     Others
     ```
   - なんか、variantを聞かれたので、javascriptにします。（初心者に優しい）
     ```bash
     ? Select a variant: › - Use arrow-keys. Return to submit
     TypeScript
     TypeScript + SWC
     ❯   JavaScript
     JavaScript + SWC
     Remix ↗
     ```

3. **依存関係※をインストール**
   - プロジェクトディレクトリに移動し、依存関係をインストールします：
     ```bash
     cd プロジェクト名
     npm install
     ```
    ※依存関係とは、具体的にpackage.json ファイルのことで、React、Express、FastAPI などのフレームワークやライブラリのバージョンが適切な状態になるように管理するものです

4. **開発サーバーを起動**
   - 開発サーバーを起動して、プロジェクトをブラウザで確認します：
     ```bash
     npm run dev
     ```
   - ブラウザで `http://localhost:5173` にアクセスすると、Reactの初期画面が表示されます。

## ReactとFastAPIとの連携方法
次に、ReactとFastAPIを連携させる手順を説明します。

1. **FastAPIプロジェクトのセットアップ**
   - 別のディレクトリ（reactの雛形を作ったのと同じ階層）でFastAPIプロジェクトをセットアップします：
     ```bash
     mkdir fastapi-backend
     cd fastapi-backend
     python3 -m venv venv
     source venv/bin/activate  # Windowsの場合は `venv\Scripts\activate`
     pip install fastapi uvicorn
     ```

2. **FastAPIアプリケーションの作成**
   - `main.py` というファイルを作成し、以下のように設定します：
     ```python
     from fastapi import FastAPI
     from fastapi.middleware.cors import CORSMiddleware

     app = FastAPI()

     app.add_middleware(
         CORSMiddleware,
         allow_origins=["*"],
         allow_credentials=True,
         allow_methods=["*"],
         allow_headers=["*"],
     )

     @app.get("/")
     async def read_root():
         return {"message": "Hello from FastAPI!"}

     @app.get("/api/data")
     async def get_data():
         return {"data": "This is some data from FastAPI"}
     ```

3. **FastAPIサーバーを起動**
   - ターミナルで以下のコマンドを実行してFastAPIサーバーを起動します：
     ```bash
     uvicorn main:app --reload
     ```

4. **ReactからAPIを呼び出す**
   - Reactプロジェクト内で、以下のようにFastAPIのエンドポイントを呼び出します：
     ```javascript
     import React, { useEffect, useState } from 'react';

     function App() {
       const [data, setData] = useState(null);

       useEffect(() => {
         fetch('http://localhost:8000/api/data')
           .then(response => response.json())
           .then(data => setData(data));
       }, []);

       return (
         <div>
           <h1>Hello from Vite!</h1>
           {data && <p>{data.data}</p>}
         </div>
       );
     }

     export default App;
     ```

5. **Vite開発サーバーを起動**
   - ターミナルで以下のコマンドを実行してViteの開発サーバーを起動します：
     ```bash
     npm run dev
     ```

## まとめ
この記事では、Viteを使ったReactのプロジェクト作成と、FastAPIとの連携方法について説明しました。まだまだ完全ではないので、必要に応じて追記していきます。何か気づいたことがあれば、どんどん更新していく予定です。