【初心者向け】バックエンドエンジニアとフロントエンドエンジニアの違いとは？

こんにちは、今回はプログラミングの初心者や新しくIT業界に入った人向けに、
バックエンドエンジニアとフロントエンドエンジニアについて記事を書きたいと思います。
これからIT業界に参画したいという人や興味があるという人は、よかったら見ていってください。

先ず今回は『バックエンドエンジニア』と『フロントエンドエンジニア』についてですが、
エンジニア部分は、機械や電気などの工学（エンジニアリング）に関する専門知識や技術を持った技術者のことを指しており、
この場合のエンジニアは中でもプログラマと呼ばれるソフトウェアエンジニアを指します。

つまり今回は『バックエンド』と『フロントエンド』について、プログラミングをしている人たちのお話です。

1．フロントエンド／バックエンドのそのまま英語で読み取ってみる。

いきなりこういうものですよと言っても理解できないと思いますので、
先ず、ITから頭を離して、そもそも英語の意味から見ていきましょう。

共通している『エンド』について、この単語はIT用語でもよく出てきます。
エンドポイント、エンドユーザー、エンドデバイスなど、これらはすべて『端』や『最後』、『最終点』を意味します。
IT業界では通信の最初の送信者（送信元）から最後の受け取った人やもの（送信先）を表現する特徴柄、その最終の状態をエンドで表現することが多いです。

しかしながら、『フロントエンド』と『バックエンド』のエンドはこれとは違う意味になり、
『担当』や『分担』という意味合いがあることを理解しておいてください。
それではここから、今回の話の中枢になる『フロント』と『エンド』の意味について見てみましょう。

英語の意味だけとらえるとそれぞれ上記の意味になるでしょう。
それを先ほどの『エンド』と結びつけると、『前（正面）の担当』と『後（背後）の担当』という意味になります。
もう少しだけ身近な物にたとえるならば、舞台でいう『役者』と『裏方』、ゲームやスポーツなどでいう『前衛』と『後衛』のようなものです。

もちろんこのままの意味ではありませんので、これから少しITに入り込んだお話をしていきましょう。

2．フロントエンド／バックエンドの具体的な領域

ではIT用語におけるフロントとバックとは何なのでしょうか？
前項で説明したように、『正面の担当』や『背後の担当』といったように、これらはその担当する領域を意味する言葉になるのです。
お菓子の中身を作っている人と梱包している外装（パッケージ）を作っている人が別なように、一つのシステムに見えても、
そのシステムには外と内があるのです。

そもそもシステムにおける外と内とは何か、少しだけ具体的に見ていきましょう。
先ず結論から説明すると下記になります。

つまりフロントエンジニアは『外』を作る人で、バンクエンドエンジニアは『内』を作る人です。

もちろんこれだけでは理解できないと思いますので、具体的な例として、『WEBサイト』を例にお話ししましょう。
IT従事者でなくても、WEB検索（ネットサーフィン）やSNSサイトを使用することが主流になってきた昨今で、
WEBサイトを利用したことがない人は殆どいないでしょう。
そんな身近なWEBサイトも、実は『外』と『内』に分かれているのです。

代表的なWEBサイトをあげるのは難しいですが、そこは『ChatGPT』さんに聞いてみましょう。

『ChatGPT』の回答

「代表的なWEBサイト」って言っても、何をもって“代表的”とするかでちょっと意味が変わるから、いくつかの視点で分類してみるね👇

🌐 【1】アクセス数が多い“超有名Webサイト

サイト名	内容
Google	検索エンジン（世界最大）
YouTube	動画共有プラットフォーム
Amazon	ECサイトの代表格
Facebook（Meta）	SNSの代表格
Wikipedia	オープンな知識ベース

このへんは世界中で使われていて、「インターネットと言えば」な存在！

と、最初の部分だけ抜粋して見てみると、誰もが聞いたり利用したりしたことがあるようなサイトが上がってきました。
確かに全て有名なサイトで、WEBサイトの代表格と言っても過言ではありません。
とりあえず説明しやすいものを選ばせていただくと、ECサイトの代表格『Amazon』を見ていきましょう。

ECサイトが何かについては、調べたらすぐに出てくるかと思いますが、Electronic Commerceの略称で、
電子商取引、つまりネットショッピングやオンラインショップなどのことです。

Amazonに限らず、楽天やYahoo!ショッピングなど、多くのECサイトが存在しています。
とりあえず、利用者がAmazonでショッピングをする工程をざっくり分けてみると。

とりあえず上記の5つの工程に別れました。
この5つの工程が『バック』と『フロント』にそのまま分かれるのかと言われると、決してそういうわけではございません。
この5つの項目すべてに、それぞれ『バック』と『フロント』の領域が存在するのです。

では、具体的に1つの項目を例に挙げて説明します。
『１．利用者（エンドユーザー）が商品を検索する。』という動作ですが、
『フロント』の領域については、下記URLからAmazonの検索画面に行ってもらうと一目瞭然です。

【AmazonURL】

一番上に検索窓があり、メニューバー、おすすめ品や売れ筋などの内部コンテンツが表示されるかと思います。
もしAmazonのユーザーが商品を探す際は、この検索のページを利用することになるでしょう。
この検索窓の位置や大きさ、メニュー、内部コンテンツの画像や文字など、利用者の目に止まる全てがフロント領域と呼ばれます。

では逆に『バック』と呼ばれる領域はどこなのかというと、もちろん『内』なので、サイトを一目見ただけではわかりません。
動かす、（ここでは検索）すると初めて見えてくるものになります。
そしてこの動きによって画面が変わる。これが『バック』の領域と言えるでしょう。
専門的な用語でいうならば、『静的なページ』と『動的なページ』と表現されます。
利用者がサイトに来て何もしなくても表示されるページは『静的なページ』で、
利用者が訪れたページで、操作（ここでは検索）をして表示が切り替わるページを『動的なページ』と呼ばれます。
※難しいので割愛しますが、IT用語では『操作（ここでいう検索）』はリクエストと呼ばれ、
利用者から送られたリクエストに対してWEBサイト（ホスト）がレスポンスを返して動的なページを表示します。

『バック』の領域はまさにこの『動的なページ』を構成するのに欠かせない領域なのです。
では『バック』の領域について理解するために、先ほどの検索するをもう少しだけ分解します。

処理として分けると大きくはこの4つになります。
この中で、１～３に『検索文字』と入っているのがリクエストで、３～４にある『検索結果』がレスポンスです。
流れで見ていくと、『検索文字』が『検索結果』に変わっていることが分かります。
この『検索文字』（リクエスト）から『検索結果』（レスポンス）に変わる部分（利用者に分からない部分）を作るのが『バック』の領域となります。

つまり、『バック』を作っていなくても、『フロント』の検索ページは見えます。
しかしながら、検索しても何も出てこなかったり、画面が切り替わらないなどの状態が発生するのです。

フロントエンドとバックエンドのまとめイメージ

3．フロントエンドとバックエンド、それぞれの特徴

では最後に、それぞれの特徴を紹介して終わりたいとおもいます。
先ずフロントエンジニアの特徴ですが、先ほどお話しした通り、システムの『外』を構築するエンジニアです。
バックエンドエンジニアと比較して、システムそのものを作るというよりは、
利用者からの見た目や使いやすさをより良いものにしていくお仕事です。
見た目を綺麗に整えるデザインをしたり、文字はもう少し大きくした方がいい、
検索バーは上にあった方がいいなどが含まれます。
ですので、使用する言語もフロントエンドはHTML, CSS, JavaScriptと呼ばれるものを扱い、
これらの言語は、データベース（先ほどのAmazonでいう商品のデータが格納されている場所）に直接アクセスはできない言語になっています。
利用者目線で、こういう見た目を作ってみたい、使いやすさを追求していきたいと思える人が向いている職業と言えます。

逆にバックエンドエンジニアの特徴ですが、こちらは『内』を構築するエンジニアです。
フロントエンドエンジニアと比較して、見た目や使いやすさというよりは、処理の妥当性、効率化やセキュリティ性など、
システムが問題なく動くことに重きをおいて構築するお仕事です。
比較的複雑な処理を構築するため、プログラミングや言語スキルが求められます。
使用する言語はPython, Ruby, Java, PHPなどデータベースを絡めた使用方法が主流です。
システムの内部構造に興味があり、効率的かつセキュリティが強固なシステムの品質を追求したい人が向いている職業と言えます。

特賞まとめ

4．最後に

ここでお話したことはある側面でしかありません。
もそもフロントの領域とバックエンドの領域は、現実ですとお互いがお互いの領域に踏み込んでいることもあるので、
簡単に線を引けるものではございません。
今後プログラマとしてどちらを選択しようか迷っている方がいれば、それぞれ両方学んでいて損はないと私は思います。
ここでは詳しく取り上げなかったことも沢山ありますので、是非自分でも色々と調べてみてください。