React＋Djangoでブログを作る3〈Django＋React連携編〉

今回は、DjangoとReactの連携を実装します。

2020/11/09: コメントで頂いた修正をしました。ありがとうございます。

Djangoでバックエンドを作る

前回でREST Frameworkの基礎は完成したのですが、Reactとリソースを共有するためにはCORSというものを実現する必要があります。

CORSの実装

CORSはHTTP通信にCORSヘッダーを含める事で実装出来るのですが、Djangoではdjango-cors-headersというパッケージを導入して設定するだけで、簡単にCORSが実装出来ます。

$ pip install django-cors-headers

例の如く、新たなアプリをblogress/settings.pyにて登録しましょう。

INSTALLED_APPS = [
    # ローカルアプリ
    'users.apps.UsersConfig',
    'posts.apps.PostsConfig',

    # サードパーティアプリ
    'rest_framework',
    'rest_framework.authtoken',
    'corsheaders', # 追記
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'rest_auth',
    'rest_auth.registration',

    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.sites',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # 追記
    'django.middleware.common.CommonMiddleware', # 追記
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

# 追記
CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000'
]

これでReactとの連携準備はバッチリです。

Reactでフロントエンドを作る

では、フロントエンドを作っていきます。

Reactのインストール

Node.jsのインストールについては事前に行っているので、npmコマンドが使える状態からのスタートです。

# Reactのインストール
$ npm install -g create-react-app

Reactプロジェクトの作成

Djangoプロジェクトのルートディレクトリ/blogress/にて、create-react-appでプロジェクトを開始します。

$ npx create-react-app frontend

完了すると、以下のようなディレクトリツリーになるはずです。

blogress/ (ルートディレクトリ)
|-- blogress/
|-- frontend/
|-- posts/
|-- templates/
|-- users/
|-- db.sqlite3
|-- manage.py

きちんとインストール出来たか確認するため、Reactのサーバーを立ち上げてみます。

$ cd frontend
$ npm start
# http://localhost:3000 にアクセスして確認

もしかしたら自動でブラウザが立ち上がるかもしれません。

無事立ち上がったようです。何故かEdgeでは見られなかったのでChromeで見ています。

ページの作成

ではAPIから実際にデータを受け取る前に、まずは仮データを用意してそれをページ上に表示させてみます。

Reactサーバーが実際に描画しているページはfrontend/src/App.jsにあります。

import React, { Fragment } from 'react';

const App = () => {
  const posts = [
    {
      id: 1,
      title: "仮データ1",
      description: "仮テキストです。"
    },
    {
      id: 2,
      title: "仮データ2",
      description: "仮テキストです。仮テキストです。"
    },
    {
      id: 3,
      title: "仮データ3",
      description: "仮テキストです。仮テキストです。仮テキストです。"
    }
  ]

  return(
    <Fragment>
      {posts.map(post => (
        <div key={post.id}>
          <h1>{post.title}</h1>
          <p>{post.description}</p>
        </div>
      ))}
    </Fragment>
  );
}

export default App;

このように変更すると、サーバーを立ち上げている場合は自動で再読み込みしてもらえます。

上手く行くと、このように3つ作った仮データがその説明と共に描画されます。

Axiosのインストール

Axiosは、ReactでREST APIへのリクエスト処理を実装するためのライブラリです。

React同様にこちらもnpmコマンドでインストールします。

$ npm install axios

REST APIの利用

Axiosをインストールし終えたので、REST APIからデータを受け取る事が出来るようになりました。

frontend/src/App.jsに書いていた仮データを実際のREST APIからのデータ取得に置き換えます。

import React, { Fragment, useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {
  const [posts, setPosts] = useState(null);

  useEffect(() => {
    axios
    .get('http://localhost:8000/api/posts/')
    .then(res=>{setPosts(res.data);})
    .catch(err=>{console.log(err);});
  }, []);

  return(
    <Fragment>
      {posts.map(post => (
        <div key={post.id}>
          <h1>{post.title}</h1>
          <p>{post.description}</p>
        </div>
      ))}
    </Fragment>
  );
}

export default App;

では、サーバーを起動しましょう。

この時、Djangoサーバーも立ち上げるのを忘れないように気を付けます。

ターミナルを2つ用意して、それぞれのサーバーを立ち上げてください。

# Djangoサーバーの起動
$ python manage.py runserver

# Reactサーバーの起動
cd frontend npm start

どちらも起動したら、http://localhost:3000にアクセスして確認しましょう。

無事にデータが受信出来ているようです。

まとめ

DjangoとReactの簡単な連携が取れるようになってかなり嬉しいです。

Reactの新機能「React Hooks」を使う事でコードがシンプルになりました。

参考

• Django REST Framework の使い方メモ
• チュートリアル：React の導入
• ステートフックの利用法