3秒でわかる
ブラウザから見えないサーバー側で動く処理の総称。リクエストを受けてDBを読み書きし、認証を通して結果を返す部分を指します。
30秒図解
もう少し詳しく
どういうものか
バックエンドは、利用者の画面には現れないサーバー側の処理全体を指します。HTTPリクエストを受け取り、URLに応じた処理へ振り分け、データベースを読み書きし、ログイン中の人が本当にその操作をしてよいかを確かめ、JSONやHTMLを返すまでが担当範囲です。Node.js、Go、Java、Python、PHPなど、サーバーで動く言語ならどれでも書けます。
なぜ必要か
画面側だけでアプリが作れない理由は2つあります。ひとつはデータの共有です。ブラウザの中だけで完結すると、そのデータは端末を変えた瞬間に消え、他の利用者とも共有できません。もうひとつは信頼できない場所という性質です。ブラウザのコードは利用者が自由に書き換えられます。価格の計算や在庫の確認、権限の判定を画面側だけで行うと、開発者ツールから金額を1円に書き換えて注文を通せてしまいます。守る必要のある判断は、書き換えられない場所へ置く必要があります。
具体例
// Express での最小のバックエンド
import express from "express";
const app = express();
app.use(express.json());
app.get("/api/orders/:id", async (req, res) => {
const order = await db.order.findUnique({ where: { id: req.params.id } });
if (!order) return res.status(404).json({ error: "not found" });
if (order.userId !== req.user.id) return res.status(403).json({ error: "forbidden" });
res.json(order);
});
app.listen(3000);金額の再計算や持ち主の確認をここで行う点が要点です。画面から送られてきた値をそのまま信じないのがバックエンドの基本姿勢です。
つまずきやすいところ
学習中によくあるのは、APIキーをフロントエンドに書いてしまう事故です。ビルド後のJSに文字列がそのまま残るので、閲覧者全員に鍵が渡ります。外部APIの鍵はバックエンドに置き、フロントは自分のサーバー経由で呼びます。もうひとつは、開発機では動くのに公開すると動かないという詰まり方で、多くは環境変数の未設定か、DBへの接続元IP制限が原因です。
似た用語との違い
| 語 | 担当 |
|---|---|
| フロントエンド | 利用者の端末で動く表示と操作 |
| バックエンド | サーバーで動く処理とデータ管理 |
| インフラ | サーバーやネットワークそのものの構築と運用 |
覚え方
利用者が書き換えられない場所で動くものがバックエンド、と分けて覚えると境界を見失いません。