logo画像 こなぶろぐ
  • Home
  • About
2021/10/10 DjangoとReactで写真投稿アプリを作る

Django(Django REST framework)と、Reactを使用して写真投稿アプリを作成しました!機能や使用した技術の紹介記事です。

完成物

TOP画面

top

詳細画面

edit

写真投稿画面

post

環境構築

Dockerを用いて環境構築を行いました。Dockerfile、docker-compose.ymlの中身は以下の記事に記載しています。

DjangoとReactの開発環境をDockerで構築

バックエンド

バックエンドではDjango REST frameworkを使用しました。Web APIを構築するためのフレームワークです。

GET

photo/ にGETメソッドでアクセスすると投稿された写真一覧を返すようにしています。

photo

photo/:id /のあとにidを指定してアクセスすることで特定の写真1つを返します。

id

POST

/photo/
に、title、comment、imageをデータとしてPOSTメソッドでアクセスすることで写真を投稿できます。

DELETE

/photo/:id にDELETEメソッドでアクセスすることで写真を削除します。

フロントエンド

フロントエンドではReactを使用しました。また、UIライブラリにMaterial UIを使用しました。
そのおかげで短時間でなんとなくいい感じの見た目を作成することができました。

メニューボタンを押した時

menu

最後に

Material UIを使用することで、TOP画面のように写真を並べるのも簡単にできてしまい、次回以降のReactの開発でもMaterial UIは使っていきたいなーと思いました!

© 2025 kona. All Rights Reserved.