第10章　フロントエンドとバックエンド ―― 「客席」と「厨房」

この章の要点

• これまで作ったものは、すべて「フロントエンド（客席）」
• フロントエンドの中身は、誰でも覗ける
• 見せたくない処理を置く「バックエンド（厨房）」は、この先の世界

ここまで作ったものは、全部「フロントエンド」

ここで、開発の世界でとても大事な2つの言葉を整理しておきます。フロントエンドとバックエンドです。この違いがわかると、「何が見えていて、何が隠れているのか」「何を守るべきか」が見えてきます。

Webサイトを見ているとき、ボタンをクリックしたり、文章を読んだり、画像を眺めたりしますよね。この目に見えている部分すべてが、フロントエンド（front-end）と呼ばれる領域です。frontは「前面」、つまり「ユーザーの目の前にある側」。

第5章の自己紹介ページも、第9章のホームページも、基本的にはすべてフロントエンドです。

⸻

フロントエンドの中身は、誰でも覗ける

ここが今回いちばん大事なポイントです。

フロントエンドのコードは、ブラウザに送られて、ブラウザの中で動く仕組みです。動かすには、ブラウザがコードの中身を読まなければなりません。ブラウザが読める＝ブラウザを使っている人も読める、ということです。

試しに、今見ているWebページで「F12」キー（Macなら「Cmd + Option + I」）を押してみてください。「開発者ツール」という画面が開き、そのページを構成しているコードがすべて表示されます。つまり、フロントエンドのコードは誰でも自由に見られるのです。

これは、自己紹介ページやホームページなら問題ありません。もともと「見せるためのもの」だからです。けれど、もしパスワードや、外部サービスを使うための秘密の鍵のような「見られたくないもの」をフロントエンドに置いてしまうと、それも丸見えになってしまいます。

⸻

見られたくない処理を置く場所 ―― それが「バックエンド」

では、見られたくない処理はどこに置けばいいのか。答えは、ブラウザではなくサーバーで動くコードの中です。この「サーバー側で動くコード」の領域を、バックエンド（back-end）と呼びます。backは「裏側」、つまりユーザーから見えない裏側です。

バックエンドに置いたコードは、開発者自身しか見られません。ブラウザの開発者ツールを開いても、一切表示されません。

⸻

レストランで例えるとわかりやすい

少し抽象的なので、レストランで考えてみましょう。

フロントエンド = 客席 お客さんが座って、メニューを見て、料理を受け取る場所。お客さんから見えるものはすべてここにあります。

バックエンド = 厨房 お客さんは厨房の中を見られません。レシピも、食材の仕入れ先も、調理の手順も、すべて厨房の中に隠されています。

お客さん（フロントエンド）が「お水ください」と注文する。厨房（バックエンド）が水を用意して客席に届ける。お客さんは、その水がどこから来たかを知る必要はありません。

たとえば天気情報や予約データのような「外部サービスとのやり取り」が必要になったとき、その秘密の鍵を厨房（バックエンド）の中だけで使い、結果だけを客席（フロントエンド）に届ける。こうすれば、鍵はお客さんの目に触れません。

⸻

厨房を増築する道具 ―― Next.js

「バックエンドを作る」と聞くと身構えますが、思ったよりシンプルです。Next.js（ネクスト・ジェイエス）というツールを使うと、1つのプロジェクトの中に、客席（フロント）と厨房（バック）を同居させられます。

第5章で「シンプルなページには使わない」とお伝えしたフレームワークが、まさにこのNext.jsです。フレームワークとは、家を建てるときの「骨組みセット」のようなもの。土台があらかじめ用意されていて、その上に乗っかる形で開発を進められます。

Next.jsを使うのは、自分の店に厨房を増築するイメージです。客席と厨房が同じ建物の中にあり、管理する場所が1つで済むので、AI開発との相性も抜群です。そして、第8章で触れたVercelは、このNext.jsを最高の状態で動かせます（同じ会社が作っているからですね）。

⚠️ ただし、Next.jsを使うと、専用ソフトのインストールやコマンド操作など、難易度が一段上がります。自己紹介ページやホームページのように「見せるだけ」のサイトには、厨房（バックエンド）は不要です。厨房が必要になるのは、ログイン・データ保存・外部サービス連携のような「見られたくない処理」が出てきたとき。本コンテンツでは、その手前まで。「厨房という世界がある」と知っておくことが、今回のゴールです。

第10章のまとめ

• これまで作ったものは、すべてフロントエンド（客席）。中身は誰でも覗ける
• 見せたくない処理は、バックエンド（厨房＝サーバー側）に置く
• Next.jsは1つの建物に客席と厨房を同居させる道具。必要になったときに使う