【DjangoREST】DjangoにReactを結合する方法

DjangoRESTframeworkのフロントエンドとして、Reactを結合する方法を勉強したので、その方法について復習しながら、まとめていきたいと思います。

この記事では、ReactをDjangoのプロジェクトに組み込む方法を中心にしたいので、DjangoRESTframeworkやReact自体の使い方には触れません。

Reactに関して初心者なので、認識が間違っている点とかあるかもしれないです。ご注意ください。

参考にした資料

環境:
python 3.9.6
Django 3

今回の目標

Djangoのプロジェクトの中に、Reactを組み込んで、DjangoもReactも一つのプロジェクト内で開発できるようにするのが目標です。この記事では、Reactで簡単なDomを生成して、Djangoテンプレートの中で表示されるようにします。完成時のソースコードをGithubに置いておいたので、必要な場合は参照してください。

完成図↓

1. 土台となるDjangoプロジェクトの作成

まず、作業していくフォルダーを作成、そこに移動する。

mkdir react-django
cd react-django

次に、python仮想環境の構築と起動を行う。

python3 -m venv venv
source venv/bin/activate

必要なライブラリのインストール

pip install django
pip install djangorestframework
pip freeze > requirements.txt

Djangoライブラリをインストールしたので、Djangoのプロジェクトを作り、プロジェクトの中に移動する。

django-admin startproject project
cd project

settings.pyのinstalled appにrest_frameworkを追加する。

(settings.py)
INSTALLED_APPS = [
   'django.contrib.admin',
   'django.contrib.auth',
   'django.contrib.contenttypes',
   'django.contrib.sessions',
   'django.contrib.messages',
   'django.contrib.staticfiles',
   # frameworks
   'rest_framework', # これ
]

ここまで来たら、サーバーを起動してちゃんと動かせることを確認する。

python manage.py migrate
python manage.py runserver

これで、土台となるDjangoプロジェクトの作成は完了です。次は、Reactを積むためのモジュールを今作ったDjangoプロジェクトに追加していきます。

2. frontend用のアプリの追加(startapp)

まず、Djangoアプリを追加します。

django-admin startapp frontend

settings.pyにinstalled appにfrontendを追加します。

(settings.py)
INSTALLED_APPS = [
   'django.contrib.admin',
   'django.contrib.auth',
   'django.contrib.contenttypes',
   'django.contrib.sessions',
   'django.contrib.messages',
   'django.contrib.staticfiles',
   # frameworks
   'rest_framework',
   # app
   'frontend', # これ
]

これでfrontendアプリが追加されたので、frontendアプリの中の、フォルダ構造を整理していきます。

まず、templateを入れるフォルダと、staticリソースを入れておくフォルダを作成します。(template = html, static = image, cssなど)

mkdirコマンドをmanage.pyがあるディレクトリから実行していってください。

mkdir frontend/templates
mkdir frontend/static

staticフォルダの中にも、images, css, frontendの三つのフォルダを作成します。

mkdir frontend/static/frontend
mkdir frontend/static/css
mkdir frontend/static/images

次は、Reactのコードを入れるためのフォルダを作成します。

mkdir frontend/src
mkdir frontend/src/componets

これで、frontendアプリの追加とフォルダ構造の整理ができたので、次はnodeモジュールのインストールをしていきます。node.jsがpcにインストールされている必要があるので、インストールされているか確認してください。以下のコマンドを実行すると確認できます。

npm

バージョンが出力されれば、インストールされています。インストールされていない場合は、ダウンロードしてください。

3.  nodeモジュールのセットアップ

では、必要なnpmモジュールをインストールしていきます。

まずは、カレントディレクトリをfrontendに移動します。

cd frontend

移動したら、npmをプロジェクトを初期化します。

npm init -y

これを実行すると、package.jsonというファイルが作られます。このファイルはインストールされたパッケージとかを記録しとくものらしいです。pythonのrequirements.txtのようなものだと思います。(間違ってたら、コメント等お願いしたいです。)

では、必要なものをインストールしていきます。まずは、webpackからインストール。

npm i webpack webpack-cli --save-dev

webpackは復習のjavascriptモジュールを一つのファイルのまとめるためのものです。ちなみに、--save-devオプションは、モジュールをローカルインストールするためのオプションです。

次は、babelをインストール。

npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
npm i @babel/plugin-proposal-class-properties

babelとwebpackの説明はこちらの記事がわかりやすいかと思います。

最後にreactのインストール

npm i react react-dom --save-dev
npm i react-router-dom

モジュールのインストールはこんな感じです。次は、babelのconfigファイルを書いていきます。

touch babel.config.json

(babel.config.json)
{
   "presets": [
       [
           "@babel/preset-env",
           {
               "targets": {
                   "node": "14"
               }
           }
       ],
       "@babel/preset-react"
   ],
   "plugins": ["@babel/plugin-proposal-class-properties"]
}

次は、webpackのconfigファイルを作成します。

touch webpack.config.js

(webpack.config.js)
const path = require("path");
const webpack = require("webpack");

module.exports = {
   entry: "./src/index.js",
   output: {
       path: path.resolve(__dirname, "./static/frontend"),
       filename: "[name].js",
   },
   module: {
       rules: [
           {
               test: /\.js$/,
               exclude: /node_modules/,
               use: {
                   loader: "babel-loader",
               },
           },
       ],
   },
   optimization: {
       minimize: true,
   },
   plugins: [
       new webpack.DefinePlugin({
           'process.env.NODE_ENV' : JSON.stringify('production')
       })
   ]
}

上のコードの5行目でエントリーポイントに./src/index.jsを指定したので、index.jsファイルを追加しておきます。

touch src/index.js

次は、npmコマンドのショートカットをpackage.jsonに追加していきます。

(package.json)
"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "dev": "webpack --mode development --watch",
   "build": "webpack --mode production"
 },

scriptsのところに、上のようにdevとbuildというショートカットを追加してください。

node.jsモジュールのセットアップは以上です。
次のところでは、ブラウザに表示するhtmlとreactを書いていきます。

4. 簡単な表示内容の作成とViewの作成

まずは、Djangoのテンプレートを追加します。

mkdir templates/frontend
touch templates/frontend/index.html

(index.html)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   {% load static %}
   <!-- cssを追加する場合 -->
   <link rel="stylesheet" href="{% static "css/index.css" %}">
</head>
<body>
   <div id="main">
       <div id="app"></div>
   </div>

   <script src="{% static "frontend/main.js" %}"></script>
</body>
</html>

テンプレートが完成したので、Viewの方を作ります。
frontendのviwe.pyファイルを開いて、以下のViewを追加してください。

def index(request, *args, **kwargs):
   return render(request, 'frontend/index.html')

そしたら、urlの設定を追加します。projectフォルダのurls.pyを以下のようにしてください。

(project/urls.py)
from django.contrib import admin
from django.urls import path, include

from frontend

urlpatterns = [
   path('admin/', admin.site.urls),
   path('', include('frontend.urls')),
]

frontendフォルダの中にも、urls.pyを作成します。

touch urls.py

(frontend/urls.py)
from django.urls import path
from .views import index

urlpatterns = [
   path('', index)
]

これでDjangoの方は終わりです。
最後に、簡単なReactのコードを書いていきます。

touch src/components/App.js

(App.js)
import React, { Component } from "react"
import { render } from "react-dom"

export default class App extends Component {
   constructor(props) {
       super(props);
   }

   render() {
       return <h1>Hello I'm Makkori.</h1>;
   }
}

const appDiv = document.getElementById("app");
render(<App/>, appDiv)

index.jsで、App.jsを読み込むようにします。

(index.js)
import App from "./components/App";

これで完了です！

ブラウザーの方で確認していきましょう！
ターミナルを二つ立ち上げてください。片方は、カレントディレクトリをmanage.pyのところに移動して、もう片方は、frontendディレクトリに移動してください。(注：仮想環境の起動をお忘れなく！)

manage.pyにいるターミナルでは、以下のコマンドを実行してローカルサーバーを立ち上げます。

python manage.py runserver

frontendディレクトリにいるターミナルでは、以下のコマンドを実行してください。

npm run dev

ターミナルを動かした状態で、http://127.0.0.1:8000/ にアクセスすると、以下のように表示されているはずです。

以上でこの記事は終わりです。最後までありがとうございます。

ソースコードをgithubに乗っけているので、良ければ見てみてさい。