【解説】フロントエンド・バックエンドとは？開発の流れ・連携

フロントエンドとバックエンドについて

私たちが日頃使用しているWebシステムやWebアプリケーションは、以下の図のように「フロントエンド」、「バックエンド」という2つの仕組みによって動作しています。

では、「フロントエンド」と「バックエンド」はそれぞれどういった違いがあるのかを以下で解説していきます。

フロントエンドとは

フロントエンドとは、WebシステムやWebアプリケーションで直接ユーザーに見えたり操作したりする部分のことです。
WebシステムやWebアプリケーション等でユーザーがWebブラウザ上で文字を入力したり、ボタンをクリックしたりする動作は、このフロントエンド部分でおこなっています。
また、Webページのデザインや画面のフォームで入力した内容をバック（サーバー）側に伝える役割もおこないます。
フロントエンドの開発言語は「HTML」、「CSS」、「JavaScript」などがあります。

バックエンドとは

バックエンドとは、WebシステムやWebアプリケーションで直接ユーザーに見えない部分のことです。
サーバーやデータベースなどで構成されており、ユーザーがフロントエンド側で入力した情報内容を適切に処理したりデータ情報をデータベース（DB）に保存したり、リクエストに応じてデータを出力したりする役割をおこないます。
バックエンドの開発言語は幅広いですが、代表的なもので「Java」、「PHP」、「Python」、「Ruby」などがあります。

フロントエンドとバックエンドの開発の流れについて

フロントエンドの開発の流れ

フロントエンド開発の主な流れは、要件定義を基にデザイナーがクライアントと打ち合わせをしながらデザインを作成します。
次に要件定義を基にソフトウェアの構造やコンポーネントの設計をおこない、モックアップを作成します。
モックアップを作成することで、画面の動きやデザインをよりリアルに可視化でき、クライアントとの要件定義における認識の齟齬を防ぐことができます。
その後、設計書に則って機能の実装をおこない、テストを実施し実装の過程で発生したエラーやバグを修正します。

バックエンドの開発の流れ

バックエンド開発の主な流れは、要件定義を基にシステムの概要（おおまかな構造やインターフェイス、データの種類など）の基本設計を作成し、その基本設計をよりプログラムに近い形（システムの内部構造やデータのフロー、想定し得るエラーの処理など）を詳細に起こした詳細設計を作成します。
その後、作成した設計書を基にシステムを実装し、設計書どおりにシステムが動作するかのテストをおこないます。

フロントエンドとバックエンドの連携

フロントエンドとバックエンドが連携することにより、ユーザーが入力したデータ情報の処理やユーザーが要求した機能が実行可能になります。その手法のひとつがAPI（インターフェース）です。
APIでフロントエンドとバックエンド間通信を可能にすることではじめて私たちが日頃使用しているWebシステムやWebアプリケーションが実現します。

関連記事

【解説】APIとは？仕組み・メリットデメリット・導入例

APIとは APIとは APIとは（Application Programming Interface）の略で「”アプリケーションソフトウェア”と”プログラム”を繋ぐ」という意味です。 ２つの異なるアプリケーションソフトウェア同士を連[…]

おわりに

以上、フロントエンドとバックエンドの違いについて解説いたしました。