Webアプリケーションの開発現場では、「フロントエンド」「バックエンド」という言葉がよく聞かれます。今回はこのふたつについて、役割や将来性などといった観点で紹介していきます。
1. フロントエンドエンジニアとバックエンドエンジニアの役割の違いとは？
「フロントエンド」と「バックエンド」は、開発現場でのエンジニアの役割で区別される言葉です。それぞれどのような役割を担っているものなのか、紹介します。
1.1 フロントエンドとは
「フロントエンド」は、Webアプリケーション・Webサイトにおける、ユーザーと直接情報のやり取りをする要素のことです。具体的には、ショッピングサイトを開いたときに目に入るTOPページや、文字入力をするフォーム、ボタンをクリックする部分などといった「ユーザーの目に触れる視覚的な部分」を指します。
ビジュアル効果のコントロールは、フロントエンドエンジニアの代表的な担当業務です。ECサイトを例に挙げると、商品検索ページの画面構成は、フロントエンドの分野となります。
1.1.1 フロントエンドエンジニアとは
フロントエンドエンジニアの主な役割は、Webデザイナーのデザインに沿って、HTML／CSSで見た目を作り、JavaScriptでページ全体に動きを与えていくことです。
特にJavaScriptは重要な要素で、以下のような様々なJavaScriptフレームワークが、開発現場で重用されています。
- Angular
- React
- Vue.js
例えばReactは、高速な読み込みが可能になるJavaScriptライブラリです。複雑なコードでも読みやすくなるため、プログラムが複雑化していく傾向の中、Reactは多くの開発現場で重宝されています。
このほかにも新たな技術も次々と登場しており、また、トレンドの変化が大きく影響する分野のため、フロントエンドエンジニアには、世の中の変化をキャッチアップしていくことが求められます。
1.2 バックエンドとは
「バックエンド」は、ユーザーが入力した内容についてのデータ処理やデータベースへの保存、検索結果の出力など、ユーザーの目に触れない部分の処理を指します。ECサイトを例に挙げると、商品検索ページにて、ユーザーが入力したキーワードに沿った商品情報の抽出や、支払いに関するクレジットカード情報の処理などが、バックエンドの分野となります。
1.2.1 バックエンドエンジニアとは
サーバー構築やデータベース構築など、ユーザーからは見えないインフラ周りを担当するのがバックエンドエンジニアです。また、サービスリリース後のエラー監視や修正、アクセス増加への対応も、バックエンドエンジニアが担当します。
バックエンドエンジニアが利用する主な言語には、RubyやPHP、Pythonなどが挙げられます。近年はリアルタイムWebが人気のため、フロントエンドとの連携が得意なNode.jsや、並列処理が得意なGo、堅牢性が高いErlangが利用可能なElixirなども注目されています。
2. 【テクノロジー編】フロントエンドとバックエンドの違い
続いて、フロントエンドとバックエンドには、利用するフレームワークや言語など、テクノロジーの観点ではどのような違いがあるのかを紹介していきます。
2.1 フロントエンドエンジニアの使用言語・フレームワーク
フロントエンドエンジニアが使う言語については、先述した通り、HTMLやCSS、JavaScriptが挙げられます。HTML／CSSにてページの枠組みを構成し、JavaScriptで動きをつけていくのが一般的です。
また、JavaScriptの主なフレームワークとしては、AngularやReact、Vue.jsなどがあります。AngularもVue.jsもJavaScriptの機能を生かして単一のページ内にすべての機能を集約させたSPA（Single Page Application）の開発が得意なフレームワークです。画面遷移を伴わないため、ユーザが操作ごとに画面が変わるのを待つ必要がなく、利用者にとってストレスの少ないWebアプリを開発できます。
以下に、各フレームワークのバージョン情報や事例をまとめました。バージョン情報は2020年10月時点のものとなります。
◆ Angular
| 最新バージョン | 10.1.3 |
|---|---|
| URL | https://angular.jp/ |
| 代表的な採用事例 | NRIネットコム |
◆ Vue.js
| 最新バージョン | 2.6.12 |
|---|---|
| URL | https://jp.vuejs.org/index.html |
| 代表的な採用事例 | note |
参照:noteのフロントエンドをNuxt.jsで再構築した話（福井 烈）
2.2 バックエンドエンジニアの使用言語・フレームワーク
バックエンドエンジニアが扱うのは、RubyやPHP、Python、Javaなど、サーバーサイドの言語です。フレームワークとしては、RubyのRuby on Rails、JavaのSpring Bootが代表例です。
開発効率やスピードを求めるベンチャー企業などでは動的言語であるRubyが、堅牢性が求められるプロジェクトでは静的言語であるJavaが使われるケースが多く見られます。
以下に、各フレームワークのバージョン情報や事例をまとめました。バージョン情報は2020年10月時点のものとなります。
◆ Ruby on Rails
| 最新バージョン | 6.0.3.3 |
|---|---|
| URL | https://rubyonrails.org/ |
| 代表的な採用事例 | 食べログ |
参照:『食べログ.com』、Ruby on Railsを採用し、フルリニューアル～大規模サイトとしては国内初の全面書き換え｜株式会社カカクコム
◆ Spring Boot
| 最新バージョン | 2.3.4 |
|---|---|
| URL | https://spring.io/projects/spring-boot |
| 代表的な採用事例 | LINE Notify |
参照:Lineにおけるspring frameworkの活用
3. 【年収・キャリア編】フロントエンドとバックエンドの違い
今度は、フロントエンドエンジニアとバックエンドエンジニアについて、年収やキャリアパスといった観点での違いを紹介します。
3.1 フロントエンジニアの年収・キャリアパス
マイナビエージェントのデータによると、マークアップエンジニアやフロントエンドエンジニアの平均年収は、385万円です。
一口にフロントエンドエンジニアといっても、何に強みを持っているのかによって、3パターンのキャリアが考えられます。
「技術」に強みを持つ場合は、サーバーサイドの技術も学び、フルスタックエンジニアを目指すことも可能でしょう。近年では、FirebaseやBFFの登場により、フルスタックとしてキャリアを歩みやすい状況です。
「デザイン」に強みを持つ人は、Webデザイナーと兼務できるエンジニアを目指すことも選択肢の一つです。
「マネジメント」に強みを持つ人は、フロントエンドに加えて、アクセス解析や広告運用業務など、ビジネス寄り業務を行なうことで道が拓きやすくなります。
参照:マークアップエンジニア・フロントエンジニア（職種別平均年収ランキング ）｜マイナビエージェント
3.2 バックエンドエンジニアの年収・キャリアパス
マイナビエージェントのデータによると、サーバーエンジニアの平均年収は465万円、システムエンジニア・プログラマの平均年収は443万円です。
バックエンドエンジニアのキャリアパスとしては、ITコンサルやPM、フルスタックなど、多くの選択肢があります。
インフラやデータベース設計などを始め、Webサービスの全体構造への網羅的な理解が求められる職種であるため、慢性的に多くの企業が人材不足に陥っています。そのため、バックエンドエンジニアの需要は高く、キャリアアップは目指しやすいと言えるでしょう。
4. フロントエンドエンジニアとバックエンドエンジニアの将来性
Web技術の発達とともに、必要とされるエンジニアの能力も変わっていきます。ここでは昨今のWeb技術の動向を踏まえながら、フロントエンドエンジニアとバックエンドエンジニアの将来性について紹介していきます。
4.1 フロントエンドエンジニアの将来性
BFFやFirebaseなどのプラットフォームの登場で、従来はバックエンドエンジニアの役割だったインフラ周りを、フロントエンドにて処理できるようになりつつあります。バックエンド不要の開発が広まる可能性を秘めており、技術的に面白い領域であると言えます。
一方でこれは、「覚える言語が少なくて済む」ことも意味します。そして、コーダーなどは海外アウトソーシングが進む可能性も高く、従来フロントエンドエンジニアが担当していた単純なコーディングだけでは、仕事を受注していくことが難しくなるでしょう。
最新技術への継続的なキャッチアップを欠かさないようにすることが、フロントエンドエンジニアには重要です。
4.1.1 BFFの登場
BFFとは、フロントエンドのためのバックエンドサーバーのことです。具体的には、フロントエンドのためにAPIを呼び出したり、HTMLを生成したりするサーバーのことを指します。
リバースプロキシとバックエンドのサーバーの間に設置されることが多いBFFは、この両者に対して、ページの構築や、入力情報の橋渡しなどの役割を担います。
BFFの誕生には、フロントエンドがデータ取得のため、複数のAPIにまたがってアクセスをしなければならなくなったり、フロントエンドの処理が複雑化していったことが背景にあります。BFFは複数のサービスを管理してくれるため、フロントエンドがアクセスするAPIは減少し、フロントエンド側のコードをシンプルに保つことができるようになります。
4.1.2 Firebaseの普及によってサーバーサイド・バックエンド不要の開発が広がる
Firebaseは、Googleが運営しているWebアプリケーション開発プラットフォームです。メッセージの送受信やユーザーID管理、画像の共有など、バックエンドの機能を提供してくれるサービスとして、近年多くのアプリケーションにて利用されています。リアルタイム同期も得意で、サーバー側の開発コストを大幅に減らすことができます。
また、Firebaseを利用することで、フロントエンドエンジニアはクライアント側の開発に集中することができるため、エンジニアの負担軽減やリソースの節約といった効果も見込めます。
このように、バックエンド不要の開発への試みは広がりつつあります。しかし、セキュリティ面や保守性には、まだ課題も残っています。完全にサーバーサイドの知識がない状態でのフロントエンド開発は、個人開発を超えるレベルだと注意が必要です。
4.1.3 ディレクション、マーケティング、デザインなどプラスαの技術が求められる
フロントエンドエンジニアが担当する分野は、技術的に革新が続く面白みがある一方で、シンプルなコーディングのみだと、サーバーサイドほどの専門性も求められません。今後、コーダーの業務は、海外アウトソーシングやクラウドソーシングへの外注が一般的となる可能性があります。
そして、NoCode技術がさらに進めば、LP程度であれば、ディレクターがワンストップで作ることも可能になります。フロントエンドエンジニアには、今後、ディレクションやマーケティングなど、プラスアルファのスキルを身につけることが重要となっていくでしょう。
4.2 バックエンドエンジニアの将来性
Firebaseなど、バックエンド側の環境を提供してくれるプラットフォームが普及し、バックエンド不要の開発が進みつつありますが、だからといって、バックエンドエンジニアの業務がなくなるわけではありません。
例えば、Firebaseを中規模～大規模な案件で採用するには、セキュリティ面などといったバックエンドの知識が依然として求められます。プロジェクトの性質によっては、バックエンドエンジニアのスキルは、今後も必要不可欠です。
4.2.1 サーバーサイド／バックエンドの知識は今後も非常に重要
今後、サーバーレスが推進したとしても、Webサービスの全てのデータがクラウドで管理されるわけではありません。クラウド間でのデータのやり取りに関するセキュリティ面や、クラウドへのインフラ構築を行なうためのITスキルの不足など、課題が浮き彫りになっているのが現状です。
そのため、近年多くの企業で一部アプリケーションのオンプレミス環境への回帰も見られます。アメリカのクラウドコンピューティング企業「Nutanix」が2019年に実施したクラウド導入動向に関する調査（Nutanix Enterprise Cloud Index 2019）では、クラウドを導入した企業のおよそ73%が、クラウド導入後にオンプレミス環境による運用に戻ってしまったという調査結果が発表されています。
こういった動向からサーバーサイドの知識が今後も非常に重要なポジションでありつづけることが想定されます。
参照:Nutanix Enterprise Cloud Index 2019
4.2.2 中規模～大規模サービスでの需要が継続的に発生する
堅牢性が求められる案件や、クラウドに移行していない企業の案件、セキュリティ重視の案件では、バックエンドは現在も非常に大きな役割を担っています。
インフラの部分は特にセキュアな仕組みを求められるため、中規模～大規模案件で中長期に渡って安定的なニーズのある職種だと言えるでしょう。
5. フロントエンドとバックエンドに関するよくある質問
フロントエンドとバックエンドについて、様々な観点から紹介してきました。次からは、フロントエンドとバックエンドについてよく挙がる質問を、Q&A形式で答えていきます。
5.1 バックエンドエンジニア不在で開発されたアプリケーションの実例には何がある？
クックパッドの「Komerco」というCtoC ECアプリは、Firebaseを利用し、バックエンドエンジニア不在で開発が行なわれました。開発者はこのプロジェクトについて、良い面も良くない面もあったと振り返っています。
良かった点としては、サーバーサイドのエンジニアとやり取りをすることが無くなり、開発スピードが上がったことを挙げています。フロントエンドエンジニアがやるべき作業に集中することができるため、開発効率は上がったとのことです。
逆に良くなかった点としては、データベース設計とセキュリティ面を挙げています。Firebaseの仕様上、操作によっては、非公開にすべきデータまで簡単に表示されてしまうことにもなりかねません。気軽に使える分、慎重に扱わなければならないと感じたとのことです。
参照:Firebaseでバックエンドエンジニア不在のアプリ開発 クックパッドが体感した、メリットと課題｜エンジニアHub
5.2 フロントエンドは得意だけどサーバーサイドの技術は苦手。何を学ぶべき？
AngularやReactなど、一通りJavaScriptについて学習した後に、Node.jsを学習することがおすすめです。Node.jsはサーバーサイドをJavaScriptで書けるため、サーバーサイド向けに別の言語を学び直すよりも学習コストが抑えられます。
また静的型付け言語として扱えるようJavaScriptを拡張したTypeScriptの学習も、サーバーサイドでの開発に必要な型の扱いについて理解を深めることができます。
さらにサーバーレス開発に関心があれば、勉強会などに出席し、Firebaseを学習するのもおすすめです。
5.3 バックエンドは得意だがフロントの技術が苦手。何を学ぶべき？
具体的に何が苦手なのかにもよります。HTML／CSSを書くのが苦手であれば、Bootstrapを学ぶとよいでしょう。Reactでの複雑なコーディングに苦手意識があるのなら、Vue.jsの導入を検討するのも選択肢の一つです。
また広範なフロントエンドの領域を基礎からしっかりと学びたい人は、フレームワークやライブラリをあえて使わないネイティブJavaScriptの文法を言語構造から丁寧に学習するのもおすすめです。関数までもがオブジェクトとして扱われるJavaScriptの特異性を根本から理解することで、どういったフレームワークを使うときにも役立つ応用力を養えます。
5.4 フロントエンドとバックエンド、どっちを学ぶのが結局おすすめ？
興味のある分野を学ぶことをおすすめします。
- フロントエンド
ユーザーの目に触れる部分を動的に作ることに興味がある人におすすめ
- バックエンド
Webサービスの全体像を常に把握し、構成やサービスの拡張性を検討することに興味がある人におすすめ
それでも迷う場合は、サーバーレス技術が今後さらに進展する可能性も高いため、まずはフロントエンドについて理解を深めるとよいでしょう。
6. まとめ
システムが複雑になるにつれて、フロントエンドとバックエンドの境界は曖昧になりつつあります。しかし今後どちらかがなくなるということはありません。どちらもアプリケーション開発の現場では欠かせない分野であり、双方がしっかりと役割を果たすことで、初めて安全で利便性の高いアプリケーションが完成します。
各役割を理解し、こまめに連携を取りながらプロジェクトを進めていくことが、アプリケーション開発を行なうために重要だと言えるでしょう。
