【Django学習用】Django × React frontendの導入

今回の記事では、

Djangoプロジェクト内にReactでfrontendを反映させる方法

について解説していきます

運営者プロフィール

現在はIT企業のプロダクトマネージャーとして、個人向け/社内向けシステムなど、複数のシステム開発・運営に携わっています。

Webサイト構築やECサイトの開発経験に加えて、PythonなどのプログラミングやSalesforceなどのクラウドアプリケーションに関する幅広い知識・経験を活かして「プログラミング初心者がスムーズに学べるサイト」を目指しています。

Githubでは、趣味で作成したアプリなどを公開しています。

https://github.com/Yulikepython/

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

frontend用のappを作成と初期設定

$ python manage.py startapp frontend

app名をここでは、

frontend

とします

settings.py に appの追加

INSTALLED_APPS = [
                   .
                   .
                   .
                   'frontend',
]

frontendをINSTALLED_APPSに追加します

TEMPLATES = [
    {
        'DIRS': [ BASE_DIR / "templates"],
    },
]

TEMPLATES内のDIRSを上記に変更します

mainフォルダ内のurls.py

from django.urls import path, include

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

includeをインポートするのを忘れずに！

ここでは、

/react/

をfrontendのパスとしています

frontend内のurls.py

from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    path('', TemplateView.as_view(template_name="frontend/index.html"), name="index_js")
]

下記で作成するテンプレートファイルにパスを通します

app内の設定

templatesフォルダ > frontendフォルダ > index.html

<!DOCTYPE html>
<html lang="ja">
<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>React Index</title>
</head>
<body>
{% load static %}
    <div id="app"></div>

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

templatesフォルダ > frontendフォルダ > index.html

とそれぞれ作成します

srcフォルダ > index.js

import React from "react"
import ReactDom from "react-dom"

import App from "./App"

let myComponent = document.getElementById("app")
if (myComponent !== null){
    ReactDom.render(<App />, myComponent)
}

index.html内のid「app」にApp.jsの内容をrenderするよう指示を出しています

srcフォルダ > App.js

import React, {Component} from "react"

const App = () => {
    return (
        <div>Hello World</div>
    )
}

export default App

Hello Worldと記述されるようにしましょう

npmの設定

npmのインストールについて、ここでは割愛させて頂きます

package.json

{
    "name": "src",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "dev": "webpack --mode development --watch --entry ./frontend/src/index.js --output-path ./frontend/static/frontend/main.js",
        "build": "webpack --mode production --entry ./frontend/src/index.js --output-path ./frontend/static/frontend/main.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.12.16",
        "@babel/preset-env": "^7.12.16",
        "@babel/preset-react": "^7.12.13",
        "antd": "^4.12.3",
        "babel-loader": "^8.2.2",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "css-loader": "^5.0.2",
        "file-loader": "^6.2.0",
        "formik": "^2.2.6",
        "moment": "^2.29.1",
        "prop-types": "^15.7.2",
        "react": "^17.0.1",
        "react-cookies": "^0.1.1",
        "react-dom": "^17.0.1",
        "react-router-dom": "^5.2.0",
        "sass": "^1.32.8",
        "sass-loader": "^11.0.1",
        "style-loader": "^2.0.0",
        "webpack": "^5.23.0",
        "webpack-cli": "^4.5.0",
        "webpack-dev-server": "^3.11.2",
        "whatwg-fetch": "^3.5.0",
        "yup": "^0.32.9"
    },
    "jest": {
        "transformIgnorePatterns": [
            "/node_modules/(?!antd|@ant-design|rc-.+?|@babel/runtime).+(js|jsx)$"
        ]
    }
}

このままコピペで良いかと思います

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["transform-class-properties"]
}

webpack.config.js

module.exports = {
    output: {
        filename: "main.js",
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:
                    {
                        loader: "babel-loader"
                    }
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use:[
                    "style-loader",
                    {loader: "css-loader",
                    options: { url: false }
                    }
                ]
            }
        ]
    },
    devServer: {
        historyApiFallback: true,
      }
}

ファイルツリー

こんな感じになりました！

src
 ├── frontend
 │   ├── init.py
 │   ├── admin.py
 │   ├── apps.py
 │   ├── migrations
 │   │   └── init.py
 │   ├── models.py
 │   ├── src
 │   │   ├── App.css
 │   │   ├── App.js
 │   ├── static
 │   │   └── frontend
 │   │       └── main.js
 │   │           └── main.js
 │   ├── templates
 │   │   └── frontend
 │   │       └── index.html
 │   ├── tests.py
 │   ├── urls.py
 │   └── views.py
 ├── main
 │   ├── init.py
 │   ├── asgi.py
 │   ├── settings.py
 │   ├── urls.py
 │   └── wsgi.py
 ├── manage.py
 ├── package-lock.json
 ├── package.json
 ├── requirements.txt
 ├── snippets
 │   └── decorators.py
 ├── static
 │   ├── css
 │   │   ├── header.css
 │   │   └── index.css
 │   ├── images
 │   └── js
 ├── templates
 └── webpack.config.js