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

目次

• はじめに
• Viteとは？
• Reactの雛形の作り方
• ReactとFastAPIとの連携方法
• まとめ

はじめに

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

Viteとは？

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

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

Reactの雛形の作り方

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

1. Node.jsをインストール

   • まず、Node.jsがインストールされているか確認します。インストールされていない場合は、Node.js公式サイトからインストールしてください。
   • インストールしたかを確かめたい人は、Nodeのバージョン確認をして結果が返ってくればokです。

     npm -v
     # v21.6.2などとかエアされればインストール済み
     

2. Viteプロジェクトを作成

   • ターミナルを開いて、以下のコマンドを実行します：

     npm create vite@latest
     

   • プロジェクトの名前を聞かれるので、適当に入力します。

     Need to install the following packages:
     create-vite@5.3.0
     Ok to proceed? (y) 
     ✔ Project name: … 
     

   • 次に、フレームワークを聞かれるので、「React」を選びます。

     Select a framework: › - Use arrow-keys. Return to submit.
     Vanilla
     Vue
     ❯   React
     Preact
     Lit
     Svelte
     Solid
     Qwik
     Others
     

   • なんか、variantを聞かれたので、javascriptにします。（初心者に優しい）

     ? Select a variant: › - Use arrow-keys. Return to submit
     TypeScript
     TypeScript + SWC
     ❯   JavaScript
     JavaScript + SWC
     Remix ↗
     

3. 依存関係※をインストール

   • プロジェクトディレクトリに移動し、依存関係をインストールします：

     cd プロジェクト名
     npm install
     

   ※依存関係とは、具体的にpackage.json ファイルのことで、React、Express、FastAPI などのフレームワークやライブラリのバージョンが適切な状態になるように管理するものです

4. 開発サーバーを起動

   • 開発サーバーを起動して、プロジェクトをブラウザで確認します：

     npm run dev
     

   • ブラウザで http://localhost:5173 にアクセスすると、Reactの初期画面が表示されます。

ReactとFastAPIとの連携方法

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

1. FastAPIプロジェクトのセットアップ

   • 別のディレクトリ（reactの雛形を作ったのと同じ階層）でFastAPIプロジェクトをセットアップします：

     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 というファイルを作成し、以下のように設定します：

     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サーバーを起動します：

     uvicorn main:app --reload
     

4. ReactからAPIを呼び出す

   • Reactプロジェクト内で、以下のようにFastAPIのエンドポイントを呼び出します：

     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の開発サーバーを起動します：

     npm run dev
     

まとめ

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