5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[初学者の備忘録]ReactとDjangoを組み合わせる

Last updated at Posted at 2020-08-31

執筆背景

現在、就職活動用の成果物作成に取り掛かっています(文系実務未経験の大学生です)。そこで、私はバックエンドにDjango、フロントエンドにReactを使うこととしました。
しかし、一つ疑問が生じます。

これどうやって組み合わせるんだ?

初学者で情報系出身でもない学生です。知識は皆無です。Django,ReactそれぞれでCRUDアプリケーションを作りましたが、それはどちらも片方のフレームワークのみで作成したものです。これを組み合わせるためにいろいろ調べたので、その結果を不確かかもしれませんがアウトプットとして残しておきたいと思います。

Django Rest Frameworkについて

これを初めの見出しに持ってきたのは理由があります。
それは、私自身が「これは組み込まないといけないものなのか?」と一番はじめに疑問に思ったものだったからです。

私が調べた限りの結論では、
ReactDjangoを組み合わせるなら絶対DjangoRestFrameworkは必要
となります。

これを説明するためには最近のモダンなJavaScriptの開発状況について説明をしなければいけません。

モダンJavaScriptの開発状況

私の理解を助けるきっかけとなった記事がこちら

私はここで2つの重要なことを知りました。

1.モダンなWebページはJSONでデータをやり取りするようになった
2.仮想DOMを用いて、HTMLを細かく分けるようになった

実はこの記事に辿り着く前に、DangoRestFrameworkはオブジェクトをJSONに変換できるということを学んでいました。そして、ここで一つのことがわかります。

サーバー側からの情報をフロント側に伝えるためには、JSONに変換しなければいけない
>DjangoRestFrameworkReactDjangoを組み合わせる上で必須

React,Djangoの組み合わせという最初の話題だとこれで結論となります。
しかし、私はまだ終わりませんでした。

  • __ 仮想DOM__という概念が曖昧だったこと
  • バックエンドはフロントエンドにデータを渡すために、APIを作る」という表現がうまく飲み込めなかったこと

この二つのモヤモヤが残ったので、より調べることにしました。

しかし、話が流れていきそうなので、記事を別に更新しようと思います。

まとめ

1.フロント、サーバー間は、モダンな技術ではJSONデータが交換される
2.DjangoRestFrameWorkDjangoの取得したデータをJSONに変化してくれる
3.React,Djangoを組み合わせるためには、JSONデータをパスするために,DjangoRestFrameworkを用いなければならない

ということです。
拙く、知識不足、勉強不足が滲み出ている記事だとは思いますが、ご覧いただきありがとうございました。
この記事が、皆様の理解を少しでも助けられればと思います。

5
6
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?