Garden

最近の記事

モダン技術のWebアプリを作成するなら

12 min read

Prompt

じゃあ、実際にモダンな技術でWebアプリを作る例を考えてみよう！

SPAのSNSを例に考えてみる。
フロントエンドはReact系、
バックエンドAPIサーバーはRustで運用。これは正しい？(ちょっと曖昧だけど)
ただ、具体的にどこでシステムを分割したらいいか全く想像がつかない。そこの認識がないからなんとなく解説してほしいところはある。
また、このアプリケーションをブラウザだけでなくモバイルアプリでも実装しようとするとどうなるか？バックエンドで共通化する部分はどこからになるのか？

ナイスな発想だね！👍 そうそう、頭の中で実際のシステムを組み立ててみると、点と点だった知識が線になって繋がるんだ。

フロントエンドにReact系、バックエンドAPIサーバーにRust。この組み合わせは、パフォーマンスとスケーラビリティを求めるモダンなWebアプリ開発において、まさに最高の選択肢の一つだ。君のその認識はバッチリ正しいよ！

システムの分割方法

システムの分割を考えるとき、大事なのは「役割」を明確にすること。

  • フロントエンド（React系）：ユーザーが直接触れる「UI (ユーザーインターフェース) とその振る舞い」を担当する。

    • 画面の表示、ボタンのクリック、フォーム入力などのユーザー操作を管理する。

    • バックエンドから受け取ったデータを分かりやすく表示したり、入力データを整理してバックエンドに送信したりする。

    • ユーザーのログイン状態や画面ごとのナビゲーションも担当する。

  • バックエンド（Rust）：データの「処理と管理」を担当する。

    • ユーザー情報や投稿内容といったデータをデータベースに保存・取得する。

    • ログイン認証、投稿の公開範囲設定、いいね数のカウントといったビジネスロジックを実行する。

    • フロントエンドからのリクエストを受け取り、処理結果をJSON形式で返す**API（Application Programming Interface）**として機能する。

具体的な分割例：SNSアプリの投稿機能

ユーザーの操作フロントエンドの役割バックエンドの役割
新規投稿ボタンをクリック投稿フォームを表示するなし
投稿内容を入力し送信入力内容をJSON形式で整形するなし
送信リクエストHTTP POSTリクエストとしてバックエンドAPIに送信するなし
APIサーバーがリクエストを受信なしリクエストから投稿内容を解析する
投稿内容をDBに保存なしデータベースに書き込む
処理結果を返すなし成功を示すステータスコードとJSONを返す
レスポンスを受信投稿に成功した旨を画面に表示するなし

このように、データの「やり取り」と「表示」を完全に分けて考えるんだ。これが、フロントエンドとバックエンドを分離する一番基本的な考え方だよ。

モバイルアプリでの実装

次に、このアプリケーションをモバイルアプリでも実装したい場合だね。

この場合、バックエンドを共通化するのがセオリーだ！

  • フロントエンド:

    • Web用: React（SPA）

    • iOS用: SwiftやReact Native

    • Android用: KotlinやReact Native

  • バックエンド:

    • Rust製のAPIサーバーをそのまま利用する。

Webアプリのときと同じように、モバイルアプリもこのAPIサーバーにHTTPリクエストを投げて、JSON形式でデータを受け取る。

コード スニペット

graph TD
    subgraph Frontend
        A[Webブラウザ] --> B(React.js)
        C[iOSアプリ] --> D(Swift/RN)
        E[Androidアプリ] --> F(Kotlin/RN)
    end
    subgraph Shared Backend
        G[Rust APIサーバー]
        H[データベース]
    end
    B -- HTTP/JSON --> G
    D -- HTTP/JSON --> G
    F -- HTTP/JSON --> G
    G -- DB接続 --> H

これが、APIベースのアーキテクチャの強力な利点だ。バックエンドAPIを一度作ってしまえば、Webブラウザ、iOSアプリ、Androidアプリ、さらには他のサービスとの連携など、複数のプラットフォームから同じビジネスロジックを利用できるようになる。

フロントエンドは「見た目」と「操作」、バックエンドは「頭脳」と「心臓」。この役割分担を理解すると、どんなシステムでもどこで分割すべきかが見えてくるはずだよ！

どうだった？これで、君の「なんとなく」が少しでもクリアになったかな？😉

Prompt

フロントエンドはDBの事を一切考えず、ただの形式化された入出力だけを管理する。
バックエンドは画面の事を一切考えず、ユースケースに集中する。
…まあ、こんな感じ？
このような「割り切り」を明確にしておかないと、折角フロントとバックを分割する意味がないよね。
もっとこんな感じのそれぞれの役割を分割する具体例はあるかな？

あと、SPAのSNSは、ユーザーの必要に応じて投稿を表示するけど、その具体的な流れはどうなるのかな？画面更新とか…

また、常に最新の投稿を表示するだけなら難しいアルゴリズムは不要だけど、ユーザーに合わせた投稿を自動的に選択するとなると、ものすごく複雑になりそう。

そうだね、君の言うとおりだよ！「フロントエンドはUI、バックエンドはユースケース」という割り切りを明確にすることが、分割する意味を最大限に活かす秘訣だ。その認識、完璧だよ！

この割り切りをさらに深く理解するために、他の役割分担の具体例も見てみよう。

フロントエンドとバックエンドの役割分割例

1. データのキャッシュ

  • フロントエンドの役割: ユーザーが何度も同じデータにアクセスするとき、そのデータを一時的にブラウザのメモリに保存（キャッシュ）しておく。これにより、毎回バックエンドにリクエストを送る必要がなくなり、読み込みが速くなる。

  • バックエンドの役割: 常に最新のデータを提供し、データが更新されたらフロントエンドに通知する。キャッシュを管理するのはフロントエンドに任せる。

2. バリデーション（入力値の検証）

  • フロントエンドの役割: ユーザーがフォームに何か入力したとき、即座に「メールアドレスの形式が間違っています」といったフィードバックを返す。これはユーザー体験を向上させるためのチェックだ。

  • バックエンドの役割: データベースに保存する前に、絶対に入力値が正しいか最終チェックを行う。フロントエンドのチェックはあくまで補助的なものとして扱い、バックエンドで必ず検証する。

3. セキュリティ

  • フロントエンドの役割: パスワードなどの機密情報を入力フォームで暗号化してバックエンドに送信する。

  • バックエンドの役割: ユーザー認証やアクセス権限のチェックなど、すべてのセキュリティロジックを厳密に実行する。フロントエンドはユーザーが改ざんできるため、セキュリティの最終判断は絶対にバックエンドで行う。

SPAでの投稿表示の流れ

次に、SPAのSNSでユーザーの投稿が表示される流れについてだね。ここでも、フロントエンドとバックエンドの役割分担が活躍するよ。

1. 初回読み込み

  1. ブラウザ: URLにアクセスすると、フロントエンドのコード（HTML/CSS/JavaScript）をサーバーからダウンロードする。

  2. ブラウザ: JavaScriptが実行され、画面の「枠組み」（ヘッダーやフッター、投稿の表示エリアなど）が表示される。

  3. ブラウザ: JavaScriptが、バックエンドのAPIエンドポイント（例: /api/posts）に「最新の投稿を10件ください」というHTTPリクエストを送信する。

  4. APIサーバー: リクエストを受け取り、データベースから最新の投稿データを検索して取得する。

  5. APIサーバー: 取得したデータをJSON形式で整形し、ブラウザに返す。

  6. ブラウザ: JavaScriptがJSONデータを受け取り、それを元にHTML要素を動的に生成し、画面に投稿内容を表示する。

2. スクロールによる追加読み込み

  1. ブラウザ: ユーザーが画面を一番下までスクロールする。

  2. ブラウザ: JavaScriptがそれを検知し、「次の10件の投稿をください」というHTTPリクエストをAPIに送信する。このとき、前回の最後の投稿のIDなどをパラメータとして渡す。

  3. APIサーバー: パラメータを元にデータベースから次の投稿を取得し、JSONで返す。

  4. ブラウザ: 新しい投稿を画面の下に追加で表示する。

このように、画面全体をリロードすることなく、必要なデータだけをバックエンドから取得して表示するのがSPAの大きな特徴だ。

ユーザーに合わせた投稿の選択

君が言う通り、ユーザーに合わせた投稿を自動的に選択する（レコメンド機能）となると、バックエンドのアルゴリズムはめちゃくちゃ複雑になる！

これはもはや、単なるデータベース検索ではなく、機械学習やAIの領域になるよ。

複雑なアルゴリズムの例

  • 協調フィルタリング: ユーザーAが「投稿X」と「投稿Y」を気に入っている場合、ユーザーBも「投稿X」を気に入っていれば、「投稿Y」をおすすめする。

  • コンテンツベースフィルタリング: ユーザーが興味を示した投稿のキーワード（例: 「音楽理論」「プログラミング」）を抽出し、同じキーワードを持つ投稿をおすすめする。

  • 時系列分析: ユーザーの行動パターン（いつ、どの投稿を見たか）を分析して、次に興味を持ちそうな投稿を予測する。

これらの複雑なアルゴリズムは、バックエンドの専門チームが担当する部分だ。フロントエンドは「このユーザーにおすすめの投稿リストをください」というシンプルなリクエストを送るだけでOK。あとはバックエンドが、膨大なデータと複雑なアルゴリズムを駆使して最適な結果を返すんだ。

役割の明確な分離は、こうした高度で複雑なシステムの構築を可能にするための重要な設計思想なんだよ！どうだ、面白いだろ？🚀

グラフビュー

最近の記事

グラフビュー