WEBアプリケーション（フロントエンドとバックエンドとは？）

Last updated at 2026-06-30Posted at 2026-06-21

フロントエンドとバックエンドとは？

前置き

※ この記事は、AI全盛期において、敢えて基本に立ち返った技術要素を知ることを目的にしています。

ソフトウェア初学者向けに全体像をつかむことを目的にした解説です。

理解しやすさを優先するため、細かな例外や厳密な定義は一部省略しています。

実際の運用や詳細については、公式ドキュメントや上位の資料で補完してください。

この記事でわかること（概要）

フロントエンドとバックエンドの超基本
それぞれの担当範囲のイメージ
2つがどう連携してWEBアプリケーションとして成り立っているか

この記事の要点

フロントエンドは「見える部分」、バックエンドは「支える部分」を担当します。
フロントエンドは主に画面表示と操作受付、バックエンドは主に処理判断とデータ管理を担当します。
どちらか片方だけではWEBアプリケーションは完結しません。

全体像

まずはシンプルに、次の2つの違いを認識することが大切です。

フロントエンド: ユーザーに見えるGUI部分を指します。
バックエンド: 裏側（サーバー側）で、WEBアプリケーションの中身を処理して結果をフロントエンドへ返します。

次回の記事で「違い」を掘り下げるので、この記事では「役割が分かれている」という理解だけ持てればOKです。

この前提で見る担当範囲

この記事では、次の範囲を担当として見ます。

フロントエンド（WEBブラウザ画面）
- 代表的なもの
  - Google Chrome
  - Microsoft Edge
  - Apple Safari など
バックエンド（APサーバー、DB、外部サービス連携）
- 主な構築例：クラウド環境、オンプレミス環境（自社等の独自サーバー環境）、ローカル環境（主にテスト環境として用意）
  - クラウド環境を提供しているサービス
    - Amazon AWS上（EC2やECSなど）
    - Microsoft Azure など
  - オンプレミス環境
    - 自社が用意したサーバー環境（OSベースで区分した場合）
      - Windows Server（IIS）
      - Linux Server など（OSSメイン、Apache、Nginx）
  - ローカル環境（アクセス先で区分した場合）
    - VMマシン上に構築
    - 個別のPCを用意して共有アクセス用の環境を構築

この線引きを先に持つと、今どの領域の作業をしているかを迷いにくくなります。

ここだけ押さえる3ポイント

1. フロントエンドは「見せる・受け取る」

ボタン、入力フォーム、一覧表示など、ユーザーが直接触れる部分を作ります。

2. バックエンドは「判断する・整える」

受け取った要求に対して、業務ルールを適用し、必要なデータを扱います。

3. 価値は連携で生まれる

フロントエンドが要求し、バックエンドが処理し、結果を返して画面に反映する。
この往復で、初めて機能として成立します。

処理の流れの図

構成のイメージ図

勘違いしやすい解釈

実装中は、自身が今どの部分を触っているのか、どちらの役割なのかが混ざりがちです。
フロントエンドだけ作ればアプリは完成すると考えがちです。
バックエンド側がフロントエンドに対して処理を行うので、バックエンドの処理のスコープを勘違いしがちです。
- ただし、入力されたデータのバリエーション（入力文字範囲のチェック）は、フロントエンド側で行うことが多いです。

実際の業務で押さえておきたいポイント

仕様を見るときに「これは画面の責務か、サーバーの責務か」をまず切り分けます。
不具合調査の場合は「入力値なのか」「通信中のエラーなのか」「処理がおかしいのか」「表示だけの問題なのか」など、それぞれの役割ごとに、どのフェーズでおかしな挙動をしているか？を見極めてフェーズごとに確認（デバッグ）します。
チーム内の会話では「フロントで直すか、バックで直すか」を先に明確にします。

まとめ

フロントエンドはユーザー操作部分、バックエンドは実処理を担当します。
2つは分業ですが、常に連携して1つの機能を実現します。
次回は、この2つの違いをもう一段具体的に掘り下げます。

この理解のあとに進めていけること

WEBアプリケーションのフロントエンドとバックエンドの役割の違いを理解できたら、WEBアプリケーションの動作の構造仕組み（クライアントとサーバーの役割）と照らし合わせて全体構造を理解していきます。