フロントエンドとバックエンドとは？それぞれのエンジニアに必要とされるスキルも紹介！

• フロントエンドとバックエンドの意味
• クライアントサイドとサーバーサイドの意味
• フロントエンドエンジニアの仕事内容や求められるスキル
• バックエンドエンジニアの仕事内容や求められるスキル

今回は、WebサイトやWebアプリケーションの開発でよく聞く単語。

「フロントエンド」「バックエンド」という単語の意味についてです。

はじめは、これらの単語がよくわからない方も多いと思います。

そんな方に向けて、フロントエンドとバックエンドの意味をわかりやすく解説しようと思います。

また、フロントエンドエンジニアとバックエンドエンジニアと呼ばれる職種についても解説します。

それではみていきましょう！

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

フロントエンド（front end）とは、直訳で前面の終わり、つまりは「一番前」という意味を表しています。

反対に、バックエンド（back end）は「一番後ろ」を意味します。

WebサイトやWebアプリケーションにおいて、何が表で何が裏なのでしょうか？

Webサイトの仕組みからわかる「フロントエンド」と「バックエンド」

ここでは、フロントエンドとバックエンドを理解するために、Webサイトの仕組みから解説します。

まず、Webサイトが動くには、Webサーバーが必要です。

そして、クライアント（要はユーザー）が、このWebサーバーに対して「ファイルください」っていうリクエストを投げます。

そうすると、Webサーバーから、「はいどうぞ。」とレスポンスが返ってきます。

このレスポンスで返ってきたデータを、ブラウザがきれいに表示してくれて、無事サイトを見ることができているのです。

図にするとこんな感じ。

このリクエストとレスポンスはWebサイトやWebアプリケーションの基本となりますので、ぜひ覚えておいてください。

そして、この図でいう左側がフロントエンドで右側がバックエンドになります。

もうちょっと詳しく言うと、

• フロントエンド：ユーザーから見える表側の部分（＝クライアント側）
• バックエンド：ユーザーから見えない裏側の部分（＝サーバー側）

こうなります。

上の図からもわかるように、結局はクライアント側がフロントエンドで、サーバー側がバックエンドです。

同じような意味で、「クライアントサイド」と「サーバーサイド」という言葉がありますが、ほぼ同じ意味だと考えていただいて大丈夫です。

ニュアンスの違いとしては、

フロントエンドとバックエンドは、ユーザーから見た表側か裏側かというユーザー目線の分類で、クライアントサイドとサーバーサイドは、クライアントPC側とWebサーバー側という物理的な分類だと思います。

難しいのでわからなければ聞いてください。（@ima_maru）

また、業種によって好まれる呼び方が異なるということも言えるかもしれません。

よくセットで使われることが多いので、二つの分類を覚えておくとよいでしょう。

電卓で例える「フロントエンド」と「バックエンド」

身近な物で、フロントエンドとバックエンドを例えるならば「電卓」がわかりやすいでしょう。

電卓は「０」から「９」まで数字や「＋」や「＝」などの演算の記号が書かれたボタンがありますね。

もちろんディスプレイもあります。そりゃ計算結果わからなかったら意味ないですからね。

これらは使う人から直接的に見える、フロントエンドです。では逆に、何がバックエンドでしょうか？

バックエンドは、「電卓の中の電子回路」「演算装置」です。これを先ほどの説明に近づけて考えると、

	フロントエンド	バックエンド
電卓	ボタン、ディスプレイ	電子回路、演算装置
Webサイト	Webページ、ディスプレイ	サーバー、データベース

こんな対応表になります。どうでしょう、すこしイメージが湧いてきましたでしょうか。

次はもう少し具体的な例にして考えてみましょう。

Google検索でわかる「フロントエンド」と「バックエンド」

今度は、Google検索を例にフロントエンドとバックエンドを紐解いていきましょう。

まずはフロントエンド＝ユーザーが見える部分は何かというと「検索バー」を主とした、ページ全体のことですね。

では、バックエンド＝ユーザーが意識しない部分は何でしょうか？

バックエンドは、膨大な検索データから作られた情報が詰まったデータベースや、それらを検索結果として返してくれるサーバーやその処理などです。

	フロントエンド	バックエンド
Google検索	検索/結果ページ、ディスプレイ	サーバー、データベース
Webサイト	Webページ、ディスプレイ	サーバー、データベース

フロントエンドとバックエンドのイメージがつかめたでしょうか？

フロントエンドエンジニアとは？

フロントエンドエンジニアの仕事内容

フロントエンドエンジニアは、その名の通りフロントエンドを担当するエンジニアです。

つまり、サーバー側の処理ではなく、「ユーザーの見える側」を作りこんでいくエンジニアです。

Webページを作成する方法にもいくつかありますが、大きく分けるとSSR（サーバーサイドレンダリング）とCSR（クライアントサイドレンダリング）に分けられます。

SSRは、サーバー側でWebページのデータを作成し、それらをクライアントに返してそのまま描画するというもの。

一方CSRは、あくまでサーバー側は核となるデータだけを返し、クライアント側でそれらのデータをもとにWebページを組み立てて描画するというものです。

どっち側で描画（レンダリング）するかの違いということです。

どちらにしても、フロントエンドエンジニアの主な仕事は、ユーザーの見える側を作っていくことです。つまり、Webページを作成・描画するためのデータや処理全般を担当するといってもいいかもしれません。

それに伴って、UI設計やデザイン、最新の技術などの勉強が必要になる職業です。

HTML/CSS/JavaScript関連のスキルは必須

まず、「HTML/CSS/JavaScript関連のスキル」は必須です。

Webページは、HTMLで枠組みを決め、CSSで色合いや背景、文字の表示位置や大きさなどを決めます。そして、JavaScriptを用いると、より高度な処理を加えることができ、Webページの完成度が増します。

フロントエンドエンジニアになるには、これら3つの言語は絶対に避けては通れないものです。

さらに、もう少し高度な技術もあります。

CSS関連でいえば、「Bootstrap」というCSSのテンプレートや「Sass」というCSSを拡張した言語なんかもあります。

JavaScript関連でいえば、「jQuery」「React」といったUI用のフレームワークの存在も忘れてはいけません。

興味を持ったけどまだ始めていないという方は、Progateやドットインストールといった無料教材から始めてみるとよいでしょう。

ユーザー視点に立って考える力があるとよい【UI/UX】

フロントエンドエンジニアになるには、「ユーザー視点に立って考える力」があるとさらによいでしょう。

例えば、ユーザーにとって使いやすいWebサイトにする場合は、いろんなことを考えます。

「どこにボタンを置いたら操作しやすいか？」
「どのように表示をしたらわかりやすいか？」
「どんなふうに画面を読み込んだらユーザーはストレスなくページを閲覧できるか？」

こんな風に、WebサイトやWebアプリを使うユーザー視点に立ってフロントエンドの開発ができるとなおよいでしょう。

逆に、このようなことを考えるのが好きな人にはフロントエンドエンジニアが向いているのではないでしょうか。

こういった、ユーザーから見える部分をUI（ユーザーインターフェース）、そのサービスを使って得られる体験すべてのことをUX（ユーザーエクスペリエンス）といい、よりよいUI/UXを提供するために試行錯誤することをUI/UX設計と呼んだりします。

SEOの知識があると良い

SEOとは、Search Engine Optimizationの略で、検索エンジンに対しての最適化を意味します。

簡単に言えば、WebページをGoogleの検索上位に表示するための技術・考え方です。

このSEOの知識があると、自分のサイトや記事などが検索上位に上がる可能性が高まります。

Webサイト制作を行うフロントエンジニアは、ぜひとも持っておきたいスキルの一つです。

デザインのスキルがあると重宝される

フロントエンジニアはデザイナーではないので、基本的にはHTML/CSS/JavaScriptで事足ります。

しかし、デザインもできると、グッと希少性が上がります。というのも、Webページ一つとっても、

「かっこいい画像に目が奪われる」
「かわいいキャラクターから吹き出しが出ていて押したくなる」
「さりげなく動画でPRができる」
「漫画で分かりやすく内容が入ってくる」

こういったことはよくあるわけです。これらからわかるように、デザインの部分はフロントエンドエンジニアとは切っても切り離せない関係にあります。

ここで挙げたデザインスキルは、「画像加工・制作」「イラスト制作」「動画・映像制作」「漫画制作」です。Adobe社のソフトでいえば、「Photoshop」「Illustrator」「Premire Pro」がそれらにあたりますね。

バックエンドエンジニアとは？

バックエンドエンジニアの仕事内容

バックエンドエンジニアは、その名の通りバックエンドを担当するエンジニアです。

つまり、ユーザーからは見えない、「サーバー側の処理」を書くエンジニアです。

この図でいうと、「リクエスト」に対しての動作や「レスポンス」の生成処理などを作っていくことになります。

例えば、枠組みとなるHTMLデータの中に実際のデータ（ユーザー名や投稿内容など）を与えて動的なファイルを作り出したり、クライアントサイドのアプリケーションが必要としているデータをAPI経由で送信したりと様々です。

場合によっては、データベースやサーバーインフラ、Webサービスの運用保守なども担当します。（結構多い）

そのため、幅広いIT系の知識が必要とされる職業です。

プログラミング言語とフレームワークのスキルは必須

バックエンド（サーバーサイド）で使用するプログラミング言語はいろいろあります。主な言語を挙げるとすれば「PHP」「Ruby」「Python」「JavaScript」「Java」「Go」あたりでしょう。

これらの言語でなくても構いませんが、Webサーバーで動くプログラミング言語を使える必要があります。

また、その言語の「Web用フレームワーク」を最低でも1つは使えるようにしなくてはいけません。

「フレームワーク」とは、簡単に言えば便利ツールのことで、これを使うと簡単にいろんなことができるようになります。

例えば、プログラミング言語「Ruby」のWeb用フレームワーク「Ruby on Rails」を使えば、一瞬でWebサーバーの枠組みが完成しますし、「Python」のWeb用フレームワーク「Flask」を使えば、軽量のWebサーバを簡単に立ち上げることができます。

Webサイト、特にWebアプリケーションの開発では、このWeb用フレームワークは必須スキルになりますので、自分が学びたい言語のフレームワークを1つ以上は勉強するとよいでしょう。

基本的なセキュリティの知識が必要

バックエンドエンジニアは、セキュリティの知識も必要です。

例えば、SNSなどのWebアプリを考えれば簡単で、どこのだれかも分からない人に勝手にログインされて、勝手に投稿されたら嫌ですよね。そんなアプリ、まず訴えられるだろうし、使いたいとも思わないはずです。

それができる原因は、セキュリティの甘さです。具体的には以下のようなことが挙げられます。

「パスワードが暗号化されていない」
「ログインが不正にできてしまう」
「ログインが必要な処理に直接アクセスできてしまう」

ほかにも、悪意のある攻撃には「SQLインジェクション」や「XSS脆弱性を狙った攻撃」など様々なものがあります。

サーバー側の処理を書くバックエンドエンジニアにおいて、基本的なセキュリティ知識は必須といえるでしょう。

高度なセキュリティ対策については、セキュリティエンジニアと呼ばれる専門のエンジニアに任せましょう。

データベースの知識はほぼ必須

バックエンドエンジニアは、データベースの知識もほぼ必須といえるでしょう。

「MySQL」「SQLite」「PostgreSQL」「Oracle Database」といったデータベースを使ってアプリを作れるとよいでしょう。

その際には、データベースを操作する「SQL」という言語が必要になります。

そこまで難しくはないので、書き方を調べながら試してみるとよいでしょう。

また、使用するフレームワークによっては、生のSQL文を書かなくてもいい場合もあるので注意が必要です。（Ruby on RailsやFlaskなど）

APIの使い方を知っておくと良い

バックエンドエンジニアにおいて、「API」という存在を忘れてはなりません。

APIとは、いろんなWebサービスが用意してくれているプログラミングに使える機能のようなものです。

APIを使うと、いろんなWebサービスの機能を自分のWebサイトやWebアプリで使うことができるようになります。例えば、Googla Maps APIを使えば、会社の公式Webサイトに、オフィスの位置を示したGoogleMapを表示できたりします。

一度は有名なAPIを使ってアプリを作ってみたり、手元で動かしてみたりすると理解しやすいと思います。

また、自分たちが開発するWebアプリやスマホアプリのためのAPIサーバーを開発することも多いにしてあります。

そのため、APIサーバーの開発方法も学んでおくとなおよいでしょう。

サーバーインフラの知識があると重宝される

バックエンドエンジニアは、サーバーの処理を書くことをメインとしますが、そのサーバー自体の構築もできるとなおよいです。

基本的にサーバー構築やその周りのことは、インフラエンジニアと呼ばれるエンジニアの担当になるのですが、実際は明確に分かれていなかったり、バックエンドエンジニアが行う場合も多々あります。

その際に、サーバーインフラの知識があると活躍できるでしょう。

余裕がある方は、「AWS」「GCP」といったクラウドインフラで実際にインフラの環境構築を行ってみるとよいと思います。

しかし、サーバー構築はとても難しいので、覚悟が必要です。

まとめ

どうでしょうか、フロントエンドとバックエンドのイメージがわかりましたでしょうか。

最初は理解するのにも少し苦労するかもしれません。

そんな時は、実際にProgateなどの学習教材でフロントエンドとバックエンドの処理について触れてみるのもいいと思います。

余談ですが、フロントエンドエンジニアとバックエンドエンジニアは、実際に明確に分かれていることもありますが、どちらも兼任することが少なくありません。

傾向としては、会社の規模が小さいほど兼任でやることが多く、規模が大きいほどきっちりと別れて開発を行っていることが多いそうです。（不確かですが）