Webアプリケーションにおける、フロントエンドとサーバーサイドの違い

フロントエンドの役割

様々なシーンで使われているWebアプリケーションの設計や開発において、フロントエンドとサーバーサイドという考え方があります。大まかにフロントエンドの役割は、WebサイトやWebサービスの表示やデザイン（Webサイトの構成やボタン、テキストボックスの作成・配置などユーザーが目にする部分）と、サーバーに情報を送信して必要な情報を要求する等が挙げられます。

例えば、ユーザーがWebサイトにログインしようとする場合、ログイン画面が表示されます。このログイン画面の表示やデザインを担当しているのがフロントエンドです。
別の例として、ショッピングサイトなどでは注文した商品の配送情報を確認できる機能がありますが、配送情報を確認する役割はフロントエンドが担い、注文商品の情報をサーバーに要求する役目はフロントエンドが担っています。フロントエンドはユーザーとサーバー間の窓口といえます。

サーバーサイドの役割

サーバーサイドはフロントエンドから得た情報をもとにフロントエンドに適切な情報を送信する役割を担っています。サーバーサイドに存在し、フロントエンドとやりとりをする相手先となるサーバーには、Webサイトなどを表示するための情報やWebサイトから送信された情報などを保存しておく役割があります。

例えば、ログイン情報を入力したら「顧客の情報を提供してください」とフロントエンド側からサーバーサイド側にリクエストが送られます。リクエストを受け取ったサーバーサイドでは、ログイン情報と一致した顧客の情報をフロント側に送り返すという仕組みです。

前述したフロントエンドとサーバーサイドの違いをまとめると、フロントエンドはユーザーが見る画面等の管理やサーバーへ情報をリクエストする役割など、顧客の目に見える部分を担っており、サーバーサイドはフロントエンドからのリクエストに応じて情報を提供する裏方的な役割を担っています。

フロントエンドとサーバーサイドの言語

フロントエンドエンジニアがよく使用する言語はHTML、CSS、JavaScriptが挙げられます。フロントエンドエンジニアはWebサイトやWebサービスのデザインや構成を担当するので、HTMLとCSSは必ず使用します。
また、JavaScriptはWebサイトに動きを与える役割を持っているので、こちらもフロントエンドではよく使われます。例えばWebサイトを利用していると画像がスライドして動いたり、ボタンにカーソルを合わせると色が変わったりすることがあるかと思います。こうしたWebサイト上の動きに関してはJavaScriptが使われています。

フロントエンドエンジニアはWebデザイナーが作成した画像や写真などをもとにWebページを作成したり、Webアプリケーションを開発したりするのが主な仕事であり、基本的に仕様書に従ってコーディングしていきます。求められる役割は業務内容によって様々ですが、デザイン性に優れており、かつ使いやすいWeb画面を作成することが求められます。

デザインからコーディングまですべて社内で完結するWeb制作会社もありますが、最近では一部の工程を外部に委託するアウトソーシングや、海外に作業の一部を委託してコストを抑えるオフショア開発などを利用するケースが増えてきています。

サーバーサイドで主に使用されているプログラミング言語は、PHP、Ruby、Python、Javaの4つです。サーバーサイドエンジニアの仕事は基本的には普段ユーザーの目に入ることがない機能の開発業務です。サーバーサイドではフロントエンド側から送信されるリクエストに応じて情報を送信しますが、サーバーサイドエンジニアは、それらのデータベース設計やアクセスなどの仕組みを構築します。

例えば、Webサイト上でログイン情報を入力する機会があるかと思いますが、こちらの機能はサーバー側でデータベースの情報と照らし合わせてログインできるかどうか判断しています。それ以外にも会員登録機能、自動メール配信機能、閲覧履歴の開示等の機能はサーバーサイドエンジニアが開発します。

フロントエンドとサーバーサイドは密接に関わっており、エンジニアに求められるスキルセットはそれぞれ異なりますが、Webアプリケーションを開発するにあたってはどちらもなくてはならない存在です。

ライター：Iwabuchi