id: F-47(誌面表示: F-47) · 物理ページ: 372–373(pages=2) · category: term_tool · figure_type: comparison · status: ready · evaluation_date: 2026-08-10
tagline 34/25-45何を 91/60-200どこで 89/60-200会話例 36/25-50見1 30/15-40見2 29/15-40見3 24/15-40見4 25/15-40見5 22/15-40見6 19/15-50
← F-46 デバッグ 目次 F-50 git →
技術用語
372

フロントエンド/バックエンド

画面を作る役割と、データや処理を支える役割に分けた開発の呼び方です。
体験区分:少しだけ触った 推奨読者レベル:Level 1-2

何をしてくれるか

フロントエンドは利用者が見て触る画面側を担当し、バックエンドはサーバー側でデータの保存・計算・認証などの裏方を担当します。両者はAPIでつながり、画面側から情報を頼んで受け取ります。

どこで出会うか

AIに開発を頼むとき、フロントエンドの見た目の話かバックエンドの処理の話かを分けて伝えると意図が通ります。個人開発ではSupabaseのように裏側をまるごと任せる選択もあります。

比較図
図(figure_type: comparison)は本番生成器(Astro + React primitive)で描画。
iter 22 時点ではプレースホルダ。
フロントエンド/バックエンド を使う人

画面(左=フロントエンド)とサーバー(右=バックエンド)を左右に対比配置し、中央の境界線上に「API」という橋・窓口のアイコンを描く。左右の色や質感を変えて役割の違いを視覚化する

擬人化ポンチ絵 · 後日差し込み
開発フローでの位置
要件整理
フロントエンド実装
バックエンド実装
API接続確認
2026.08·ready
「その機能はフロントエンドの見た目、それともバックエンドの処理ですか?」
フロントエンド/バックエンドの見方
373
この用語の見どころ
1
役割

画面側の役割と、データを扱う裏側の役割を分けて呼ぶ言葉です。

2
うれしさ

担当範囲がはっきりし、AIへの依頼も分担しやすくなります。

3
注意点

境界のAPI設計を誤ると、両者の連携がずれます。

4
どこで役立つか

画面設計や機能実装をAIに相談するときに使います。

5
はじめに

自分が触る画面はどちら側かを意識してみます。

6
深掘り先

API、フルスタック、Supabase

非エンジニアのつまずき
  • フロントとバックのどちらが「表」なのか混乱します
  • 自分が触っているのがどちら側か分かりません
  • 両方できないと作れないのか不安になります
私のコメント
  • 第一印象:名前が直感に反していて分かりにくいです
  • 良い点:見える側と裏側、と分ければ腑に落ちます
  • ダメな点:境目を意識する場面は減りました
  • 誰向けか:自分で何か作りたい人みんな向けです
関連用語
備考

API(F-213)の説明は最小限に留め、詳細は F-213 側に委ねています。

F-47·term_tool
バイブコーディング図鑑