Skip to content

Record / Server Side

React の基礎、Django 連携

React の基礎、Django 連携

JavaScriptはウェブの基本言語で、ブラウザー上で標準で直接動くプログラミング言語はJavaScriptだけです。

TypeScriptはJavaScriptを拡張した言語で、コードを書く時点で型をチェックが必要で、コンパイル（トランスパイル）を行ってJavaScriptに変換します。TypeScriptは型定義により大規模開発でのエラー防止やコード品質向上、可読性向上が実現されています。

Reactの仕組みについて

Reactとは？

ReactはFacebookが開発したJavaScriptライブラリで、ユーザーインターフェース（UI）を構築するために使われます。特に、動的で複雑なWebアプリケーションを効率的に作成できるのが特徴です。

開発時にNode.js

開発環境での役割：

  • パッケージ管理： npm（Node Package Manager）を使って、Reactや関連ライブラリをインストール・管理します
  • 開発サーバー： 開発中にローカルでアプリを実行し、リアルタイムで変更を確認できます
  • ビルドツール： JSXやES6+の最新JavaScript構文を、ブラウザが理解できる形式に変換（トランスパイル）します
  • バンドル： 複数のファイルを1つにまとめて、読み込み速度を最適化します

重要なポイント： Node.jsは開発時のみ必要で、サーバー側で動作するわけではありません。

本番環境での動作

最終的には純粋なJavaScript、HTML、CSSになります。

ビルドプロセス：

  1. npm run build コマンドを実行
  2. Reactのコードがブラウザで動作する純粋なJavaScript（ES5互換）に変換される
  3. 最適化された静的ファイル（HTML、CSS、JS）が生成される
  4. これらのファイルを通常のWebサーバー（Apache、Nginx、静的ホスティングサービスなど）に配置

結果： 本番環境ではNode.jsは不要。生成された静的ファイルをブラウザが読み込むだけで動作します。

Reactの基本的な仕組み

コンポーネントベース：

  • UIを再利用可能な部品（コンポーネント）に分割
  • 各コンポーネントは独立して管理できる

仮想DOM（Virtual DOM）：

  • 実際のDOMの軽量コピーをメモリ上に保持
  • 変更があった場合、仮想DOMで差分を計算
  • 必要な部分だけを実際のDOMに反映（高速化）

JSX：

  • JavaScriptの中にHTML風の構文を書ける
  • ビルド時に純粋なJavaScriptに変換される

開発から本番までの流れ

# 1. プロジェクト作成（開発開始）
npx create-react-app my-app
cd my-app

# 2. 開発サーバー起動（開発中）
npm start
# → Node.jsがローカルサーバーを起動
# → http://localhost:3000 でアプリが動く

# 3. ビルド（本番用ファイル生成）
npm run build
# → buildフォルダに静的ファイルが生成される

# 4. デプロイ（本番公開）
# buildフォルダの内容をWebサーバーにアップロード
# → もうNode.jsは不要！純粋なHTML/CSS/JSとして動作

React と Django 連携

# Reactのビルド
cd /var/www/django-5/frontend
npm run build

# Django側でReactビルドファイルを配信する設定
# settings.pyに追加
vi /var/www/django-5/myproject/settings.py

# settings.pyに追加する内容:
# 既存のSTATIC設定の下に追加
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'frontend/build/static'),
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'frontend/build')],
        # ... 以下省略
    },
]

React と Django の連携について

ReactとDjangoを連携させる方法は、DjangoをバックエンドAPI、Reactをフロントエンドとして使う構成が一般的です。以下、詳しく解説します。

連携の基本的な考え方

2つの主な連携方法：

  1. 完全分離型（推奨）： DjangoはAPIのみ提供、Reactは別ドメインで動作
  2. 統合型： DjangoがReactのビルドファイルを配信

統合型の解説

  1. Reactのビルド
cd /var/www/django-5/frontend
npm run build
  • Reactアプリを本番用の静的ファイル（HTML、CSS、JS）に変換
  • frontend/build/ フォルダに生成される
  1. Django設定の変更

STATICFILES_DIRSの設定：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'frontend/build/static'),
]
  • Reactのビルドで生成されたJSやCSSファイル（staticフォルダ内）をDjangoが配信できるようにする
  • Djangoの {% static %} タグでこれらのファイルにアクセス可能になる

TEMPLATESの設定：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'frontend/build')],
        # ...
    },
]
  • Reactのビルドで生成された index.html をDjangoのテンプレートとして使えるようにする
  • Djangoのビューから index.html をレンダリングできる

Djangoのビュー設定

Reactアプリを表示するためのビューを追加：

# views.py
from django.views.generic import TemplateView

class ReactAppView(TemplateView):
    template_name = 'index.html'
# urls.py
from django.urls import path, re_path
from .views import ReactAppView

urlpatterns = [
    # APIエンドポイント
    path('api/', include('api.urls')),
    
    # Reactアプリ（すべてのルートをReactに渡す）
    re_path(r'^.*$', ReactAppView.as_view(), name='react'),
]

全体の動作フロー

ユーザーがブラウザでアクセス
    ↓
Djangoが index.html を返す（Reactのエントリーポイント）
    ↓
ブラウザが index.html を読み込む
    ↓
HTML内の <script> タグでReactのJSファイルを読み込む
    ↓
Reactアプリがブラウザで動作開始
    ↓
必要に応じてDjangoのAPIエンドポイント（/api/...）にリクエスト
    ↓
DjangoがJSON形式でデータを返す
    ↓
Reactがデータを受け取って画面を更新

API連携の例

Django側（APIエンドポイント）：

# Django REST frameworkを使用
# api/views.py
from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
def get_data(api_view):
    data = {'message': 'Hello from Django!'}
    return Response(data)
# api/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('data/', views.get_data, name='get_data'),
]

React側（APIリクエスト）：

// React component
import React, { useEffect, useState } from 'react';

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

  useEffect(() => {
    // DjangoのAPIエンドポイントにリクエスト
    fetch('/api/data/')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    &lt;div&gt;
      &lt;h1&gt;{data ? data.message : 'Loading...'}&lt;/h1&gt;
    &lt;/div&gt;
  );
}

export default App;

開発時の注意点

開発中はReactの開発サーバーを使用：

# React開発サーバー（ポート3000）
cd frontend
npm start

# Django開発サーバー（ポート8000）
python manage.py runserver

CORS設定が必要：

# settings.py
INSTALLED_APPS = [
    # ...
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    # ...
]

# 開発時のみ
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

本番環境では：

  • Reactをビルドして、Djangoが配信（あなたの設定）
  • 同一オリジンになるのでCORS不要

ディレクトリ構成例

/var/www/django-5/
├── myproject/              # Djangoプロジェクト
│   ├── settings.py
│   ├── urls.py
│   └── ...
├── api/                    # Django REST API
│   ├── views.py
│   ├── urls.py
│   └── ...
├── frontend/               # Reactアプリ
│   ├── public/
│   ├── src/
│   ├── build/             # ビルド後の静的ファイル
│   │   ├── index.html
│   │   └── static/
│   │       ├── css/
│   │       └── js/
│   ├── package.json
│   └── ...
└── manage.py

デプロイの流れ

# 1. Reactをビルド
cd /var/www/django-5/frontend
npm run build

# 2. Djangoの静的ファイルを収集
cd /var/www/django-5
python manage.py collectstatic

# 3. Djangoを再起動（例：Gunicorn）
sudo systemctl restart gunicorn

# 4. Webサーバー（Nginx）の設定確認
# staticファイルはNginxから直接配信することも可能

まとめ

  • 開発時： ReactとDjangoは別々のサーバーで動作（CORSが必要）
  • 本番時： Reactをビルドして、Djangoが静的ファイルとして配信
  • データのやり取り： DjangoのAPIエンドポイント経由でJSON形式
  • メリット： Reactの豊富なUIコンポーネント + Djangoの強力なバックエンド機能

この構成により、モダンなSPA（Single Page Application）とサーバーサイドの機能を組み合わせた、パワフルなWebアプリケーションが構築できます！

Back to Discoveries