Lecture 07サーバーとは？
Web Appの裏側で処理を行うサーバーの役割を理解します。
Web Appには、ユーザーが見える 表側 と、見えない 裏側 があります。 裏側で静かに働いているのが サーバー。 ログイン確認、データの保存、決済、AIへの問い合わせなど、画面だけでは完結しない処理はすべてここで動いています。
このレクチャーでは、画面（クライアント）とサーバーの違い、 なぜ秘密情報をサーバーに置くのか、Next.jsだと両方を同じプロジェクトで作れる点を見ていきます。
1ユーザーから見える側と、見えない側
画面に表示されるボタンや文字は クライアント 側、 ボタンを押したあとの本格的な処理を裏側で受け持つのが サーバー 側です。 劇場でいえば、お客さんに見えるのが舞台、見えないところで動いているのが裏方さんです。
クライアントは ユーザーに近い ので反応が速く、 サーバーは 裏で動く ので秘密情報を扱えます。 この役割分担がWeb Appの基本です。
2サーバーが担当する処理
- ログイン確認：メールアドレスとパスワードが正しいかを照合する。
- データの保存：注文、投稿、設定などをデータベースに書き込む。
- 決済処理：決済サービス（Stripeなど）に支払いを依頼する。
- AIへの問い合わせ：AI APIに文章生成や要約を頼む。
いずれも「ブラウザだけでは終わらない」「秘密情報を扱う」「お金が絡む」処理です。 こういうものはクライアントに置かず、必ずサーバーで動かします。
3なぜ秘密情報はクライアントに置けないのか
ブラウザの画面は、誰でも中身を覗ける 仕組みになっています。 ページを右クリックして「ソースを表示」とすると、HTMLや一部のコードが見えてしまうのは経験があるかもしれません。
API Keyをブラウザに置くと盗まれます
APIキーやパスワードのような 秘密情報 をクライアント側のコードに書くと、 悪意のある人にコピーされて勝手に使われてしまいます。 こうした秘密情報はサーバー側にだけ置くのが鉄則です（詳しくはLecture 10と11で扱います）。
4Next.jsなら画面とサーバーを1つのプロジェクトで作れる
このレクチャーで使っている Next.js は、 画面（React Component）とサーバー側の処理を 同じプロジェクト内で扱える 仕組みになっています。
別々のサーバーを立てる必要がなく、AI開発との相性も良いです。 「画面はクライアント、データ保存はサーバー」と頭で分けつつ、 コード上は1つのプロジェクトでまとまる、という体験になります。
ブラウザ向き / サーバー向きを振り分ける
次の処理は、ブラウザで動かすべきか、サーバーで動かすべきか、考えてみましょう。 答えは下のCalloutで確認できます。
- ボタンの色を変える
- ユーザーのパスワードを確認する
- AI APIを呼び出す
- 入力フォームの文字数を数える
- 注文情報を保存する
答え合わせ
ブラウザ向き：ボタンの色を変える、入力フォームの文字数を数える。
サーバー向き：パスワード確認（秘密情報）、AI API呼び出し（APIキーが必要）、注文情報の保存（データベース）。
「秘密情報を扱うか」「データを保存するか」で見分けるのがコツです。
5理解確認チェックリスト
- サーバーは「裏側の処理」を担当すると理解している。
- 秘密情報はクライアントに置かない、と理解している。
- Next.jsでは画面とサーバー処理を同じプロジェクトで扱えると理解している。