サーバー、データベース、バックエンド、API ―― ウェブ開発の用語すべて分かる

ウェブアプリの開発プロセス

ウェブアプリケーションの開発は、『フロントエンド開発』と『バックエンド開発』とに分けられます。

「フロントエンド」とは、GoogleクロームやSafariなどのブラウザ上で表示される部分です。

ユーザーが目にするところになります。

一方で「バックエンド」とは、フロントエンド上でユーザーが入力したデータを処理したり、保存したりする部分です。

ユーザーが目にすることはありません。

しかしこういった言葉だけの説明ではわかりづらいので、実例を見ていきましょう。

⚫︎ monotein.base.shop/p/00005

フロントエンドとバックエンドを実例で確認

下記URLを開いてください。

• https://react-book-corona-tracker-app.netlify.app/world

これは私が制作・販売している教材で作った見本ウェブアプリです。

フロントエンド開発で使われるReactというテクノロジーをビギナー向けに解説した『はじめてさわるReact & JavaScript」』という教材です。

URLを開くと、次図のように世界各国のコロナウィルスのデータが表示されています。

ここで考えたいことがひとつあります。

「ここに表示されているデータはどこから来ているのか？」ということです。

答えを見てみましょう。

下記URLにアクセスしてください。

• https://monotein-books.vercel.app/api/corona-tracker/summary

次のように表示されます。

文字や数字がいくつも書かれていて複雑に見えます。

なので、ページの上のあたり（次図の青でカバーされている部分）に注目してください。

ここに改行を入れて見やすくすると、次のようになっています。

...

"Countries": [
    {
        "ID": "002d8576-d908-4d9c-a5e3-4f7b27426ec5",
        "Country": "Afghanistan",
        "CountryCode": "AF",
        "Slug": "afghanistan",
        "NewConfirmed": 0,
        "TotalConfirmed": 155191,
        "NewDeaths": 0,
        "TotalDeaths": 7206,
        "NewRecovered": 0,
        "TotalRecovered": 0,
        "Date": "2021-10-04T22:48:42.803Z",
        "Premium": {}
    },

...

"Country"という「国名」には"Afghanistan"とあります。

"TotalConfirmed"、つまり「感染者総数」には155191とあります。

次に、先ほど開いたウェブアプリケーションの左上（下図の赤枠）を見てみましょう。

そうすると「Afghanistan」とあり、「感染者総数」には、上で見た"TotalConfirmed"と同じ数字が表示されています。

「Afghanistan」以外の国を見ても、上の2つのURLには同じような対応関係が成りたっています。

ここから考えられるのは、次のことです。

• 表示されている全世界の感染データは、このウェブアプリケーションが自ら計算や測定をして生み出しているのではない

• ウェブアプリケーションがデータをhttps://monotein-books.vercel.app/api/corona-tracker/summaryから取得しているだけ

• 私たちが目にしている紫色の背景やピンクの文字といったウェブアプリケーションのフロントエンド部分は、バックエンドから取得した数字と文字だけの無機質なデータに、色や形をつけて見やすくしているだけ。

つまり、ウェブアプリケーションにおけるフロントエンドとは、バックエンドからのデータを表示する空（から）の入れ物なのです。

バックエンドのデータがあって初めて意味があるのです。

テレビを考えてみましょう。

もしケーブルのつながっていないテレビがあったら、それは単なる大きな黒い箱に過ぎません。

しかしそこにケーブルをつなぎ、放送を受信できるようにしてあげると、画面に色とりどりの景色や人や物が表示され、私たちの役に立つものとなります。

⚫︎ monotein.base.shop/p/00005

データベースやサーバー、APIはどのような関係にあるか？

多くのウェブアプリケーションには、データを保存する場所が必要です。

「データベース」です。

そのため通常「バックエンド」というと、「データベース」と「サーバー」を合わせたものを指します。

ここまで「フロントエンド」「バックエンド」「データベース」「サーバー」など、さまざまな言葉が出てきましたが、これらは次図のような関係にあります

なお、先ほどの感染データのように、バックエンドが提供するデータは通常「API」と呼ばれます。

• 「APIにつなぐ」
• 「APIからひっぱってくる」
• 「APIから取得する」

これらは、バックエンドが提供するデータについて話しています。

世界の天気や人口動態、外国為替、株価、AI回答など、様々なデータを提供しているAPIサービスは数多くあります。

それらのサービスはバックエンドの代わりになります。

フロントエンドを作るだけで、ウェブアプリケーションを作れるのです。

フロントとバック、両方作れるNext.js

2026年のアプリ開発では、Next.jsというツールを使うのが主流です。

フロントエンドとバックエンドを一緒に開発できるからです。

Next.jsを含め、2026年最新のウェブテクノロジーを理解したい方はこちらの記事をご覧ください。

⚫︎ monotein.base.shop/p/00005