画面を作るのは手元のフロント、判断とデータは奥のバックエンドという分担です。守りたいものを奥に置くから、安全と改善のしやすさを両立できます。
- フロントは見た目係で、本物のデータは持たない
- 見た目と中身を別々に改善できる — 直しても壊し合わない
- 保管庫に触れるのはバックエンドだけ
なぜ画面と処理は別々に分かれているのか
ふだん使う業務システムは、ひとつのプログラムが全部やっているように見えます。実際は、見た目を作る係とデータを扱う係が手分けして働いています。ボタンをひと押ししたとき、裏で誰が何をしているのかをたどりましょう。
ひとつの操作を最後まで追いかける
各ステップ・参加者・分岐をクリックすると、その仕組みの説明がここに表示されます。
この図をテキストで読む
シーケンス図「フロントとバックエンドの分担（お願い → お返事）」。参加者5人、ステップ9個。 【参加者】（左から右） - あなた: 画面を操作する人 - フロント（見た目係）: ブラウザ / あなたの手元 - 受付窓口（API）: お願いの取り次ぎ口 - バックエンド（データ係）: 会社のサーバーで動く - データベース: 本物のデータを保管 【流れ】（上から下へ） ── お願いの流れ（あなた → 保管庫） ── 1. あなた → フロント（見た目係）: ボタンを押す（例：受注一覧を見たい） 2. フロント（見た目係） → 受付窓口（API）: 受注の一覧をください 3. 受付窓口（API） → バックエンド（データ係）: お願いを取り次ぐ 4. バックエンド（データ係）（自身で処理）: この人に見せてよいか確認・計算 5. バックエンド（データ係） → データベース: 必要なデータを出して ── お返事の流れ（保管庫 → あなた） ── 6. データベース → バックエンド（データ係）: データを取り出して渡す（応答） 7. バックエンド（データ係） → 受付窓口（API）: 必要な形に整えて返す（応答） 8. 受付窓口（API） → フロント（見た目係）: 結果をフロントへ渡す（応答） 9. フロント（見た目係） → あなた: 見やすい形に組み立てて画面に表示（応答）
大事な判断は奥で行う
「見せてよいか」「金額は正しいか」といった判断は必ずバックエンドで行います。手元のフロントは利用者が書き換えられるため、守りたいデータや判断ルールは奥のサーバーに置きます。
押さえておきたい用語
- フロントエンド
- あなたの手元（ブラウザ）で動き、画面の見た目と操作感を作る係。本物のデータは持たず、必要なら奥にお願いします。
- バックエンド
- 会社のサーバーで動き、判断・計算・データの出し入れを担う係。見た目は作らず、大事なルールを守ります。
- API（受付窓口）
- フロントとバックエンドが『決められた言い方』でやり取りするための窓口。入口を絞ることで分担と安全を両立します。
- データベース
- 本物のデータを整理して保管する場所。やり取りできるのはバックエンドだけで、フロントから直接は触れません。
ここから先へ
この解説とつながりのあるページ