よく聞くけど、よくわからないIT用語解説。今回は「フロントエンド」について解説です

「フロントエンド」とは？

昨今、「フロントエンドエンジニア」という言葉をよく耳にする用になりました。「フロントエンド」とは、いったい何なのでしょうか？

フロントエンドとは？

「フロントエンド」とは、WebサイトやWebサービスの開発において、実際に利用するユーザ（エンドユーザ）が、直接的に操作する部分の機能実装の事を指します。例えばWebサービスでは、インターネットからアクセスできるWebページの実装がそれに当たります。

フロントとは「Front」で、「正面」「前面」といった意味を持つ英語です。このことからもわかりますが、フロントエンドは、しばしば「バックエンド」と対比する文脈で使われます。逆に、バックエンドとは、逆に、システムにおいてエンドユーザが直接的に操作することがない部分のことを指します。英語の「Back」を踏まえると想像しやすいですね。例えば、Webサービスをホスティングするサーバーのセットアップや、サーバー上で動作する処理の実装です。「データベース」もバックエンドに含む事があります。

ですので、もし「フロントエンドエンジニア」といえば、フロントエンドの実装を担当するエンジニアのことを指します。

フロントエンドの具体例

フロントエンドの実装の代表例は、「HTML」「CSS」によるWebページの実装です。ただし、言葉の厳密な定義は非常に曖昧ですので、より広義には、「Javascirpt」を含んだり、さらには、Javascriptベースのフレームワーク「Angular JS」や、Facebookが独自に開発した「React」など、Webブラウザー上で動作する機能全般、派生して、そのような機能と関連が強いサーバー側で実行される実装まで含める事もあります。

ですので、普段はHTMLとCSSしか書かないWeb開発者が「私はフロントは得意です！」なんて言うと、「普段は、何のフレームワークを使いますか？」「Vue.js（＃１）は使ったことがありますか？」なんて切り替えされたりして、どぎまぎしてしまうかもしれません。あまり「フロントエンド」という言葉を、単体で使うのはさけたほうがいいかもしれませんね。必ず、会話の文脈に沿った形で使いましょう。

＃１：JavascriptベースのUI実装向けのフレームワークです。

フロントエンドの使い方

• 採用面接で：「私は、A社において３年間、Rails（レールズ）や、Laravel（ララベル）を使っていくつかの社内向けSNSの開発に携わりました。チームリーダの設計方針を元に、主にフロントエンドの実装を担当しました。」
• Webサービスのエンジニアメンバー：「このバグはサーバーで直してもいいけど、それだと影響範囲がちょっと大きくなるから、できればフロント側で対応してほしい。」
• 開発チームで：「今のチームにフロント開発が得意な人がいないので、いったんHTMLコーダーを探しましょう。」
• 求人：「フロントエンドエンジニア：HTML・CSS（実務経験３年以上）」

よく似た言葉「クライアントサイド」

フロントエンドとよく似た言葉に「クライアントサイド」という言葉があります。これはしばしば「サーバーサイド」と対比する文脈で使われます。「クライアント⇔サーバー」は「フロント⇔バック」の関係性と似ていますね。

ソフトウェアシステムがサーバー上で動作するのはよく知られていますが、一般的なWebシステムは、Webブラウザーやスマホアプリを使ってサーバーにアクセスし、通信しながら動作します。この時、エンドユーザが実施に操作するソフトウェアやその実装を「クライアントサイド」と呼びます。

クライアントの具体例

クライアントの具体例は、スマホアプリなどのアプリケーションが分かりやすいでしょう。iOSアプリはクライアントの一つです。もし通信を行うアプリであれば、サーバーも別に実装が必要になるはずです。ひとつのサーバーが複数の種類のクライアント（アプリとWebブラウザ）を持つこともあります。例えば、FacebookはアプリからもWebブラウザからも利用できますね。

注意点

「フロントエンドエンジニア」とはよく言いますが、「クライアントサイドエンジニア」とはあまり言いませんね。

理由（推測）ですが、「クライアント」とは「サーバー」と共に「システム内における機能の役割」を大まかに表すための言葉だからだと思います。日本語訳すると「依頼者」「遂行者」のようなイメージです。「役割」はエンジニアリングしないですよね。

以上になります。

フロントエンド、正しく理解できたでしょうか？