React の基礎、Django 連携
#プログラミング

created: 2026/01/01, modified: 2026/01/04

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になります。

ビルドプロセス：

`npm run build` コマンドを実行
Reactのコードがブラウザで動作する純粋なJavaScript（ES5互換）に変換される
最適化された静的ファイル（HTML、CSS、JS）が生成される
これらのファイルを通常の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つの主な連携方法：

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

統合型の解説

Reactのビルド

cd /var/www/django-5/frontend
npm run build

Reactアプリを本番用の静的ファイル（HTML、CSS、JS）に変換
`frontend/build/` フォルダに生成される

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アプリケーションが構築できます！

React の基礎、Django 連携 #プログラミング