DjangoのWebアプリ開発（特にフロントサイド）に詳しい方、教えてください。

実現したいこと

現在、djangoのアプリを開発しています。
元々自分用に開発したものであり、フロント系の経験が全くなかったので、
よく意味もわからずネットを参考にしながらBootstrapとAdminLTEを使って開発してました。
（どうせ自分しか使わないし、適当でいいでしょ精神）

この度、自分以外のお客様に公開することが決まり、UIが大事と考え、Reactを導入することに決めました。

発生している問題・分からないこと

ここからが本題なのですが、いまいちよくわかっておらず恐縮ですが
Reactを使う場合、フロント系の構成としては、React単体になるのでしょうか？
BootstrapとAdminLTEは、Reactとは全く関係がないということでしょうか？

該当のソースコード

特になし

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

イメージとしましては、下記のようになるということでしょうか？

【旧】
お客様(自分)がページにアクセス
↓
Djangoが内部処理
↓
フロントでBootstrapとAdminLTEがデータを加工して画面表示

【新】
お客様(自分)がページにアクセス
↓
Reactが画面表示　→　同時にDjangoに内部処理を依頼　→　終わったものからReactに返却→画面表示

補足

特になし

IT001

2024/11/22 15:11

最近のReact系は、公式に書いてある通りNext.jsやRemixなどのフレームワークが推奨されています。 https://ja.react.dev/learn/start-a-new-react-project ただ、Reactフレームワークの導入は学習時間などもかかるので、チームに応じて（場合によっては）React単体でもありだと個人的には思います。また、Reactで開発する場合はコンポーネントライブラリ/コレクションを使うので、Bootstrapを使いたい場合はReact Bootstrapを使います。業務ではMUI（Material UI）の利用が多いです。最近だとShadcn/UIが爆発的な人気なので、MUI → Shadcn/UIへ移行するプロジェクトもあります。なお、Reactを使った場合、DjangoはAPIサーバーになるのでDjango REST framework（またはDjango Ninja）などを使って実装します。

ryo_0126

2024/11/22 15:50

ご返信ありがとうございます！そうなんですね、Next.jsも少し勉強してみたいと思います (難しそうだったら、React単体になるかもですが) ちなみに現在はDjangoで書かれているサーバサイド（モデルやORMの処理等）は、Django REST frameworkにもほとんど流用可能でしょうか？

IT001

2024/11/23 01:33

はい。モデルやORM処理など、Django REST framework（DRF）でもほとんどそのまま流用可能です。ただ、Reactがチームとしては重い（＝難しい）と感じた場合は、HTMXもご検討ください。 HTMXは、BootstrapとAdminLTEの延長線上で使えるので、Djangoの従来開発と似ていて導入コストが（Reactと比べて）低いです。特にDjango + jQueryで済むようなプロジェクトでは、Django + HTMXはおすすめできます。 Django + HTMXは最近海外で人気があるので、Youtubeで調べると色々と出てくると思います。ただし、ガントチャートやTrelloのようなものが作りたい場合は、Reactを推奨します。適切なシステム選定は難しい時がありますが、応援しております。

行動規範の内容に同意します

回答2件

ベストアンサー

コメントの方をまとめ（追加）させて頂きます。

最近のReact系は、公式に書いてある通りNext.jsやRemixなどのフレームワークが推奨されています。
https://ja.react.dev/learn/start-a-new-react-project
海外でもNext.js + Shadcn/UI + Django（DRF）は人気のある構成で、大規模開発でも使われたりします。

一部をインタラクティブ的に使いたい場合などは、HTMX + Djangoもご検討ください。小規模では開発効率が良いため、海外ではReactからHTMXへ移行したSaaS製品があります。
https://www.youtube.com/watch?v=3GObi93tjZI

Next.jsなどは覚えることが多くて大変だとは思うのですが、必然的にフロントエンドとサーバーサイドで分離されるので、ソースコードの見通しが良くなります。また、採用事例（メルカリ、出前館、一休など）が多く、AIチャットが作れたり、BFF（Backend for Frontend）構成にして大規模アクセスにも耐えるシステムを作ることもできます。

実際にどのようなシステム構成にするかは、チームや状況次第かと思いますが、応援しております。

投稿2024/11/23 04:02

編集2024/11/23 07:51

IT001

総合スコア659