カテゴリー
プログラミング

「フロントエンド」と「バックエンド」のちがいとは?

「フロントエンド」と「バックエンド」って何?

初心者がプログラミングのことを調べていると目にする言葉のひとつが「フロントエンド」と「バックエンド」。

これらは和製英語ではなく英語でも「Front End」「Back End」と言われます。

なんか「End」とか入っているし、どういう意味?と、いまいちイメージしにくい言葉ではありますよね。

今回はこの2つの違いを見ていきましょう。

まず「フロントエンド」「バックエンド」という単語を分解

2台のパソコンを操るエンジニア

まず「フロントエンド」「バックエンド」という単語を分解してみましょう。

・フロント:表側
・バック:裏側

・エンド:部門・面

こんな意味分けになります。フロントやバックはそのままの意味としても、エンドに関して「え『終わり』って意味じゃないの?」と、なりそうなところですね。

しかし「End」って結構たくさんの意味を持つ言葉で、そのなかに「部門」や「面」って意味もあるんです。例えば、営業部門だと「セールスエンド(sales end)」なんて英語では言うんですよ。

なのでフロントエンドは「表側の部門・表側の面」バックエンドは「裏側の部門・裏側の面」という意味になります。

そうなると「何の『表側』『裏側』なの?」となりますね。

ではその意味を探るべく、まず「フロントエンド」からご説明していきましょう。

フロントエンドとは?

タブレットを操る手

フロントエンドとは「表側の部門」「表側の面」という意味でした。

ここでいう「表側」とは「ユーザーの目に見える面」という意味になります。例えば今ご覧いただいているブログ記事。

画面に文字や写真、メニューなどが見えますね。他のページではボタンや問合せフォームの入力画面などもそうです。これが「見える部分=表側」になります。

この「見た目」をコントロールするのが役目。

みなさんもWEBサイトやアプリを使っていて、秒で「使いやすい・使いにくい」「見やすい・見にくい」と判断することがあると思います。

フロントエンドは基本となるHTMLやCSS、動的な要素を司るJavaScriptなどの開発言語が有名。

これらを駆使して「見た目がわかりやすい設計」をすることが求められます。

代表的な言語で説明すると、

 

①HTML:WEBページの基本構造を担う

②CSS:デザインやスタイルを調整する

③JavaScript:動きをつける

 

以上のような開発言語を用い、ユーザーにWEBサイトを見やすくし、サイト内のリンクをクリックできたり、ボタンを押したり、文字入力をすることを可能にしています。

WEBサイトの「見た目」を整えるという意味では、フロントエンドのエンジニアは「デザイン」の知識・センス・技術があると尚良いのも確か。ユーザーの使い心地に配慮した「UI/UX」(ユーザーインターフェイス/ユーザーエクスペリエンス)なるスキルも必要になってきます。

また、SEO(検索エンジン最適化=上位表示対策)にも最適化した設計も求められます。この他にも、API設計(外部アプリケーションとの連携)やCMS(WordPressなどのコンテンツ管理システム)のほか、サーバーサイドの知識も必要になってくるが昨今のフロントエンド業務。

こうみると、一口にフロントエンドと言っても実に広範囲な役目になるんですね。

しかもお客さんは「サイトの見た目、使い心地」にはうるさいため注文も多い。ここを営業の人間らと組んでうまく案件を転がしていかないと、いつまでも終わらないループにハマってしまいます。

会議室で打ち合わせする二人

こういった「フロント全般を担う」という意味も含め、フロントエンドエンジニアを広義で「Webデザイナー(デザインは設計という意味)」と呼ぶこともありましたし、今でもエンジニアが自身をそう名乗ることもあります。

しかし現在ではほぼ「Webデザイナー」という単語はイラストレーターやフォトショップを使ってデザインする人のことを呼びます。このあたりは一応知っておいてほうが混乱せずに済むので知っておきましょう。

バックエンドとは?

立ち並ぶサーバー

バックエンドはWEBサイトや「サーバーサイド」を担う部分。いわば「裏方」です。

WEBやシステムの「脳」でもあるデータベースシステムやサーバーサイドの開発/設計を行います。また、開発のみならずその前段の要件定義、開発後の保守運用もバックエンドの仕事です。

スクラッチ(新規開発)ので開発業務もあれば、既存データベースとの連携システムを構築することもある、多岐に渡る仕事であり、内容も非常に複雑化することも特長です。

バックエンドの開発言語で有名なのはWEB系であればPHP、Java,Ruby、Pythonなどがあります。

それぞれの言語の特長をまとめると、

 

①PHP:WEBサービスやWEBアプリによく使われる

②Java:OSに依存しないため環境を選ばず動作する

③Ruby:日本人まつもとゆきひろ氏が開発した言語で、WEBサイトはもちろんECサイト、SNSの開発も可能

④Python:人工知能、機械学習に採用されることでも注目

 

この他にも、広義の「インフラ系エンジニア」というくくりで見た場合は「AWP・GCP/Docker/Perl/TTL/Bash/Bat」といった言語も加味されます。

最近では、フロントエンド側のJavaScriptで行っていた動作を、処理の速いサーバー側で処理する「SSR(サーバーサイドレンダリング)」の技術が求められることもあります。

初心者はフロントエンドとバックエンドどっちがいい?

プログラミングを学ぶ女性二人

プログラミング初心者は「フロントエンドから学ぶ」の一択と思っておくと良いでしょう。

入社した会社がバックエンド専門でそこから勉強をするケースもあるので完全にとは言えませんが、学生だったり独学だったりスクールに通うなどの選択できる立場にいるならば、初心者は「フロントエンドから学ぶ」のが理想です。

その理由として、

 

①HTMLやCSSなど、基礎プログラミングのマークアップ言語から始められる

②視覚的で成果がわかりやすく勉強しやすい

③なじみある「WEBサイト」をゴールにできる

 

以上のような点があります。

ただし前述のように、フロントエンドも奥の深い世界のため「フロントエンド=簡単」ではないと理解しておくのが大事。容易に制覇できるものではありません。油断せず、プログラミングは難しいと思って臨みましょう。

バックエンドって難しいの?

バックエンド作業をこなすエンジニア

よくある質問に「バックエンドは難しいの?」というものがありますが、これは言語にもよりますが「難しい」です。コンピューター全般の知識がないと対処できないのが、バックエンドと言えるでしょう。

開発言語やサーバーそのものの知見もさることながら、データベースにMySQL、GitHubなどの開発プラットフォームにも慣れておく必要があります。

よく「プログラミング思考」の話題になったときに「論理的思考」云々の話になりますが、バックエンドはまさにロジカルな思考が求められる役目と言えるでしょう。

決してフロントエンドが簡単という意味でなく「さらに高い技術力を求められる」のがバックエンドであり、それだけに市場単価も高く、実際のエンジニア数も少ないのが特長。

システム構築のための会議のシーン

また、フロントエンドに慣れてくると、人によっては物足りなくなり、より業務範囲の広いバックエンドを学ぶというのはひとつの王道でもあります。

理想としては、フロントエンドで経験を積み、そのあとにバックエンドのキャリアを積む。これを「フルスタックエンジニア」と呼びますが、双方の業務で一定の経験を積んでおくことで、将来のキャリアパス・選択肢は格段に広がります。

エンジニアであれば、ずっと同じ業務にとどまることなく、自身の市場価値を高めていくキャリア設計も意識しましょう。せっかく、10年後もIT人材不足は約79万人とされている市場価値の高い職種なのですから。

また、近年ではIT系のベンチャー企業や大企業の部署においても、フロントエンドとバックエンドの垣根がなく、ある程度はフルスタックの技術があって当然というケースもあります。

これは熟練のエンジニアだけに求められるスキルでなく、若手のエンジニアにも要求される知見であったりもします。

フロントエンドとバックエンドどっちが偉い?

向かい合ってプログラミング作業する二人

「どっちが偉いか」というのは変な見出しですが、フロントエンドとバックエンドの話ということで、一応触れておきます。

結構エンジニア業界では「バックエンドエンジニアがフロントエンドのエンジニアを見下す」という事案があるのをご存知でしょうか。これは今に始まったことではなく、WEBの黎明期、今から2~30年ほど前から続く不思議な慣習。ツイッターなどでも、あくまで人によりますが、そういった発言は散見されます。

こういう空気があると、フロントエンドの仕事は簡単であると思われがちですが、実はその根拠はどこにもありません。

前述の通り、フロントエンドは顧客からさまざまな注文がつく前線の仕事でもあり、UI/UXデザインの知識が最重要ともされる現代において広範囲なトレンドの理解と最新のナレッジが必要な業務です。HTMLとCSS、JavaScriptが一部のバックエンド言語に比べるとわかりやすいという個人の見解をもって「基幹系の開発=バックエンドのほうが偉い」というのはナンセンスな話。

ちょっとこのお話を「レストラン」での業務に例えてみましょう。

レストランの業務に例えると…

レストランのキッチンの様子

例えばレストランでも「ホールで接客担当する人(フロントエンド)」と「キッチンで料理を担当する人(バックエンド)」がいますよね。

その際、なぜか調理場がホールより偉そうというのもよくある話。「料理に詳しい自分のほうが偉い」「裏方で職人肌の自分のほうが格好いい」と勘違いしている人がいます。フロントの仕事がどれだけ広範囲か見えてないからなんですね。

しかし実は、キッチンの人は人見知りで、接客や気配り、お金の計算などが苦手だったりもすることも。そもそもフロント業務が苦手なことも多々あります。

どうあれ、一緒にひとつのレストランを盛り上げ来訪するお客さん(WEBサイトで言えばユーザー)に喜んでもらい、お支払いをしてもらい、またリピートしていただくのがゴールなわけですから、同じお店の仲間を見下すというのは実にピント外れなこと。これはバックエンドとフロントエンドの関係にも当てはまるお話です。

どちらが上とか下とかなく、もちろん偉いも偉くないありません。

フロントエンドもバックエンドも、どっちが欠けても成り立たない、まさに持ちつ持たれつの支えあう関係性であることを忘れずにいましょう。

そういう意味でも、フロントエンドもバックエンドも両方経験し、双方の辛さや役目を実務で体験しているフルスタックエンジニアは視野も広く重宝されるというわけです。

プログラミングは「基礎」から学び挫折を避けるが先決

ノートをとる人

当サイト「キソプロ」はフロントエンドとバックエンド双方の基本となる基礎プログラミングの学習に特化しているサービスです。

オンラインのマンツーマンで学ぶことが可能です。

専任の講師に相談に乗ってもらいながら、じっくりと基礎を固めることが、後々の挫折を回避するために必要なこと。

ここを甘く見ていると、高い確率で「もういいや」「やはり向いてなかった」と、プログラミングをあきらめることになってしまいます。

新しいこと始めるとき、基礎をおろそかにして後々つまづいてしまった経験はありませんか?一見豪華なサービスや立派な参考書を買ったのに使いこなせず辞めてしまったことはないでしょうか?

至れ尽くせりの錯覚をするプログラミングスクールよりも「キソプロ」のような地味で堅実なサービスを選択されることをおすすめします。

ぜひご検討ください。