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