MENU
なお
じゃぱざむ運営主
20歳 | WEBメディアの会社で部長をやりながら、じゃぱざむ・特化メディア・WEB制作~コンサル・SEOディレクター・投資・就活相談など幅広くやっています。
いまい
エンジニア志望の大学生
21歳 | 理系の大学3年生|Webアプリ開発を勉強中。クラウド系の自社開発企業(マザーズ上場企業)に内定。じゃぱざむでは、IT系記事の執筆とアイキャッチ画像の作成をしています。
【完全ガイド】大学生でもプログラミングで稼ぎ始めるためのロードマップ

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

記事上バナー
テックキャンプの記事上バナー
レイズテックの記事上バナー
テックブーストの記事上バナー
  • フロントエンドとバックエンドの意味
  • クライアントサイドとサーバーサイドの意味
  • フロントエンドエンジニアの仕事内容や求められるスキル
  • バックエンドエンジニアの仕事内容や求められるスキル
いまいのアイコン画像いまい
こんにちは!
今井(@ima_maru)です。

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

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

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

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

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

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

タップして好きなところから読めます

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

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

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

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

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

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

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

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

いまいのアイコン画像いまい
URLだと思ってもいいです。
「https://jpazamu.com/…」みたいなのがリクエストになります。

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

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

図にするとこんな感じ。

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

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

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

  • フロントエンド:ユーザーから見える表側の部分(=クライアント側)
  • バックエンド:ユーザーから見えない裏側の部分(=サーバー側)

こうなります。

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

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

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

フロントエンドとバックエンドは、ユーザー目線で考えた表側と裏側の分類で、

クライアントサイドとサーバーサイドは、クライアントPC側とWebサーバー側の分類です。

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

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

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

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

電卓は「0」から「9」まで数字や「+」や「=」などの演算の記号が書かれたボタンがありますね。

もちろんディスプレイもあります。

そりゃ計算結果わからなかったら意味ないですからね。

これらは使う人から直接的に見える、フロントエンドです。

では逆に、何がバックエンドでしょうか?

バックエンドは、「電卓の中の電子回路」「演算装置」です。

これを先ほどの説明に近づけて考えると、

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

こんな対応表になります。

どうでしょう、すこしイメージが湧いてきましたかね。

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

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

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

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

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

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

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

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

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

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

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

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

この図でいうと、「レスポンス」にあたる部分を作っていくということをします。

レスポンスによって返るファイルは、「HTML」「CSS」「JavaScript」という言語によって書かれています。

フロントエンドエンジニアの主な仕事は、これらの3つの言語を駆使してWebページを作成することです。

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

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

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

Webページは、HTMLで枠組みを決め、CSSで色合いや背景、文字の表示位置や大きさなどを決めます。

そして、JavaScriptを用いると、より高度な処理を加えることができ、Webページの完成度が増します。

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

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

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

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

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

ユーザー視点に立って考える力があるとよい

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

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

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

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

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

SEOの知識があると良い

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

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

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

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

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

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

しかし、デザインもできると、グッと希少性が上がります

というのも、Webページ一つとっても、

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

こういったことはよくあるわけです。

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

ここで挙げたデザインスキルは、「画像加工・制作」「イラスト制作」「動画・映像制作」「漫画制作」です。

Adobe社のソフトでいえば、「Photoshop」「Illustrator」「Premire Pro」がそれらにあたりますね。

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

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

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

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

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

レスポンスに使うHTMLファイル等は、フロントエンドエンジニアが作ってくれるので、それに実際のデータ(ユーザー名や投稿内容など)を与えて動的なファイルを作り出します。

場合によっては、データベースサーバーインフラ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とは?具体例を挙げてわかりやすく解説!
APIとは?具体例を挙げてわかりやすく解説!APIとは何か?APIの使い方の具体例NHK番組表APIの使い方(C++) Google Maps APIの使い方(Python)(2020/10/4 PythonでのAPIの使用例を追記しました。)今回は、プロ...

APIを使うと、いろんなWebサービスの機能を自分のWebサイトやWebアプリで使うことができるようになります。

例えば、Googla Maps APIを使えば、会社の公式Webサイトに、オフィスの位置を示したGoogleMapを表示できたりします。

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

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

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

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

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

しかし、サーバー構築はとても難しいということもあります。

いまいのアイコン画像いまい
独学だと必ず1回はハマると思います。
自分は同じエラーに2週間苦しみました。

余裕がある方は、「AWS」「GCP」といったサーバーで実際に環境構築を行ってみるとよいと思います。

ちなみに本当に難しいです。(エラーの嵐ですので、覚悟が必要です。)

まとめ

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

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

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

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

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

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

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

以上「フロントエンドとバックエンドとは?それぞれのエンジニアに必要とされるスキルも紹介!」でした!

いまいのアイコン画像いまい
最後までご覧いただきありがとうございます。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
タップして好きなところから読めます
閉じる