Webアプリケーションの基本構造（フロントエンド・バックエンド・データベース）
はじめに
この章では、Webアプリの基本構造を学びます。対象は、フロントエンド、バックエンド、データベースの三つです。
前章では全体像を俯瞰しましたが、この章ではその中身をもう一段具体的に整理します。重要なのは、技術名を覚えることではなく、何がどこで動き、どこに責任があるのかを説明できるようになることです。
Webアプリは、画面だけで成り立つものではありません。ユーザーが入力し、サーバーが処理し、必要なデータを保存し、その結果を再び画面へ返します。
この流れを一つに混ぜて考えると、修正や拡張が難しくなります。そこで、まずは画面、処理、保存を分けて考えることが大切になります。
この章で学ぶこと
- フロントエンド、バックエンド、データベースの役割
- 三者がどのように連携するか
- APIがなぜ必要なのか
- 構造を分けて設計する意味
- 具体例を通した基本構造の見方
1. なぜWebアプリを構造で分けて考えるのか
Webアプリでは、見た目、処理、保存が同時に動きます。もしこれらを一か所で考えると、小さな変更でも影響範囲が広がります。
たとえば、画面の見た目を直したいだけなのに、保存処理や認証まわりまで影響する構造だと、保守が非常に難しくなります。そのため、まずは役割ごとに分けて考える必要があります。
役割を分けると、何をどこで直すべきかが見えやすくなります。見た目の問題ならフロントエンド、業務ルールの問題ならバックエンド、保存や検索の問題ならデータベース、と切り分けられるからです。これは開発効率のためだけでなく、学習効率のためにも重要です。
| 課題 | 起こること | 解決 |
|---|---|---|
| 画面、処理、保存を一体で考える | 原因の切り分けが難しい | 層ごとに責務を分ける |
| 何がどこで動くか曖昧 | 学習内容が断片化する | 基本構造を先に整理する |
| 修正の影響範囲が広い | 小さな変更でも壊れやすい | 役割単位で設計する |
2. フロントエンドとは何か
フロントエンドは、ユーザーが直接触れる部分です。ブラウザーに表示される画面、入力欄、ボタン、一覧、メッセージ、見た目の変化などを扱います。
HTMLが構造、CSSが見た目、JavaScriptが動きや通信を担います。ユーザーから見える世界の大半は、フロントエンドの責任範囲です。
ただし、フロントエンドは見た目だけではありません。入力を受け取り、状態を更新し、必要に応じてサーバーへ通信し、結果を表示する役割も持ちます。
つまり、「見せる」ことと「触らせる」ことの中心です。一方で、厳密な権限管理や安全な保存、共通ルールの確定処理はフロントエンドだけでは担いきれません。
| 観点 | フロントエンドの役割 |
|---|---|
| 表示 | 文字、画像、一覧、画面構成を見せる |
| 操作 | 入力、クリック、画面遷移を受ける |
| 反応 | ボタン操作や状態変化に応答する |
| 限界 | 保存や権限判定を単独で完結しにくい |
3. バックエンドとは何か
バックエンドは、サーバー側で処理を行う部分です。ブラウザーから届いたリクエストを受け取り、業務ロジックを実行し、必要ならデータベースへアクセスし、その結果を返します。
たとえば、ログイン判定、予約可否判定、注文処理、権限チェックなどは、バックエンドの代表的な役割です。
バックエンドが必要なのは、ブラウザーだけでは信頼できない処理が多いからです。もし重要な判定を画面側だけで行うと、改ざんや整合性の問題が起きやすくなります。
複数ユーザーに共通のルールを適用し、サービスとして安定した振る舞いを維持するには、サーバー側の処理が必要です。
| 観点 | バックエンドの役割 |
|---|---|
| 受付 | リクエストを受け取る |
| 判定 | 業務ルールや権限を判断する |
| 連携 | データベースと接続する |
| 返却 | 結果をレスポンスとして返す |
4. データベースとは何か
データベースは、情報を保存し、必要なときに取り出し、更新し、削除するための基盤です。
会員情報、商品情報、予約情報、投稿内容、注文履歴など、アプリで継続利用したい情報の多くはデータベースに格納されます。
画面に表示される内容の多くも、最終的にはデータベースに支えられています。
データベースが必要なのは、アプリを閉じても情報を残したいからです。また、複数ユーザーで同じ情報を共有したり、検索や並び替え、集計をしたりするためにも必要です。
ただし、データベースは保存の中心であって、業務ルールそのものや画面表示を担うわけではありません。そこはバックエンドやフロントエンドの役割です。
| 操作 | 意味 | 例 |
|---|---|---|
| Create | 作成 | 新規登録、投稿作成 |
| Read | 読み取り | 一覧表示、詳細表示 |
| Update | 更新 | プロフィール編集、予約変更 |
| Delete | 削除 | 投稿削除、退会処理 |
5. 三者はどう連携するのか
フロントエンド、バックエンド、データベースは独立して存在するのではなく、データの流れでつながっています。
もっとも基本的な流れは、ユーザーが入力し、フロントエンドがリクエストを送り、バックエンドが処理し、必要ならデータベースへアクセスし、その結果をフロントエンドへ返して画面を更新する、というものです。
この流れを理解すると、機能を設計しやすくなります。たとえば会員登録なら、画面で入力し、バックエンドで形式や重複を確認し、データベースへ保存し、結果を返します。
商品一覧なら、フロントエンドが一覧取得を要求し、バックエンドがデータベースから取得し、整形して返します。見た目は違っても、構造の型はかなり共通しています。
| 流れの段階 | 何が起こるか |
|---|---|
| 入力 | ユーザーが画面で操作する |
| 通信 | フロントエンドがリクエストを送る |
| 処理 | バックエンドが判定・整形する |
| 保存 | 必要に応じてDBへ記録する |
| 返却 | バックエンドが結果を返す |
| 更新 | フロントエンドが画面を更新する |
6. APIという橋渡し
フロントエンドとバックエンドは、通常APIを通じてつながります。APIは、どんなデータを送り、どんな結果を返すかを定義した窓口です。
フロントエンドが直接データベースへつながるのではなく、バックエンドを経由することで、処理やルール、権限を一元的に管理しやすくなります。
APIがあることで、画面側は「何を表示するか」に集中しやすくなり、バックエンド側は「どう処理するか」に集中しやすくなります。責務を分けるうえでも、APIは重要な境界線です。ブラウザー側では Fetch API などを通じて、この通信を実行できます。
| 課題 | 起こること | 解決 |
|---|---|---|
| フロントとバックの境界が曖昧 | 処理責任が混ざる | APIを明確な窓口にする |
| 画面側が直接保存へ触れる | 安全性や整合性が崩れる | バックエンドを仲介させる |
| 通信内容が不明確 | 開発が不安定になる | 入出力をAPIで定義する |
7. 基本構造を具体例で見る
会員登録を例にすると、フロントエンドは入力欄を表示し、利用者の情報を受け取ります。バックエンドは、その情報を検証し、重複や形式を確認します。
問題がなければデータベースへ保存し、その結果を返します。フロントエンドはそれを受けて、成功や失敗を表示します。
予約システムでも流れは似ています。画面で日時を選び、バックエンドで空き状況や重複を確認し、データベースへ保存し、結果を返します。
SNS投稿なら、入力、送信、保存、タイムライン更新という流れになります。個別のサービスは違って見えても、構造としてはかなり共通しています。
8. 役割を混ぜると何が起きるのか
役割が混ざると、変更が難しくなります。たとえばフロントエンドに業務ルールを置きすぎると、見た目の変更とルール変更が絡みます。
バックエンドに表示責務を混ぜすぎると、UI修正だけで処理側まで影響します。データベースにロジック責任を押し込みすぎると、全体の見通しが悪くなります。
責務分離は、きれいに見せるためだけの考え方ではありません。将来の変更や保守、デバッグ、テストをしやすくするための考え方です。
小さな変更で大きく壊れない構造を作ることが、Webアプリ開発では重要です。
9. この章の到達目標
この章を終えた時点で、次の内容を自分の言葉で説明できる状態を目指します。
- フロントエンドとは何か
- バックエンドとは何か
- データベースとは何か
- 三者がどのように連携するか
- なぜ責務を分けて考える必要があるのか
また、次の区別ができることも大切です。
| 区別したいもの | 観点 |
|---|---|
| 表示と処理と保存 | それぞれの責務の違い |
| フロントとバック | 画面か、業務処理か |
| バックとDB | 処理か、永続化か |
| APIと画面 | 通信口か、表示結果か |
10. 考えてみよう
なぜフロントエンド、バックエンド、データベースを分けるのでしょうか。もし全部を一か所にまとめたら、どんな変更が難しくなるでしょうか。
なぜフロントエンドだけで完結しないのでしょうか。なぜバックエンドがAPIの窓口になるのでしょうか。なぜ保存を別責務にする必要があるのでしょうか。
こうした問いに自分なりに答えられるようになると、技術を暗記するだけでなく、構造として理解し始めたと言えます。
11. まとめ
- Webアプリの基本構造は、フロントエンド、バックエンド、データベースの三つで捉えると理解しやすい。
- フロントエンドは画面と操作、バックエンドは処理とルール、データベースは保存と取得を主に担う。
- 三者の間には通信とデータの流れがあり、APIが橋渡しの役割を果たす。
- 構造を分けて考えることで、変更、保守、デバッグ、拡張がしやすくなる。
- この章の重要点は、技術名の暗記ではなく、「何がどこで動くのか」を説明できるようになることである。