DjangoとReactで始めるモダンWeb開発入門

はじめに：モダンWeb開発とは？なぜDjangoとReactなのか？

Webアプリケーション開発の世界は常に進化しています。かつてはサーバー側で全ての処理と画面描画を行うモノリシックなアプリケーションが主流でした。しかし、ユーザー体験の向上への要求が高まるにつれて、よりリッチでインタラクティブなフロントエンド（ユーザーインターフェース）と、堅牢でスケーラブルなバックエンド（データの管理と処理）を組み合わせた「モダンWeb開発」が一般的になってきました。

モノリシックなアプリケーションとモダンWeb開発の違い

• モノリシック: サーバー側でHTMLを生成し、ブラウザに送信します。更新時にはページ全体が再読み込みされることが多く、インタラクティブな機能の実装には限界があります。
• モダンWeb開発: バックエンドはAPI（Application Programming Interface）としてデータを提供することに特化し、フロントエンドはAPIから取得したデータを基に動的にユーザーインターフェースを構築・更新します。これにより、ページ遷移なしでのスムーズな画面更新や、リッチなアニメーション、リアルタイム性の高い機能などが実現しやすくなります。フロントエンドとバックエンドが疎結合になるため、それぞれを独立して開発・デプロイすることも可能です。

なぜDjango（バックエンド）とReact（フロントエンド）の組み合わせなのか？

モダンWeb開発において、バックエンドとフロントエンドの技術選択は非常に多岐にわたります。その中でも、DjangoとReactの組み合わせは、それぞれの強みを活かし、多くのプロジェクトで採用されている人気のスタックです。

• Django (バックエンド): Pythonで書かれた高レベルなWebフレームワークです。「Batteries included」（必要なものが全て揃っている）という哲学のもと、データベース操作（ORM）、管理画面、認証機能、URLルーティングなど、Webアプリケーション開発に必要な多くの機能が標準で提供されています。これにより、開発者は基盤の構築に時間をかけることなく、アプリケーションの本質的な機能開発に集中できます。特にRESTful APIの構築においては、Django REST framework (DRF) という強力な拡張機能があり、効率的に高品質なAPIを開発できます。Pythonは学びやすく、データ処理や機械学習などの分野でも広く使われているため、バックエンドエンジニアにとって強力な選択肢となります。
• React (フロントエンド): Facebook（現Meta）が開発したJavaScriptライブラリで、ユーザーインターフェースを構築するために使われます。コンポーネント指向のアプローチを採用しており、UIを独立した再利用可能な部品として考え、それらを組み合わせて複雑なUIを構築します。仮想DOM（Virtual DOM）を採用しているため、UIの更新が高速で効率的です。Hooksなどのモダンな機能により、関数コンポーネントで状態管理やライフサイクル処理を記述できるようになり、コードの見通しが良くなりました。大規模なアプリケーション開発においても、その構造化された設計思想と豊富なコミュニティのサポートにより、高い開発生産性とメンテナンス性を実現できます。

この組み合わせのメリット

1. 生産性の高さ: Djangoの「必要なものが揃っている」思想とDRFによるAPI開発の効率性、そしてReactのコンポーネントベース開発によるUI構築の効率性の組み合わせは、迅速なアプリケーション開発を可能にします。
2. 堅牢性と信頼性: Djangoはセキュリティ機能が充実しており、大規模なアプリケーションにも対応できる実績があります。Reactも巨大なコミュニティによって支えられており、多くの企業で採用されている信頼性の高いライブラリです。
3. 分離された開発: バックエンドとフロントエンドがAPIを介して通信するため、それぞれのチームが独立して開発を進められます。これにより、開発の並行化や、将来的な技術スタックの変更（例：フロントエンドを別のフレームワークに載せ替える）が容易になります。
4. モダンなユーザー体験: Reactを使用することで、SPA (Single Page Application) のような、ページ全体をリロードせずに動的にコンテンツを更新する、スムーズでレスポンシブなユーザー体験を提供できます。

この組み合わせは、特に管理画面を持つような業務アプリケーションや、動的なコンテンツ配信が必要なWebサイト、あるいはモバイルアプリのバックエンドとしてAPIを提供するようなプロジェクトに適しています。

本記事では、このDjangoとReactを使ったモダンWeb開発を始めるために必要な知識と手順を、具体的なコード例を交えながら詳細に解説していきます。まずはそれぞれの技術要素のセットアップから始め、次にそれぞれの基本的な使い方、そして最後に両者を組み合わせてAPIを通じて通信させる方法を見ていきましょう。

Part 1: 開発環境の準備

開発を始める前に、いくつかのツールをインストールする必要があります。

1. Pythonと仮想環境

DjangoはPythonで動作します。また、プロジェクトごとに独立した環境を構築するために仮想環境（Virtual Environment）を使用するのが一般的かつ強く推奨されます。

• Pythonのインストール: 公式サイトからダウンロードするか、OSのパッケージマネージャー（macOS: Homebrew, Windows: Chocolatey/WSL, Linux: apt/yumなど）を使ってインストールします。Python 3.8以上のバージョンを推奨します。
  “`bash
  # macOS (with Homebrew)
  brew install python

  Windows (with Chocolatey)

  choco install python

  Linux (Debian/Ubuntu)

  sudo apt update
  sudo apt install python3 python3-venv
  インストール後、以下のコマンドでバージョンを確認してください。bash
  python3 –version
  pip3 –version
  ``pythonコマンドがPython 3を指しているか、あるいはpython3コマンドを使用してください。pip` コマンドについても同様です。

• 仮想環境の作成と有効化: Python 3.3以降には venv という仮想環境モジュールが標準で付属しています。プロジェクトのルートディレクトリとなるフォルダ（例: myproject）を作成し、その中で仮想環境を作成します。
  “`bash
  mkdir myproject
  cd myproject

  仮想環境の作成 (‘.venv’ という名前で作成するのが一般的)

  python3 -m venv .venv

  仮想環境の有効化 (macOS/Linux)

  source .venv/bin/activate

  仮想環境の有効化 (Windows – Command Prompt)

  .venv\Scripts\activate

  仮想環境の有効化 (Windows – PowerShell)

  .venv\Scripts\Activate.ps1
  ``
仮想環境が有効になると、ターミナルのプロンプトの先頭に仮想環境の名前（例:(.venv)`）が表示されます。この状態でインストールされるPythonパッケージは、この仮想環境内にのみインストールされ、システムのPython環境とは分離されます。

  仮想環境を終了するには deactivate コマンドを使用します。

2. Node.jsとnpm/yarn/pnpm

ReactはJavaScriptで書かれたライブラリであり、Node.js環境でビルドや開発サーバーの実行を行います。パッケージ管理にはnpm (Node Package Manager)、yarn、またはpnpmを使用します。

• Node.jsのインストール: 公式サイトからダウンロードするか、OSのパッケージマネージャーを使用します。LTS (Long Term Support) バージョンを推奨します。nvm (Node Version Manager) などのツールを使ってNode.jsのバージョンを管理するのも良い方法です。
  “`bash
  # macOS (with Homebrew)
  brew install node

  Windows (with Chocolatey)

  choco install nodejs

  Linux (Debian/Ubuntu – 公式リポジトリからのインストール方法を推奨)

  例: Node.js公式サイトの指示に従ってください

  インストール後、以下のコマンドでバージョンを確認してください。bash
  node –version
  npm –version

  または

  yarn –version (yarnをインストールした場合)

  pnpm –version (pnpmをインストールした場合)

  “`

3. コードエディタ

Python、JavaScript、HTML、CSSなどを記述するための高機能なコードエディタが必要です。Visual Studio Code (VS Code) は無料で高機能なため、多くの開発者に利用されています。DjangoやReact向けの拡張機能も豊富に用意されています。

• Visual Studio Code: 公式サイトからダウンロードしてインストールします。Python、ESLint、Prettierなどの拡張機能を入れておくと開発が捗ります。

4. データベース

Djangoは様々なデータベースに対応していますが、開発中は軽量なSQLiteがデフォルトで使用されます。小規模なアプリケーションや学習目的であればSQLiteで十分ですが、本格的なアプリケーション開発や複数人での開発、本番環境ではPostgreSQLやMySQLなどのより堅牢なデータベースを使用することが一般的です。

• SQLite: Pythonに標準で付属しているため、追加のインストールは不要です。
• PostgreSQL/MySQL: 必要に応じてインストールしてください。本記事では、開発中の説明としてSQLiteを使用します。

5. APIテストツール

バックエンド（Django API）が正しく動作しているか確認するために、APIをテストするツールがあると便利です。

• Postman, Insomnia: APIリクエストを送信し、レスポンスを確認できるGUIツールです。
• curl: コマンドラインツールです。
• ブラウザの開発者ツール: GETリクエストの確認など、簡単なテストに使えます。

以上のツールを準備できれば、DjangoとReactを使った開発を始める準備が整いました。

Part 2: DjangoによるバックエンドAPIの構築

まずはバックエンドであるDjangoプロジェクトを構築し、簡単なRESTful APIを作成します。ここでは、例としてシンプルな「タスク管理」アプリケーションを想定し、タスクの一覧取得、詳細取得、作成、更新、削除ができるAPIを作成します。

1. Djangoプロジェクトの作成

仮想環境が有効になっていることを確認し、Djangoをインストールします。
bash
(.venv) pip install django djangorestframework django-cors-headers
* django: Djangoフレームワーク本体
* djangorestframework: DjangoでRESTful APIを構築するための強力なライブラリ (DRF)
* django-cors-headers: フロントエンド（React）からバックエンド（Django）へのHTTPリクエストを許可するためのCORS (Cross-Origin Resource Sharing) 設定を簡単に行うためのライブラリ

次に、Djangoプロジェクトを作成します。プロジェクト名は backend とします。
bash
(.venv) django-admin startproject backend .
カレントディレクトリ (.) にプロジェクトを作成するコマンドです。これにより、myproject ディレクトリ直下にbackendという名前のプロジェクト設定フォルダとmanage.pyファイルが作成されます。

ディレクトリ構成は以下のようになります。
myproject/
├── .venv/ # 仮想環境
├── backend/ # Djangoプロジェクト設定
│ ├── __init__.py
│ ├── asgi.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
└── manage.py # プロジェクト管理コマンド

settings.py を編集して、インストールしたアプリケーションを登録します。
“`python

backend/settings.py

INSTALLED_APPS = [
‘django.contrib.admin’,
‘django.contrib.auth’,
‘django.contrib.contenttypes’,
‘django.contrib.sessions’,
‘django.contrib.messages’,
‘django.contrib.staticfiles’,
# 追加するアプリ
‘rest_framework’, # DRFを登録
‘corsheaders’, # CORS Headersを登録
# ‘tasks’, # 後で作成するタスク管理アプリ (コメントアウトしておく)
]

後でCORSの設定を追加

CORS_ALLOWED_ORIGINS = [

“http://localhost:3000”, # React開発サーバーのデフォルトURL

]

CORS_ALLOW_ALL_ORIGINS = True # 開発中はこれで全てのオリジンを許可しても良いが、本番ではSpecificな設定が推奨

MIDDLEWARE = [
‘django.middleware.security.SecurityMiddleware’,
‘django.contrib.sessions.middleware.SessionMiddleware’,
# CORS middlewareを最初の方に追加
‘corsheaders.middleware.CorsMiddleware’,
‘django.middleware.common.CommonMiddleware’,
‘django.middleware.csrf.CsrfViewMiddleware’,
‘django.contrib.auth.middleware.AuthenticationMiddleware’,
‘django.contrib.messages.middleware.MessageMiddleware’,
‘django.middleware.clickjacking.XFrameOptionsMiddleware’,
]

… その他の設定はそのまま

“`

settings.py の編集後、データベースの初期設定を行います。
bash
(.venv) python manage.py migrate
これにより、Djangoの組み込み機能（認証など）に必要なテーブルがデータベース（デフォルトでは db.sqlite3 ファイル）に作成されます。

開発サーバーを起動してみましょう。
bash
(.venv) python manage.py runserver
ブラウザで http://127.0.0.1:8000/ にアクセスし、「The install worked successfully! Congratulations!」と表示されれば成功です。

2. Djangoアプリの作成とモデルの定義

プロジェクト内に、具体的な機能（タスク管理）を持つアプリケーションを作成します。アプリ名を tasks とします。
bash
(.venv) python manage.py startapp tasks
これにより myproject/tasks ディレクトリが作成されます。

tasks/models.py を編集し、タスクのデータ構造を定義します。
“`python

tasks/models.py

from django.db import models

class Task(models.Model):
title = models.CharField(max_length=200)
completed = models.BooleanField(default=False)
created_at = models.DateTimeField(auto_now_add=True)

def __str__(self):
    return self.title

“`
シンプルなTaskモデルです。タイトル、完了フラグ、作成日時を持ちます。

モデルを定義したら、データベースに変更を反映するためのマイグレーションファイルを作成し、マイグレーションを実行します。
bash
(.venv) python manage.py makemigrations
(.venv) python manage.py migrate

次に、作成した tasks アプリをプロジェクトに登録するために、settings.py の INSTALLED_APPS に 'tasks', を追加します。
“`python

backend/settings.py

…

INSTALLED_APPS = [
# …
‘rest_framework’,
‘corsheaders’,
‘tasks’, # 追加
]

…

“`

管理画面でTaskモデルを操作できるように、tasks/admin.py を編集します。
“`python

tasks/admin.py

from django.contrib import admin
from .models import Task

admin.site.register(Task)
管理画面にアクセスするにはスーパーユーザーが必要です。作成していない場合は作成します。bash
(.venv) python manage.py createsuperuser
“`
ユーザー名、メールアドレス（オプション）、パスワードを入力します。

開発サーバー (python manage.py runserver) を起動し、http://127.0.0.1:8000/admin/ にアクセスして、作成したスーパーユーザーでログインしてみてください。Taskモデルが追加されているはずです。ここからタスクデータを手動で追加・編集できます。

3. Django REST framework (DRF) を使ったAPIの構築

APIを構築するためにDRFを使用します。APIの基本的な流れは以下のようになります。

• Serializer (シリアライザー): Djangoのモデルオブジェクトやクエリセットを、JSONなどのAPIで使いやすい形式に変換（シリアライズ）したり、逆に受信したデータをPythonオブジェクトに変換（デシリアライズ）してバリデーションを行う役割を担います。
• View (ビュー): HTTPリクエストを受け取り、Serializerを使ってデータを処理し、HTTPレスポンスを返します。DRFでは、一般的なAPIエンドポイント（一覧、詳細、作成、更新、削除）を簡単に実装できるジェネリックビューやビューセットが提供されています。
• URL (URLconf): HTTPリクエストのURLを適切なViewにマッピングします。DRFのルーターを使うと、ビューセットに対するURLマッピングを自動で行えます。

tasks アプリ内に tasks/serializers.py ファイルを作成し、Serializerを定義します。
“`python

tasks/serializers.py

from rest_framework import serializers
from .models import Task

class TaskSerializer(serializers.ModelSerializer):
class Meta:
model = Task
fields = ‘all‘ # Taskモデルの全てのフィールドを対象とする
# fields = [‘id’, ‘title’, ‘completed’] # 対象フィールドを指定することもできる
``ModelSerializerを継承することで、簡単にモデルに対応したSerializerを作成できます。Metaクラスで対象モデルとフィールドを指定します。‘all‘` とするとモデルの全てのフィールドが対象になります。

次に、tasks/views.py を編集してAPI Viewを定義します。DRFの ModelViewSet を使うと、CRUD (Create, Retrieve, Update, Delete) 操作に対応するAPIエンドポイントをまとめて定義できます。
“`python

tasks/views.py

from rest_framework import viewsets
from .models import Task
from .serializers import TaskSerializer

class TaskViewSet(viewsets.ModelViewSet):
queryset = Task.objects.all() # どのモデルのデータを扱うか
serializer_class = TaskSerializer # どのSerializerを使うか
“`
これだけで、タスクの一覧表示、詳細表示、新規作成、更新、削除のAPIエンドポイントの基盤ができます。

最後に、APIのエンドポイントURLを定義します。プロジェクトのURL設定 (backend/urls.py) とアプリのURL設定 (tasks/urls.py) を連携させます。

まず、tasks アプリ内に tasks/urls.py ファイルを作成します。
“`python

tasks/urls.py

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import TaskViewSet

Routerを作成し、ViewSetを登録

router = DefaultRouter()
router.register(r’tasks’, TaskViewSet) # /tasks というURLでTaskViewSetを公開

urlpatterns = [
# router.urls は /tasks/, /tasks/{id}/ などのURLを自動生成する
path(”, include(router.urls)),
]
``DefaultRouterは、ModelViewSetに対して、一覧表示 (GET /tasks/)、詳細表示 (GET /tasks/{id}/)、新規作成 (POST /tasks/)、更新 (PUT/PATCH /tasks/{id}/)、削除 (DELETE /tasks/{id}/`) といったURLパスを自動的に生成してくれます。

次に、プロジェクトのメインのURL設定ファイル backend/urls.py を編集し、tasks アプリのURL設定を含めます。
“`python

backend/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
path(‘admin/’, admin.site.urls),
# /api/ というパスで tasks アプリのURL設定をインクルード
path(‘api/’, include(‘tasks.urls’)),
]
``
これで、APIのエンドポイントは/api/tasks/と/api/tasks/{id}/` となります。

開発サーバーを再起動 (python manage.py runserver) し、ブラウザで http://127.0.0.1:8000/api/tasks/ にアクセスしてみてください。DRFによって提供されるWeb browsable API画面が表示され、現在のタスク一覧（最初は空）が表示されるはずです。

この画面から、タスクの追加 (POST)、詳細の確認 (GET {id})、更新 (PUT/PATCH {id})、削除 (DELETE {id}) をテストできます。Postmanなどのツールを使ってもテスト可能です。

4. CORS (Cross-Origin Resource Sharing) の設定

通常、Webブラウザはセキュリティ上の理由から、異なるオリジン（ドメイン、ポート、プロトコル）間でリクエストを送信する際に制限をかけます。開発中、Djangoバックエンド (http://localhost:8000) とReactフロントエンド (http://localhost:3000 など) はオリジンが異なるため、ReactからDjango APIへリクエストを送る際にCORSエラーが発生します。これを解決するために django-cors-headers を設定します。

settings.py に以下の設定を追加または確認します。（先ほど INSTALLED_APPS と MIDDLEWARE には追加済みです）

“`python

backend/settings.py

…

MIDDLEWARE = [
# …
‘corsheaders.middleware.CorsMiddleware’, # 忘れずにここにあることを確認
‘django.middleware.common.CommonMiddleware’,
# …
]

開発中は全てのオリジンからのリクエストを許可

CORS_ALLOW_ALL_ORIGINS = True

または、特定のオリジンのみ許可する場合

CORS_ALLOWED_ORIGINS = [

“http://localhost:3000”, # React開発サーバーのデフォルト

“http://127.0.0.1:3000”,

]

許可するHTTPメソッドやヘッダーを細かく設定することも可能

CORS_ALLOW_METHODS = [

‘DELETE’,

‘GET’,

‘OPTIONS’,

‘PATCH’,

‘POST’,

‘PUT’,

]

CORS_ALLOW_HEADERS = [

‘accept’,

‘accept-encoding’,

‘authorization’,

‘content-type’,

‘dnt’,

‘origin’,

‘user-agent’,

‘x-csrftoken’,

‘x-requested-with’,

]

…

``
開発中はCORS_ALLOW_ALL_ORIGINS = Trueが最も簡単ですが、本番環境ではセキュリティのために許可するオリジンを明確に指定 (CORS_ALLOWED_ORIGINS`) するのが一般的です。

この設定により、ReactアプリケーションからDjango APIへ安全にリクエストを送信できるようになります。

これで、Reactと連携するためのDjangoバックエンドAPIの準備が整いました。

Part 3: ReactによるフロントエンドUIの構築

次に、Reactを使ってユーザーインターフェースを構築します。Django APIからデータを取得し、表示・操作するUIを作成します。ここでは、モダンなフロントエンド開発のためにViteという高速なビルドツールを使用します。

1. Reactプロジェクトの作成

myproject ディレクトリ直下で、バックエンドとは別にフロントエンドプロジェクトを作成します。仮想環境は有効にする必要はありません（Node.js環境で作業するため）。
“`bash

myproject ディレクトリにいることを確認

(.venv) deactivate # もし仮想環境が有効なら無効にする

Viteを使ってReactプロジェクトを作成 (プロジェクト名は ‘frontend’)

npm create vite@latest frontend –template react

または

yarn create vite frontend –template react

または

pnpm create vite frontend –template react

作成したプロジェクトディレクトリに移動

cd frontend

依存関係をインストール

npm install

または

yarn install

または

pnpm install

(任意) HTTPリクエストライブラリ Axios をインストール

npm install axios

または

yarn add axios

または

pnpm add axios

``
Axiosは、ブラウザやNode.jsからHTTPリクエストを送信するための人気のあるライブラリです。組み込みのfetch` APIを使うことも可能ですが、Axiosはより高機能で使いやすい場面が多いです。

プロジェクト構成は以下のようになります（一部省略）。
myproject/
├── backend/ # Djangoプロジェクト
├── frontend/ # Reactプロジェクト
│ ├── node_modules/
│ ├── public/
│ ├── src/
│ │ ├── assets/
│ │ ├── components/ # (今後作成)
│ │ ├── App.jsx
│ │ ├── index.css
│ │ └── main.jsx # エントリーポイント
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── index.html # HTMLテンプレート
│ ├── package.json
│ ├── vite.config.js # Vite設定ファイル
│ └── ...
├── .venv/
└── manage.py

開発サーバーを起動してみましょう。
“`bash
cd frontend # frontend ディレクトリにいることを確認
npm run dev

または

yarn dev

または

pnpm dev

``
通常http://localhost:5173/` (ポート番号はViteの設定による) で起動します。ブラウザでアクセスし、Reactのサンプルページが表示されれば成功です。

2. Reactの基本：コンポーネント、JSX、State、Props

React開発の基本となる概念を簡単に説明します。

• コンポーネント (Component): UIの独立した再利用可能な部品です。関数またはクラスとして定義できますが、現在は関数コンポーネントとHooksを使うのが主流です。App.jsx の App 関数がコンポーネントです。
• JSX (JavaScript XML): JavaScriptコード内にHTMLのような構文を記述するための拡張機能です。React要素を作成するために使われます。ブラウザが理解できる通常のJavaScriptにビルド時に変換されます。
  jsx
// JSXの例
const element = <h1>Hello, {name}!</h1>;

• State (状態): コンポーネント内で管理される、時間の経過とともに変化しうるデータです。Stateが変更されると、Reactはそのコンポーネントと子コンポーネントを再レンダリングし、UIを更新します。関数コンポーネントでは useState Hookを使って管理します。
  “`jsx
  import React, { useState } from ‘react’;

  function Counter() {
  const [count, setCount] = useState(0); // count: 状態変数, setCount: 更新関数, 0: 初期値

  const increment = () => {
  setCount(count + 1); // Stateを更新
  };

  return (

  Count: {count}

  Increment

  );
  }
  * **Props (プロパティ):** 親コンポーネントから子コンポーネントへデータを渡すための仕組みです。Propsは読み取り専用であり、子コンポーネントは受け取ったPropsを直接変更してはいけません（変更が必要な場合は、親コンポーネントの状態を更新する関数をPropsとして渡します）。jsx
  // 親コンポーネント
  function Parent() {
  const greeting = “Hello”;
  return ; // Propsとしてデータを渡す
  }

  // 子コンポーネント
  function Child(props) {
  return

  {props.message}

  ; // Propsを受け取る
  }
  * **Hooks:** 関数コンポーネントでStateやライフサイクル、その他のReact機能を「フック」するためのものです。`useState` はStateを管理し、`useEffect` はコンポーネントのレンダリング後に副作用（データ取得、DOM操作など）を実行するために使われます。jsx
  import React, { useState, useEffect } from ‘react’;

  function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  // コンポーネントがマウントされた後に一度だけ実行される（依存配列が空[]のため）
  useEffect(() => {
  fetch(‘https://api.example.com/data’)
  .then(response => response.json())
  .then(data => {
  setData(data);
  setLoading(false);
  });
  }, []); // 依存配列

  if (loading) {
  return

  Loading…

  ;
  }

  return

  Data: {JSON.stringify(data)}

  ;
  }
  “`

3. Django APIからのデータ取得

ReactコンポーネントからDjango APIへHTTPリクエストを送信し、データを取得します。ここでは axios ライブラリを使用する例を示します。

frontend/src/App.jsx を編集し、タスク一覧を取得して表示するコンポーネントを作成します。既存のサンプルコードは削除して構いません。

“`jsx
// frontend/src/App.jsx
import React, { useState, useEffect } from ‘react’;
import axios from ‘axios’;
import ‘./App.css’; // 必要に応じてスタイルシートを編集

// Django APIのエンドポイントURL
const API_URL = ‘http://localhost:8000/api/tasks/’;

function App() {
const [tasks, setTasks] = useState([]); // タスクリストを保持するState
const [loading, setLoading] = useState(true); // ローディング状態を管理
const [error, setError] = useState(null); // エラー状態を管理

// コンポーネントがマウントされた時にタスク一覧を取得
useEffect(() => {
const fetchTasks = async () => {
try {
const response = await axios.get(API_URL); // GETリクエストを送信
setTasks(response.data); // 取得したデータをStateにセット
setError(null); // エラーをクリア
} catch (err) {
setError(‘Failed to fetch tasks.’); // エラー発生
console.error(‘Error fetching tasks:’, err);
} finally {
setLoading(false); // ローディング終了
}
};

fetchTasks(); // 関数を実行

}, []); // 依存配列が空なので、最初のマウント時のみ実行

if (loading) {
return

;
}

if (error) {
return

;
}

return (

);
}

export default App;
``
このコンポーネントは、useEffectHookを使ってコンポーネントが最初に画面に表示された時（マウント時）に一度だけDjango APIからタスクデータを非同期で取得します。取得中はローディングメッセージを表示し、エラーが発生した場合はエラーメッセージを表示します。取得が成功したら、setTasksでtasks` Stateを更新し、タスクリストを画面に表示します。

Djangoの開発サーバー (python manage.py runserver) とReactの開発サーバー (npm run dev または yarn dev または pnpm dev) の両方が起動している状態でReactのページ (http://localhost:5173/ など) を開いてみてください。Djangoの管理画面 (http://127.0.0.1:8000/admin/) でタスクを追加しておくと、そのタスクがReactのページに表示されるはずです。

4. データの追加、更新、削除（簡単な例）

タスクの追加、更新、削除を行うためのUIとAPI呼び出しもReactコンポーネントに実装します。例として、簡単なタスク追加フォームを App.jsx に追加してみましょう。

“`jsx
// frontend/src/App.jsx
import React, { useState, useEffect } from ‘react’;
import axios from ‘axios’;
import ‘./App.css’;

const API_URL = ‘http://localhost:8000/api/tasks/’;

function App() {
const [tasks, setTasks] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [newTaskTitle, setNewTaskTitle] = useState(”); // 新しいタスクのタイトルを保持するState

// タスク一覧取得のuseEffectはそのまま…
useEffect(() => {
const fetchTasks = async () => {
// … 前述のfetchTasks関数の中身 …
try {
const response = await axios.get(API_URL);
setTasks(response.data);
setError(null);
} catch (err) {
setError(‘Failed to fetch tasks.’);
console.error(‘Error fetching tasks:’, err);
} finally {
setLoading(false);
}
};

fetchTasks();

}, []);

// タスク追加ハンドラ
const handleAddTask = async (e) => {
e.preventDefault(); // フォームのデフォルトの送信を防ぐ

if (!newTaskTitle.trim()) { // タイトルが空でないかチェック
  alert('Task title cannot be empty.');
  return;
}

try {
  const response = await axios.post(API_URL, { title: newTaskTitle, completed: false }); // POSTリクエストで新しいタスクを作成
  setTasks([...tasks, response.data]); // 既存のタスクリストに新しく作成されたタスクを追加
  setNewTaskTitle(''); // フォームをクリア
  setError(null); // エラーをクリア
} catch (err) {
  setError('Failed to add task.');
  console.error('Error adding task:', err);
}

};

if (loading) {
return

;
}

if (error) {
return

;
}

return (

  {/* タスク追加フォーム */}
  <form onSubmit={handleAddTask}>
    <input
      type="text"
      placeholder="Add a new task"
      value={newTaskTitle}
      onChange={(e) => setNewTaskTitle(e.target.value)} // 入力値が変更されたらStateを更新
    />
    <button type="submit">Add Task</button>
  </form>

  {/* タスク一覧表示 (前述のコードと同じ) */}
  <ul>
    {tasks.map(task => (
      <li key={task.id}>
        {task.title} ({task.completed ? 'Completed' : 'Pending'})
        {/* タスク編集・削除ボタンなどをここに追加 */}
      </li>
    ))}
  </ul>
</div>