Zenn
🌐

Reactのルーティングについて

2024/01/20に公開
django
React
Web
http
#
routing
tech

はじめに

ReactとDjangoでwebアプリを開発していて、React-Django間のhttp通信の仕組みがよく分かっていなかったので記事にすることにしました。
本記事では、ReactからDjangoサーバーにリクエストを送信し、レスポンスされるまでを説明します。
体系的にどういった仕組みで動いているのか理解するとより開発が楽しくなると思います。

１．Reactからのリクエスト

Reactアプリケーションは、fetchや他のHTTPクライアントライブラリを使用して、Djangoサーバーに対してHTTPリクエストを送信します。このリクエストには、必要に応じてリクエストメソッド（GET、POSTなど）、ヘッダー、ボディデータなどが含まれます。
以下の例では、'http://localhost:8000/Taberu/test/' に対してGETリクエストを送っています。
HomePageコンポーネントで<h1>要素に設定したクリックイベント関数（handleClick）を定義しています。

HomePage.js
import React from 'react';
import './HomePage.css'; // HomePage-specific styles

function HomePage() {
  async function handleClick(){
    try{
      const response = await fetch('http://localhost:8000/Taberu/test/');
      console.log(response);
    }catch(error){
      console.error("Error during fetch: ", error);
    }
  }
  return (
    <div className="home">
      <h1 onClick={handleClick}>Welcome to the Taberu App</h1>
      <p>This is the Taberu. Click the links above to navigate.</p>
    </div>
  );
}

export default HomePage;

２．DjangoでのURLルーティング

Djangoサーバーではこのリクエストを受け取り、'urls.py'に定義されたURLパターンと照合します。'include()'メソッドによって特定のアプリケーション(このケースでは'Taberu')の'urls.py'にリクエストがルーティングされます。

config/urls.py
path('Taberu/', include("Taberu.urls", namespace="Taberu")),

３．Djangoビューの処理

一致するURLパターンが見つかると、Djangoはリクエストを対応するビュー（このケースではTestAPIView）に渡します。ビューはリクエストを処理し、適切なレスポンスを生成します。

views.py
class TestAPIView(APIView):
    def get(self, request, *args, **kwargs):
        # 何らかの処理
        return Response({"message": "Hello from TestAPIView"})

４．レスポンスの返送

Djangoビューによって生成されたレスポンスは、HTTPレスポンスとしてクライアント（この場合はReactアプリケーション）に返されます。通常、このレスポンスにはステータスコード、ヘッダー、レスポンスボディ（この例ではJSONデータ）が含まれます。

５．Reactでのレスポンスの処理

Reactアプリケーションはレスポンスを受け取り、それを処理します。例えば、レスポンスデータをコンソールに出力したり、アプリケーションの状態を更新したりします。
以下では、Djangoサーバーから受け取ったresponseオブジェクトをコンソール上に表示する処理です。

HomPage.js
async function handleClick(){
    try{
      const response = await fetch('http://localhost:8000/Taberu/test/');
      console.log(response);
    }catch(error){
      console.error("Error during fetch: ", error);
    }
  }

以上が、ReactからDjangoへのリクエストとレスポンスの一連の流れです。このプロセスは、フロントエンドとバックエンド間の基本的なインタラクションを表しており、現代のWeb開発において非常に一般的なパターンです。

Discussion