Django＋Reactで何か動く枠組みを作ってみる

2024年9月30日 14:50

筆者自身、Pythonで環境や画面を0から作成するのは初めてなので、一旦はお手本を元にフロント、バックの作りこみのベースを作る事にしてみます。

求人を逃してしまったのですが、募集要件にPythonでアップロードできるものが作れる人を募集していました。
最終的にはファイル便の様にアップロードできるものが作れると良いかもしれません。
何れにしてもPythonはJavaなどと違って注意する点が幾つかありそうです。

■ベースのスケルトン

作り方は以下のリンクの「Reactの構築方法（おまけ）」を参照。

■命名規約について

■テーブル定義

近年ではテーブル構造を組み込んでテーブル毎のクラスを作成し、そのクラスを利用してテーブル作成やInsertやUpdateを共通化するような作り方が主流です。実務では扱うテーブル数が多いのでこの様な流れになった様に感じます。（テーブル数が少ないと逆に面倒なだけでメリットが無い。） Pythonでもその流れを汲んでいるものと思われます。個別にSQLスクリプトを作成していると規模に比例して管理が難しい事情もあるのかもしれません。
※只、使った感触からするとmodelsに全部何でも書いちゃうのは保守性も含めてどうなのかとは思いました。
（settings.pyの設定などを見直してmodelsに相当するもの個別に設定・作成し、ツールを作ってソースを吐き出すなら使いようはあるかもしれません。）
メリットはデータベース特有の記述を必要としない所でしょうか。

まずはコマンドの投入と概念から。

テーブル定義を作成する為には「models.py」を編集します。
Migrateすると最終的にclass毎で定義したテーブル・カラムが作成される様になります。

from django.db import models

# Create your models here.
class Todo(models.Model):
    body = models.CharField(max_length=300)
    completed = models.BooleanField(default=False)
    updated = models.DateTimeField(auto_now=True)
    created = models.DateTimeField(auto_now_add=True)
    
    def __str__(self):
        return self.body

■serializersの設定

Viewとmodelをマッピングする為にmodels.pyと同じ配下にserializers.pyでファイル作成し、以下を追加します。

from rest_framework import serializers
from . import models

class TodoSerializer(serializers.ModelSerializer):
    class Meta:
        model = models.Todo
        fields ='__all__'

■Viewの設定

from django.shortcuts import render
from rest_framework import viewsets
from . import serializers
from . import models

# Create your views here.


class TodoViewSet(viewsets.ModelViewSet):
    queryset = models.Todo.objects.all()
    serializer_class = serializers.TodoSerializer

■urlsの設定

backendの配下に存在しているurls.pyを修正します。
※URLパスを指定した時に利用するモジュールの設定

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

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

models.pyと同じ配下にurls.pyでファイル作成し、以下を追加します。

from . import views
from rest_framework import routers


router = routers.DefaultRouter()
router.register('todo',views.TodoViewSet,basename='todo')

urlpatterns = [

]

urlpatterns += router.urls

■adminでmodelを登録できる様にする

from django.contrib import admin
from . import models

# Register your models here.

admin.site.register(models.Todo)

■MakemigrationsとMigrateコマンドを実行

python manage.py makemigrations
python manage.py migrate

これでようやく、adminのアカウントを作成した上でログインした後、データを入力できる様になります。
この部分は余り重要ではないのでここでは記載しません。

★テーブル作成に関する補足

今回、サンプルで利用されているものはSQLiteです。
db.sqlite3を開くと、以下の画面が出てきます。
※筆者はSQLiteを扱う時はPupSQLiteを利用しています。
テーブルさえ作成出来れば、あとはPupSQLiteでも編集は可能です。

デフォルトではsettings.pyにSQLiteが設定されています。
特別に使いたいDBがあれば、設定変更が必要となります。

■フロントの構築

以下のコマンドを打ってパッケージをインストールします。
（今回は動きを知る意味で入れます。
　日本でこんな使い方は少ないかもしれません。）
Tailwind CSS：オープンソースのCSSフレームワーク
react-icons ：React 用のアイコンライブラリ
daisyui　　：Tailwind CSSのプラグインUI
axios 　　：HTTPリクエストのライブラリ

※参考
　npm ：node package manager　＝　パッケージの管理ツール
　npx ：node package executer　＝　パッケージの実行を行うツール

　>cd frontend
　>npm install -D tailwindcss postcss autoprefixer
　>npx tailwindcss init -p
　>npm install react-icons --save
　>npm i daisyui
　>npm install axios --save-dev

　★Tailwind CSSの設定
　　上記のコマンドを打つと以下のファイルが作成されるので、設定します。
　　tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require('daisyui'),],
}

　以下のファイルの中身を削除します。
　・App.css　
　・index.css
　・App.jsx

　App.jsxの中身を書き換えます。

import { useState } from 'react'
import './App.css'

function App() {

  return (
    <div className='bg-indigo-100 px-8 min-h-screen'>
      <h1 className='text-5xl text-center'>Hello world</h1>

    </div>   
  );
}

export default App

　index.cssの中身を書き換えます。

@tailwind base;
@tailwind components;
@tailwind utilities;

■感想

0から構築するのは結構しんどい・・・わかっていなかったら尚更。
更に言えば何の為にReactを使う必要があるかも必要。
Reactが得意なのはインスタグラムやＸなどの様にリアルタイム更新が入ってDOM操作が行われるものには向いているけど、静的なページには労力を割くだけで向いていない。
その昔、無理にReactを適用したプロジェクトに参画しましたが、作りが悪いとページが重くなるだけでメリットが少ないです。