フロントエンドエンジニアとバックエンドエンジニアはどう違うの？

IT業界で、WebサイトやWebアプリケーションを作る「エンジニア」として働きたい、という方は多いと思います。

そのように考えて求人を探すと、フロントエンドエンジニア、バックエンドエンジニアという職種が目に入ってきます。

どちらもWeb系エンジニアを指しますが、仕事内容や必要なスキル・言語が異なります。

この記事では、フロントエンドエンジニアとバックエンドエンジニアの違い、仕事内容や必要なスキル・言語について、解説します。

最後に、foriioで使用している技術についてもご紹介します。

出典：Unsplash　https://unsplash.com/photos/idmvPhF8t4E

フロントエンドとバックエンドの違い

まずは、エンジニアの頭に付いている「フロントエンド」と「バックエンド」について説明します。

フロントエンドとバックエンドとの違いは、一言で表すと

「利用ユーザーから見える部分か、見えない部分かの違い」です。

以下、具体的に見ていきます。

フロントエンドとは

ユーザーから見える部分をフロントエンドと言います。

WebサイトやWebアプリケーションでは、タイトルや画像、ボタンなどが設置されていると思います。

また、画像をクリックすると別の画像に切り替わったり、ボタンをクリックすると

別の画面が表示されることがあると思います。

上記の内容を、まとめてGUI（グラフィカル・ユーザー・インターフェース）と呼ぶこともありますが、

画面上のどこに何を配置し、どのような動きを付けるか、

といったことを形作る仕組みがフロントエンドです。

バックエンドとは

フロントエンドとは逆に、バックエンドはユーザーの目には触れない部分を指します。

Webサーバー、データベースといったものが代表的なものです。

サーバーを利用した処理を担当することが多く、

サーバーサイド（エンジニア）と呼ばれることも多いです。

入力内容の処理、検索結果の出力、決済機能など、フロントエンドからの指示に応じて処理を行う、

縁の下の力持ち、のような下支え部分と言えます。

出典：Unsplash　https://unsplash.com/photos/EJSaEnVvZcg

フロント、バックエンドエンジニアに必要なスキル

フロントエンドとバックエンドについて説明しました。

それぞれを構築、およびカスタマイズを担当するのが、フロントエンドエンジニア、

バックエンドエンジニアです。

両者に必要とされているスキルについて、見ていきます。

フロントエンドエンジニアに必要なスキル

フロントエンドエンジニアに必要と言われているスキルは、以下のとおりです。

プログラミング言語の知識
フレームワークの知識
CMS（コンテンツ・マネジメント・システム）の知識

以下、1つずつ見ていきます。

プログラミング言語の知識

フロントエンドの開発には、主に以下のプログラミング言語を使用します。

・HTML…Webサイトの基本的な構造を決める

・CSS…Webサイトの表示、レイアウトを制御

・JavaScript…Webサイトに動きをつける

厳密には、HTMLとCSSはプログラミング言語ではありませんが、

カテゴリーの話ですので、これから学ぼうという方は気にする必要はありません。

最近では後述のフレームワークを利用することが多いため、

1からプログラムを組んでいくことはあまりありませんが、

細部の修正を行う場合は、プログラミング言語の知識が必須です。

フレームワークの知識

フレームワークとは、システム開発に必要な機能が、あらかじめ用意された枠組みのことです。

フレームワークを利用して共通化できるものは共通化し、効率的に開発をおこなっていきます。

CSSであればBootstrap、JavaScriptであればAngularJSという具合に、

それぞれフレームワークが複数用意されています。

また、JavaScriptでは、ライブラリ（よく利用される機能をまとめたもの）が用意されています。

jQuery、Reactといったものが有名です。

このようなフレームワークに関する知識は、あった方が良いでしょう。

CMSの知識

Webサイト制作では、1からHTMLを書くよりも、WordPressのようなCMSを導入することが多いです。CMS（コンテンツ・マネジメント・システム）は、

Webサイトの各ページや文章レイアウト、画像などのWebコンテンツを、一括で管理するシステムです。

詳細は割愛しますが、ある程度Webサイトを作成するための部品があらかじめ用意されていて、

専門知識がなくてもその部品を組み合わせれば、Webサイトが出来上がります。

CMSを導入すると、文章や画像といったWebコンテンツの中身の作成に、

集中することができる、というメリットがあります。

一方でCMSをどのように使うか、という知識は必要となります。

バックエンドエンジニアに必要なスキル

バックエンドエンジニアに必要と言われているスキルは、以下のとおりです。

プログラミング言語の知識
フレームワークの知識
ミドルウェアの知識

以下、1つずつ見ていきます。

プログラミング言語の知識

バックエンドの開発に使われる主な言語は、Java、JavaScript、Ruby、PHP、Python、Goです。

JavaScriptは、フロントエンドでも登場しましたが、

バックエンドでも使われている汎用性の高い言語です。

これらは、フロントエンドのようにセットになっているわけではなく、開発環境や担当領域により、

選ばれる言語は異なります。

Javaのみでバックエンド部分を構築している現場もあれば、Rubyのみの場合もあります。

後ほどご紹介しますが、foriioではRubyを利用しています。

フレームワークの知識

フロントエンドエンジニアと同様に、

バックエンドエンジニアでもフレームワークを利用することが多いです。

JavaであればSpring Framework、RubyであればRuby on Railsといったフレームワークが有名です。

バックエンドの構築は、人と時間をかけてしっかり開発するものが多いため、

基本的にフレームワークを利用している、と言っても良いでしょう。

当然、フレームワークの知識があるエンジニアの方が、重宝されます。

ミドルウェアの知識

バックエンドでは付随するミドルウェアの技術知識が必要となることも多いです。

ミドルウェアとは、Windows、MacといったOSと、実際に動くアプリケーションとの間に

存在し、両者を汎用的に利用できるようにするソフトウェアです。

例えば、データベースの担当になると、オラクルのようなデータベース製品に関する知識、

データベースからデータを取得するための言語である、SQLの知識も必要となります。

出典：Unsplash　https://unsplash.com/photos/CZ9AjMGKIFI

foriioで使用している技術

最後に参考までに、foriioで使用しているプログラミング言語、技術をご紹介します。

ここまで登場していないものもありますので、少し説明します。

フロントエンド

クライアントサイド：React
JavaScriptのライブラリである、Reactを使用しています。

バックエンド

バックエンドAPI：Ruby on Rails
バックエンドはRubyで構築しており、フレームワークとしてRuby on Railsを使用しています。
データベース：PostgreSQL

有名なデータベースの1つです。

ホスティング：Heroku

Herokuは、アプリケーションの開発から実運用までをクラウド上で実施できるサービスです。

データストレージ：Amazon Web Services

AWS（Amazon Web Services）という言葉を聞いたことがある方も多いのではないでしょうか。ストレージとはデータを長期間保管しておく装置を表しますが、foriioではそちらをクラウドサービスで対応しています。

バージョン管理：Github

バージョン管理とは、プログラムの修正履歴を管理することです。

Githubはそのバージョン管理をWeb上で行うことができ、とても便利です。

foriioでは以上のプログラミング言語、技術を使用しています。

こうやって見てみると、バックエンドでは多くの技術を使用していることが分かると思います。