ここまでの記事で、HTML・CSS・JavaScriptを書き、環境を整えるところまで来ました。では、そこで書いたものは全部「どちら側」の話だったのでしょうか。

エンジニアの求人票を見ると「フロントエンドエンジニア募集」「バックエンド経験者歓迎」と書かれています。なんとなく前と後ろ、表と裏、くらいのイメージはあっても、線がどこに引かれているのかははっきりしないと思います。

この記事で地図を1枚持っておくと、この先の「ページが届くまで」「サーバーの仕事」「拡張言語」といった話が、全部その地図の上に置けるようになります。

1. 違いは「動く場所」だけ

フロントエンドとバックエンドの違いは、突き詰めるとプログラムが動く場所の違いです。それ以上でも以下でもありません。

  • フロントエンド … 利用者の手元、つまりブラウザーの中で動く
  • バックエンド … 事業者の側、つまりサーバーの中で動く

難しいのは言葉の響きだけで、線引き自体はこれだけです。使う言語が違うから分かれているのではなく、動く場所が違うから分かれていて、結果として使う言語も違ってくる、という順番です。

2. ここまでは全部フロントエンドの話だった

「Webページはメモ帳で作れる」で、index.htmlを作ってブラウザーで開きました。あのとき、サーバーは一度も登場していません。ファイルをダブルクリックしただけで、文字が並び、色が付き、星が流れました。

つまり、HTML・CSS・JavaScriptはあなたのパソコンに届いてから動いているということです。ここまでの記事で書いてきたものは、すべてフロントエンド側の話でした。

3. 見えるもの、見えないもの

動く場所が違うと、「誰に見えるか」も変わります。

フロントエンド バックエンド
動く場所 利用者のブラウザー 事業者のサーバー
利用者に届くか 届く 届かない
中身が見えるか 見える 見えない
よく使う言語 HTML / CSS / JavaScript JavaScript(Node.js) / Python / Go / PHP など
担当する例 画面の見た目、ボタンの反応 ログイン判定、データの保存、決済

フロントエンドのコードが見えるというのは比喩ではありません。ブラウザーで適当なページを右クリックし、「ページのソースを表示」や「検証」を選んでみてください。そのページのHTML・CSS・JavaScriptが、そのまま読める形で出てきます。

一方、サーバーの中で動いているプログラムは、どれだけ検証画面を眺めても出てきません。利用者の手元に届くのは、サーバーが処理した結果だけだからです。

4. 秘密を持てるのはサーバー側だけ

この記事でいちばん覚えてほしいのはここです。

フロントエンドに書いたものは利用者に丸見えなので、秘密を置けません。例えば、外部サービスを使うための認証キー（APIキー）を、こんなふうにJavaScriptに書いたとします。

// これは絶対にやってはいけない例
const API_KEY = "sk-live-abcd1234...";
const res = await fetch(`https://api.example.com/data?key=${API_KEY}`);

このファイルは利用者のブラウザーに届いて動くものなので、検証画面を開けば誰でもこのキーを読めます。読めるということは、他人があなたのアカウントでそのサービスを使い放題になるということです。

正しい形はこうです。キーはサーバーの中に置き、ブラウザーからは自分のサーバーに頼むだけにします。

// ブラウザー側（フロントエンド）
const res = await fetch("/api/data");   // キーは持たない

// サーバー側（バックエンド）で、サーバーだけが知っているキーを使って
// 外部サービスに問い合わせ、結果だけをブラウザーに返す

パスワード、他人の個人情報、課金にかかわる判定も同じです。これらはすべてサーバー側にしか置けません。役割を分けるのは作法やお行儀の問題ではなく、分けないと秘密が守れないからです。

5. ログインの一往復で見る

「動く場所」と「秘密」が両方出てくる例として、ログインの流れを追ってみます。

  1. 利用者がIDとパスワードを入力する … フロント
  2. 入力が空でないかを確認して送信する … フロント
  3. 受け取ったパスワードが登録済みのものと一致するか調べる … バック
  4. 一致したら「この人は本人だ」という証明書を発行して返す … バック
  5. 返ってきた結果に応じて画面を切り替える … フロント

ここで3番目の「パスワードが合っているかの判定」をフロント側に置いたらどうなるでしょうか。判定するためには正解のパスワードを手元に持っていなければならず、そのコードは利用者に丸見えです。つまり、その時点で全員のパスワードが漏れます。

「見えていい処理はフロント、見せてはいけない処理はバック」という線引きは、こういう具体的な理由から来ています。

6. この地図の上に、これから何を重ねるか

  • 次の記事では「作ったページが相手に届くまで」を一本道でたどります。そのとき、どこがフロントでどこがサーバーかを、この地図に対応づけてください。
  • そのあと、サーバーが具体的に何をしている装置なのかを掘り下げます。
  • さらに、フロント側の道具立て（SassやTypeScript）の話に進みます。サーバー側もJavaScriptで書けるようになった、という話もそこにつながります。

まとめ

  • 違いは動く場所。ブラウザー（フロント）か、サーバー（バック）か。
  • ここまでの記事で書いたHTML・CSS・JavaScriptは、すべてフロントエンド側だった。
  • フロントのコードは利用者に丸見え。秘密を持てるのはサーバー側だけ。だから役割を分ける。