ReactとDjangoを連携してWeb開発を始める方法

フルスタック開発•2025/1/24

はじめに

Webアプリケーションを作成するときには、フロントエンドとバックエンドの役割を分担させるケースが多いです。バックエンドにDjangoを使い、フロントエンドにReactを組み合わせると、効率よく開発を進めやすくなります。また、DjangoはPythonベースで幅広い機能をもつフレームワークなので、業務システムから個人プロジェクトまで幅広いジャンルで利用されています。 Reactはコンポーネント単位で画面を構築できるので、ユーザーインターフェイスを柔軟に作成しやすいです。この組み合わせを使うことで、モダンなWebアプリケーションの開発がしやすくなるのではないでしょうか？

ここでは、ReactとDjangoそれぞれの特徴を整理し、実際にどう連携できるのかを具体的に説明します。特にプログラミング未経験の方や初心者の方がイメージを持ちやすいように、できるだけ平易な言葉で進めていきます。

ReactとDjangoの特徴

ReactとDjangoはまったく別の役割をもつ技術ですが、組み合わせると互いの得意分野をうまく活かすことができます。ここでは、両者がどのような強みをもつのかを見ていきましょう。

Reactの基本

ReactはJavaScriptライブラリで、UIを効率よく構築するための仕組みを提供します。 Virtual DOMという仕組みによって画面描画を高速化でき、ユーザーからの操作に素早く反応するようなアプリケーションを実現しやすいです。コンポーネントを組み合わせる形で画面を構築するため、再利用性が高いUIパーツを作ることができます。たとえば、ボタンや入力フォームなどを部品化して管理できるので、デザインの一貫性を保ちやすいです。

また、ReactはReact Routerや各種状態管理ライブラリとの組み合わせがしやすいです。これにより、単ページアプリケーション（SPA）を構築する流れで、URLのルーティングや状態管理をスムーズに行えます。最新のバージョンReact 18系では、コンポーネントのレンダリングパフォーマンスも一段と向上しています。

Djangoの基本

DjangoはPythonで書かれたWebフレームワークです。プロジェクト作成からデータベース操作、管理画面の構築まで、豊富な機能が一通り揃っています。大きな特徴としては、URLルーティングやORM（Object-Relational Mapping）によるデータベース操作などが標準で備わっている点が挙げられます。そのため、バックエンド開発のベース構築が素早く行えることが魅力です。

Djangoのバージョン4系（例：4.2系）はPython 3との相性がよく、セキュリティアップデートや機能拡張の面でも活発に更新されています。 Djangoには、デフォルトでテンプレートエンジンやユーザーモデルなども含まれていて、アカウント管理機能を必要とするアプリケーションにも適しています。さらに、必要に応じて追加パッケージ（REST API構築用のDjango REST Frameworkなど）を導入しやすい環境が整っています。

ReactとDjangoを組み合わせる主な理由

ここまででReactはUI構築、Djangoはバックエンド全般に強みがあることがわかりました。実際の業務では、フロントエンド側はリアルタイム性や操作性を重視し、バックエンド側はデータベース連携や認証などをしっかり管理する必要があります。 ReactとDjangoを組み合わせる主な理由としては以下の点が挙げられます。

UIを独立して作れる
柔軟なAPI設計ができる
Djangoの豊富なライブラリを利用しやすい
リソースが充実しており、必要な情報にアクセスしやすい

Reactはフロントエンドに特化した開発方式を取り入れやすく、UIを自由にデザインできます。一方でDjangoは業務ロジックやデータベースとのやり取りを集中管理しやすく、分業体制での開発が行いやすいです。これらを組み合わせることで、画面とサーバーサイドの両方を同時並行で作りやすくなるのではないでしょうか？

フロントエンドとバックエンドのつなぎ方

ReactとDjangoを連携するときは、基本的にHTTPを介してデータをやり取りします。ここでは、データの受け渡しに使われるAPIの考え方と、それに伴うCORSの設定について説明します。

APIの役割

Reactアプリケーションは、バックエンドにリクエストを送って必要な情報を取得したり、ユーザーが入力したデータをサーバーへ送信したりします。このとき、バックエンド側のDjangoがAPIとして振る舞い、JSON形式などでデータを返すのが一般的です。

もしAPIがなければ、Reactから直接データベースにアクセスする必要が出てきますが、これはセキュリティリスクや設計の煩雑さを招く原因となります。バックエンドがAPIとして窓口を一本化していれば、データのやり取りや認証の仕組みを管理しやすいです。

CORSへの対処

Reactの開発サーバー（例えばlocalhost:3000）とDjangoの開発サーバー（localhost:8000）が別ドメインになっている場合、ブラウザがセキュリティ上の理由でリクエストをブロックしてしまうことがあります。これを CORS (Cross-Origin Resource Sharing)と呼びます。

CORSエラーを回避するためには、Django側で特定のドメインからのアクセスを許可する設定を行います。これは設定ファイルや追加パッケージを導入する形で実施でき、Reactの開発サーバーのURLをホワイトリストに追加する仕組みがよく使われます。

開発時にはCORS設定を雑にしてしまいがちですが、本番環境では安全のためにアクセス先を厳密に制限することが重要です。

簡単な連携の手順

ここからは、ReactとDjangoを連携する流れを大まかに見ていきましょう。最新のReact 18系とDjango 4系を前提としていますが、基本的な考え方はバージョンが異なっても大きく変わりません。

Djangoでのプロジェクト作成

まずはDjangoプロジェクトを用意します。以下のコマンドを実行すると、新しいDjangoプロジェクトが作成されます。


pip install django
django-admin startproject myproject
cd myproject
python manage.py runserver

実行後にブラウザでhttp://127.0.0.1:8000へアクセスすると、Djangoのトップページが表示されるはずです。

次に、アプリケーションを作成してAPIの入り口を設定します。 Django REST Frameworkを使う例として、以下のようなアプリケーションを追加することが考えられます。


pip install djangorestframework
python manage.py startapp api

作成されたapiディレクトリの中で、ビューやシリアライザを定義していくイメージです。

具体例: Django REST Framework

たとえば、api/views.pyに以下のような簡単なビューを書きます。


from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(["GET"])
def hello_world(request):
    data = {"message": "Hello from Django!"}
    return Response(data)

urls.pyにパスを追加しておくと、/api/hello/のエンドポイントでメッセージを返せます。こうしたAPIを複数用意して、ReactからGETやPOSTメソッドでアクセスする形が基本的な流れです。

Reactでのプロジェクト作成

フロントエンド側はReactのツールチェーン（Create React AppやViteなど）を使うのが簡単です。以下はCreate React Appを使う場合の例です。


npx create-react-app myreactapp
cd myreactapp
npm start

同じくブラウザでhttp://localhost:3000にアクセスすると、Reactの開発用画面が表示されます。これでフロントエンドとバックエンドを別々に立ち上げながら開発を進められます。

データのやり取り

Reactアプリケーションは、JavaScriptのfetch関数やAxiosなどを使ってDjangoのAPIへリクエストを送ります。たとえば、以下のコードがコンポーネントからAPIを呼び出す例です。


import React, { useEffect, useState } from "react";

function HelloMessage() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    fetch("http://127.0.0.1:8000/api/hello/")
      .then((response) => response.json())
      .then((data) => {
        setMessage(data.message);
      })
      .catch((error) => {
        console.error("エラーが発生しました:", error);
      });
  }, []);

  return (
    <div>
      <h2>APIからのメッセージ</h2>
      <p>{message}</p>
    </div>
  );
}

export default HelloMessage;

ここでは、/api/hello/を呼び出し、返ってきたJSONデータからmessageを取り出して表示しています。 Django側でレスポンスをJSON形式にしておけば、React側から扱いやすい形で受け取れます。

認証について

ユーザーのログインや認証を扱う場合、Django側でトークン認証やセッション認証を設定することが多いです。 Reactはブラウザ上で動くため、認証用の情報をローカルストレージやCookieなどに保存してやり取りします。 Django REST Frameworkには認証機能を拡張できる仕組みが用意されているため、APIと組み合わせて認可の制御を行う方法が一般的です。

認証情報を扱うときは、セキュリティに関わる設定を忘れないようにすることが大切です。

運用・開発でのポイント

ReactとDjangoを連携するアプリケーションを運用に載せる場合、以下のようなポイントを検討する必要があります。

バンドル方法の検討
デプロイ先の構成
開発フローの整理

Reactはビルドした成果物を静的なファイルとしてまとめられますが、Djangoのテンプレート内に直接組み込むのか、あるいは別々のホスティング環境で運用するのかを考えるのが一般的です。例えば、DjangoはバックエンドサーバーとしてPaaS上で稼働させ、Reactは静的サイトホスティングサービスで配信する例もよく見られます。

また、複数人で開発するときには、APIの仕様をSwaggerなどのツールを使ってドキュメント化しておくと役割分担がしやすいです。 ReactチームとDjangoチームそれぞれで開発を進めても、APIの仕様がはっきりしていればデータの受け渡しで混乱しにくいからです。

まとめ

ReactとDjangoの連携は、フロントエンドとバックエンドを切り離す設計がしやすくなるというメリットがあります。特に、Djangoが持つ豊富な機能とPythonの書きやすさに加え、ReactのUI構築のしやすさが合わさることで、初心者でも取り組みやすい環境になるのではないでしょうか？

APIを通じてデータのやり取りを行う設計を意識しておけば、認証などの複雑な処理をバックエンド側に集中させられます。一方で、フロントエンド側はUIの改善やユーザビリティ向上に専念できるので、チーム開発にも向いています。

もしReactとDjangoを同時に学ぶ場合には、基礎的な使い方や簡単な実装例に触れてみるのが一歩目としておすすめです。日常的な小さなアプリケーションからでも、フロントとバックエンドを分けて運用する感覚をつかんでおくと、後々の本格開発にもスムーズに対応しやすくなります。