【ITニュース解説】Building Your First Full-Stack CRUD App with FastAPI and React.js

このニュース記事は、FastAPIとReact.jsを使って、CRUD（Create、Read、Update、Delete）機能を備えたフルスタックWebアプリケーションを初めて構築する人向けの入門ガイドだ。Webアプリケーションの裏側でデータがどのように作成、表示、更新、削除されるのか疑問に思ったことはないだろうか。この記事では、バックエンドにFastAPI、フロントエンドにReact.jsを使用し、作成したアプリケーションをインターネットに公開する方法を解説する。

まず、アイテム管理システムを構築する。このシステムでは、名前と説明を持つ新しいアイテムを追加したり、アイテムを一覧表示したり、既存のアイテムを編集したり、不要なアイテムを削除したりできる。

始める前に、PythonとJavaScriptの基本的な知識、Python 3.7以上、Node.jsとnpmがインストールされている必要がある。テキストエディタはVS Codeが推奨されている。

バックエンドはFastAPIで構築する。FastAPIは、PythonでAPIを構築するための高速Webフレームワークだ。自動でインタラクティブなドキュメントが生成されるため、初心者にも適している。

最初に、プロジェクトのディレクトリ構造を作成する。ターミナルを開き、mkdir crud-appでメインのプロジェクトディレクトリを作成し、cd crud-appでそのディレクトリに移動する。次に、python -m venv venvで仮想環境を作成する。仮想環境は、プロジェクトの依存関係を他のPythonプロジェクトから分離するために使用する。

仮想環境をアクティブにするには、macOS/Linuxではsource venv/bin/activate、Windowsではvenv\Scripts\activateを実行する。仮想環境がアクティブになると、ターミナルのプロンプトの先頭に(venv)が表示される。

次に、必要なパッケージをインストールする。pip install fastapi uvicorn sqlalchemy aiosqliteを実行して、FastAPI本体、FastAPIアプリケーションを実行するサーバーであるuvicorn、データベース操作を支援するsqlalchemy、そしてSQLiteと非同期的に通信するためのaiosqliteをインストールする。

次に、バックエンドのファイルを作成する。crud-appディレクトリの中にbackendディレクトリを作成し、その中にmain.py、database.py、models.py、schemas.pyの4つのファイルを作成する。

database.pyでは、データベースの設定を行う。SQLiteを使用し、データベースエンジンを作成し、データベースセッションのためのSessionLocalクラスを作成し、モデルのベースクラスを作成する。

models.pyでは、Itemモデルを定義する。これは、データベース内のitemsテーブルに対応し、id、name、descriptionの3つのカラムを持つ。

schemas.pyでは、Pydanticスキーマを定義する。スキーマは、APIとの間で送受信されるデータの構造を定義するために使用される。ItemCreateは新しいアイテムを作成するときに、Itemはデータを返すときに使用される。

main.pyでは、FastAPIアプリケーションを作成し、CRUD操作のためのエンドポイントを定義する。各エンドポイントは、特定のHTTPメソッド（POST、GET、PUT、DELETE）に対応する。Depends(get_db)は、各リクエストに対してデータベースセッションを提供する。CORSミドルウェアは、Reactフロントエンドがバックエンドと通信できるようにする。

バックエンドサーバーを実行するには、cd backendでbackendディレクトリに移動し、uvicorn main:app --reloadを実行する。これで、APIがhttp://localhost:8000で実行される。http://localhost:8000/docsにアクセスすると、FastAPIによって自動生成されたインタラクティブなドキュメントが表示される。

フロントエンドはReact.jsで構築する。Reactは、ユーザーインターフェースを構築するためのJavaScriptライブラリだ。

プロジェクトのルートディレクトリから、npx create-react-app frontendを実行して、新しいReactアプリケーションを作成する。次に、cd frontendでfrontendディレクトリに移動する。

API呼び出しのためにAxiosをインストールする。npm install axiosを実行する。Axiosは、バックエンドAPIにHTTPリクエストを送信するためのライブラリだ。

src/App.jsの内容を、この記事で提供されているコードに置き換える。このコードでは、Reactのフック（useState、useEffect）を使用して、状態と副作用を管理する。API_BASEはバックエンドサーバーを指す。各関数は、Axiosを使用してAPI呼び出しを行い、それに応じてUIを更新する。

src/App.cssの内容も、この記事で提供されているCSSコードに置き換える。

Reactアプリケーションを実行するには、npm startを実行する。Reactアプリがhttp://localhost:3000で開かれる。これで、アイテムの追加、表示、編集、削除ができるようになる。

フロントエンドとバックエンドは、HTTPリクエストを介して接続される。ReactフロントエンドはAxiosを使用して特定のURLにリクエストを送信し、FastAPIバックエンドはこれらのリクエストをリッスンし、処理し、レスポンスを返す。Reactフロントエンドは、レスポンスに基づいてUIを更新する。

アプリケーションをインターネットに公開するには、HerokuまたはNetlifyを使用する。Herokuは、アプリケーションのデプロイを容易にするプラットフォームだ。Netlifyは、フロントエンドのデプロイに特に適している。

Herokuにバックエンドをデプロイするには、Heroku CLIをインストールし、ログインする。requirements.txtファイルを作成し、Procfileを作成する。次に、Gitリポジトリを初期化し、コードをコミットし、Herokuアプリを作成し、コードをHerokuにプッシュする。

フロントエンドをHerokuにデプロイするには、プロダクションビルドを作成し、serveパッケージをインストールし、Procfileを作成する。次に、ReactアプリのAPI_BASEをデプロイされたバックエンドを指すように更新し、Gitリポジトリを初期化し、コードをコミットし、Herokuアプリを作成し、コードをHerokuにプッシュする。

Netlifyを使用する場合は、Reactアプリをビルドし、buildフォルダをnetlify.comにドラッグアンドドロップする。次に、API_BASEをデプロイされたバックエンドを指すように更新する。

初心者のためのベストプラクティスとしては、コードを整理し、環境変数を使用し、エラー処理を追加し、コードにコメントを追加し、バージョン管理を使用し、段階的に開発し、一般的な問題をトラブルシューティングすることが挙げられる。

次のステップとしては、ユーザー認証を追加したり、より複雑なデータ関係を実装したり、画像アップロード機能を追加したり、UIを改善したり、フォーム検証を追加したりできる。