LoginSignup
M_simplifier
@M_simplifier

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

今どきのWeb開発について教えて下さい。

プログラミング初心者です。以前、Djangoで掲示板を実装したことがあるので、そちらの仕組みや開発の流れなどはおおよそわかるのですが、Reactなどを用いたいわゆる「今どき」なWeb開発の仕組みや流れがどうにもピンときません。
一応現在の私の理解を書いておくと、Reactなどでまず「見た目だけのアプリ」を作っておいて、「データを送受信してくれるサーバー」を別に立てて、見た目の部分にそのデータを送受信してくれるサーバーから取ってきたデータをはめ込む、というような仕組みだと思っています。
またRESTというのはおおよそこのようなものを指しているのだろうとも思っています。
しかし、具体的にどのようにしてこれを組んでいくのか? という部分がさっぱり見えてきません。
また、上記のような仕組みだと、アカウント制のアプリを作る時や、またユーザー本人でしか閲覧・編集できてはいけないデータを扱う時など、一体どのようにすればいいのか? と疑問です。
データベースを使用しないフロントだけで完結するものならば特に疑問はないですし、誰に見られてもいいデータをAPIサーバーから取ってきて埋め込むだけ、というのも特に疑問はないです。
ただ、アカウントや認証、また権限などが関わる部分の実装が全く見えてきません。
そこで、現代のMEANやMERNのようなモダンなWeb開発の手法を用いて、TwitterのようなSNSアプリを開発する時はみなさんどうしておられるのか、その大まかな全体像や典型的な開発フローなどを教えていただけると幸いです。

1

2Answer

  1. フロントエンドはnext.jsなどで作る
  2. next.jsで完結させるならバックエンドは要らない(API Routesという機能で、サーバーとしても動くし、サーバーなのでデータベースも使える)
  3. バックエンドを置くなら、ruby、pythonなりでサーバーを動かしユーザーデータなどをデータベースで管理
  4. フロントとバックのデータのやり取りはGraphqlを使う
  5. 認証等もGraphqlに載せて通信する
  6. Graphqlのクエリ等で認証、非認証のユーザーからのデータアクセスを制御する

流れとしてはこんな感じでしょうか?

3Like

こんにちは。
フロントとバックエンドを切り離す際、認証関係悩みますよね。

jwt認証とかそのあたりの話かなーと思います。
以前までサーバーのみで行っていたcookieを用いての認証・状態管理を
今のフロント側FWの機能も使って分担しているイメージ持ってます。

  1. フロント側からバックエンドへリクエスト
  2. バックエンド側で認証
  3. tokenを発行しフロントに返す
  4. フロント(というかユーザー)の一時的な記憶領域でログイン状態を管理

色々セキュリティ関連で悩む部分もあるので、
開発段階ではfirebase使ったりと手抜きしたりします。

典型的な開発フロー……自分も知りたいです(笑)
ざっくりしてますが、下記のリンク記事あたりが参考になるかも?です。
https://www.atmarkit.co.jp/ait/articles/1803/12/news012_2.html

1Like

Your answer might help someone💌