ウェブアプリの開発プロセス
ウェブアプリケーションの開発は、「フロントエンド開発」と「バックエンド開発」とに分けられます。
「フロントエンド」とは、GoogleクロームやSafariなどのブラウザ上で表示される部分です。
ユーザーが目にするところになります。
一方で「バックエンド」とは、フロントエンド上でユーザーが入力したデータを処理したり、保存したりする部分です。
ユーザーが目にすることはありません。
言葉だけの説明ではわかりづらいので、実例を見ていきましょう。
フロントエンドとバックエンドを実例で確認
下記URLを開いてください。
https://react-book-corona-tracker-app.netlify.app/world
これは筆者が制作した見本ウェブアプリです。
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には同じような対応関係が成りたっています。
ここから考えられるのは、次のことです。
- 表示されている全世界の感染データは、このウェブアプリケーションが自ら計算や測定をして生み出しているのではない
- ウェブアプリケーションがmonotein-books.vercel.app/api/corona-tracker/summaryからデータを取得しているだけ
- 私たちが目にしている紫色の背景やピンクの文字といったフロントエンド部分は、バックエンドから取得した数字と文字だけの無機質なデータに、色や形をつけて見やすくしているだけ
つまり、ウェブアプリケーションにおけるフロントエンドとは、バックエンドからのデータを表示する空（から）の入れ物なのです。
バックエンドのデータがあって初めて意味があるのです。
テレビを考えてみましょう。
もしケーブルのつながっていないテレビがあったら、それは単なる大きな黒い箱に過ぎません。
しかしそこにケーブルをつなぎ、放送を受信できるようにしてあげると、画面に色とりどりの景色や人や物が表示され、私たちの役に立つものとなります。
データベースやサーバー、APIはどのような関係にあるか？
多くのウェブアプリケーションには、データを保存する場所が必要です。
「データベース」です。
そのため通常「バックエンド」というと、「データベース」と「サーバー」を合わせたものを指します。
ここまで「フロントエンド」「バックエンド」「データベース」「サーバー」など、さまざまな言葉が出てきましたが、これらは次図のような関係にあります。
なお、先ほどの感染データのように、バックエンドが提供するデータは通常「API」と呼ばれます。
- 「APIにつなぐ」
- 「APIからひっぱってくる」
- 「APIから取得する」
これらは、バックエンドが提供するデータについて話しているのです。
世界の天気や人口動態、外国為替、株価、AI回答など、さまざまなデータを提供しているAPIサービスは数多くあります。
それらのサービスはバックエンドの代わりになります。
フロントエンドを作るだけで、ウェブアプリケーションを作れるのです。
フロントとバック、両方作れるNext.js
2026年のアプリケーション開発では、Next.jsというツールを使うのが主流です。
フロントエンドとバックエンドを一緒に開発できるからです。
このNext.jsは、HTMLとCSSの経験があれば入門はできます。
こちらの記事で紹介しているので参考にしてください。