開発ブログ
Git、CSS、HTML、正規表現など、入門者がつまづきそうなポイントを中心に、役立ち情報発信します。。

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

最終更新:2018-11-02 by Joe

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

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

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

フロントエンドとは?

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

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

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

フロントエンドの具体例

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

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

#1:JavascriptベースのUI実装向けのフレームワークです。

フロントエンドの使い方

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

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

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

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

クライアントの具体例

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

注意点

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

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

 


以上になります。

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

閉じる