Web開発を学び始めると、フロントエンド、バックエンド、クライアントサイド、サーバーサイドという言葉が何度も出てきます。
どれも 画面側 裏側 という雰囲気では分かるものの、会話の中で混ざりやすい言葉です。
最初に結論を書くと、次のように分けるとかなり整理しやすくなります。
- フロントエンド: 利用者が見る画面や操作部分を作る領域
- バックエンド: アプリの裏側でデータ処理や業務ロジックを扱う領域
- クライアントサイド: 利用者のブラウザや端末側で動く処理
- サーバーサイド: サーバー側で動く処理
この記事では、この4つの意味を、担当領域 と 処理が動く場所 に分けて整理します。
まず全体像
4つの言葉は、同じ軸で並んでいるわけではありません。
ここを押さえると、一気に分かりやすくなります。
| 言葉 | 主に表すもの | ざっくり言うと | 例 |
|---|---|---|---|
| フロントエンド | 担当領域 | 利用者が触る画面側 | 画面、フォーム、ボタン、状態管理 |
| バックエンド | 担当領域 | アプリの裏側 | API、認証、DB、業務ロジック |
| クライアントサイド | 処理場所 | 利用者の端末側 | ブラウザで動くJavaScript |
| サーバーサイド | 処理場所 | サービス提供側のサーバー | PHPやLaravelで動く処理 |
つまり、フロントエンドとバックエンドは 何を担当するか の話です。
クライアントサイドとサーバーサイドは どこで処理が動くか の話です。
フロントエンドとは
フロントエンド は、WebアプリやWebサイトで利用者が直接見る画面や操作部分を作る領域です。
HTML、CSS、JavaScript、React、Vue、フォーム、ボタン、入力エラー表示、画面遷移などが関係します。
たとえば、次のような仕事はフロントエンドに含まれやすいです。
- 画面のレイアウトを作る
- ボタンやフォームを実装する
- APIから受け取ったデータを画面に表示する
- 入力中のエラーを分かりやすく出す
- ローディング状態を表示する
- スマホでも崩れないようにする
- キーボード操作やアクセシビリティを考える
見た目だけではなく、利用者が迷わず操作できるようにすることもフロントエンドの大事な役割です。
バックエンドとは
バックエンド は、Webアプリやサービスの裏側でデータ処理、認証、業務ロジック、APIなどを扱う領域です。
利用者が直接見る画面ではなく、画面から送られたリクエストを受け取り、必要な処理をして結果を返す側です。
たとえば、次のような仕事はバックエンドに含まれやすいです。
バックエンドは、見えにくい部分ですが、アプリの正確さ、安全性、保守性に強く関係します。
クライアントサイドとは
クライアントサイド は、利用者のブラウザやスマホアプリなど、サービスを使う側の端末で動く処理を指します。
Webでは、ブラウザで動くJavaScriptが代表例です。
たとえば、次のような処理はクライアントサイドです。
- ボタンを押したらメニューを開く
- 入力中に文字数を数える
- ブラウザ上で画面の一部を書き換える
- APIを呼び出して結果を表示する
- タブやモーダルを切り替える
- 地図やグラフをブラウザ上で操作する
クライアントサイド処理は、操作感をよくしやすい一方で、利用者の端末で動くため、秘密情報を置く場所としては向きません。
管理者だけが使えるキー、決済の確定、権限の最終判断などは、基本的にサーバー側で扱うべきです。
サーバーサイドとは
サーバーサイド は、Webサーバーやアプリケーションサーバーなど、サービス提供側の環境で動く処理を指します。
PHP、Java、Python、Ruby、Go、Node.jsなどで書かれることが多いです。
たとえば、次のような処理はサーバーサイドです。
- ログインしてよいユーザーか確認する
- データベースから記事を取得する
- 注文データを保存する
- HTMLを生成してブラウザに返す
- APIとしてJSONを返す
- メールを送る
- 決済サービスと通信する
- アクセスログを残す
サーバーサイドは、利用者から直接見えにくい場所で動きます。
そのため、権限確認、データ更新、秘密鍵の利用など、信頼できる環境で行うべき処理を担当しやすいです。
4つの関係をリクエストの流れで見る
Webアプリの動きを、記事一覧ページを開く例で見てみます。
- 利用者がブラウザでURLを開く
- ブラウザがサーバーへリクエストを送る
- サーバーサイドで記事データを取得する
- サーバーがHTMLやJSONを返す
- ブラウザが画面を表示する
- 必要ならクライアントサイドのJavaScriptが画面を更新する
この流れの中で、フロントエンドは 利用者が見る画面や操作体験 を担当します。
バックエンドは データ取得、保存、認証、API などを担当します。
一方、クライアントサイドは ブラウザ側で動く処理、サーバーサイドは サーバー側で動く処理 です。
同じ画面表示でも、どこでHTMLを作るかによって、クライアントサイド寄りにもサーバーサイド寄りにもなります。
よくある組み合わせ
実務では、次のような組み合わせがよくあります。
昔ながらのWebサイト
サーバーサイドでHTMLを作り、ブラウザは受け取ったHTMLを表示します。Laravel Blade、Rails、Djangoテンプレートなどが近い例です。
SPA + API
フロントエンドがブラウザ側で画面を組み立て、バックエンドはAPIとしてJSONを返します。ReactやVueとAPIサーバーの組み合わせです。
SSRフレームワーク
Next.jsやNuxtのように、フロントエンド寄りの技術でサーバーサイドレンダリングも扱う構成です。境界が少し混ざります。
モバイルアプリ + API
スマホアプリがクライアント、APIサーバーがバックエンドです。画面はアプリ側、認証やデータ保存はサーバー側に寄ります。
このように、フロントエンドとバックエンドはチームや役割の話として使われることが多く、クライアントサイドとサーバーサイドは実行場所の話として使われることが多いです。
混同しやすいポイント
フロントエンド = クライアントサイド？
かなり近いですが、完全に同じではありません。
フロントエンドは画面側の担当領域です。クライアントサイドはブラウザや端末側で動く処理です。
たとえば、SSR では、フロントエンドの画面をサーバー側で生成することがあります。
この場合、フロントエンドの仕事なのに、処理場所はサーバーサイドにも関わります。
バックエンド = サーバーサイド？
これもかなり近いですが、完全に同じではありません。
バックエンドはAPI、認証、DB、業務ロジックなどの裏側の領域です。サーバーサイドはサーバーで動く処理です。
サーバー側でHTMLを生成するだけの処理はサーバーサイドですが、会話によっては バックエンド より サーバーサイドレンダリング と呼んだ方が分かりやすいこともあります。
JavaScriptはフロントエンド専用？
専用ではありません。
JavaScriptはブラウザで動くためフロントエンドの中心技術ですが、Node.jsを使えばサーバーサイドやバックエンドにも使われます。
PHPはバックエンド専用？
PHPはサーバーサイドでよく使われますが、HTMLテンプレートを返すWebサイトでは画面表示にも深く関わります。
つまり、言語名だけでフロントエンドかバックエンドかを完全に決めるのは少し雑です。
初心者はどう覚えるとよいか
最初は、次の2軸で覚えるのがおすすめです。
| 軸 | 対になる言葉 | 見方 |
|---|---|---|
| 担当領域 | フロントエンド / バックエンド | 誰が何を作るか |
| 処理場所 | クライアントサイド / サーバーサイド | どこで処理が動くか |
会話で迷ったら、次のように言い換えると分かりやすいです。
- それは画面側の話か、裏側の話か
- その処理はブラウザで動くのか、サーバーで動くのか
- その判断を利用者の端末に任せて安全か
- APIで分けるのか、サーバーでHTMLを返すのか
この4つを確認できると、Webアプリの構成がかなり見えやすくなります。
まとめ
フロントエンド、バックエンド、クライアントサイド、サーバーサイドは、似ていますが同じ軸の言葉ではありません。
フロントエンドとバックエンドは、主に担当領域の違いです。
フロントエンドは利用者が触る画面側、バックエンドはデータ処理や認証などの裏側を担当します。
クライアントサイドとサーバーサイドは、主に処理が動く場所の違いです。
クライアントサイドは利用者のブラウザや端末側、サーバーサイドはサービス提供側のサーバーで動く処理です。
最初は 担当領域 と 処理場所 を分けて考えるだけで十分です。
そのうえで、SPA、SSR、API、サーバーサイドテンプレートのような構成を学ぶと、言葉のズレで迷いにくくなります。
参考
- MDN: Glossary of web terms
- MDN: Server-side rendering (SSR)
- MDN: Client-side Rendering (CSR)
- MDN: Node.js