初学者からエンジニアになるには?

【現役エンジニア解説】フロントエンドとバックエンドの違い、選択すべきはどちらか

 

オザック
こんにちは!Web歴8年以上、年収1000万超えエンジニアのオザックです!

 

この記事で解決することは?

今回は駆け出しエンジニアの頃に訪れる、フロントエンドとバックエンドの違い、将来性、そしてキャリアとしてフロントエンドなのかバックエンドなのか、その選択方法に解説します。

 

この記事で解決できる悩みは?

 

という疑問を紐解いていきます。

 

実際の業務や必要なスキルセット、将来性を知れば自分がどちらが好きかは明確になるので、選択でき、そのために必要な勉強方法も明確になります。

 

簡潔にフロントエンドとバックエンドの選択方法は

 

ポイント

フロントエンドとバックエンドの業務や年収、必要なスキルセット、そのための勉強法を知ることで

どちらの業務が自分がやりたいか・性に合っているかを確認し、キャリアを選択する事ができます!

 

オザック
実際に僕自身もWebエンジニアになりたての頃、その選択に迫られてどのように選択するのがベストか現役エンジニアの視点から説明するので最後まで確認してみてくださいね!

 

この記事を最後まで読むとやりたい方向性が見えてきて、キャリアの将来性や必要な勉強方法もわかるため、エンジニアとしてのキャリアのロードマップが見えるようになります!

 

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

WebサイトやWebアプリを作る上でフロントエンドとバックエンドはどちらも必要な業務です。

 

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

ポイント

フロントエンドはユーザが見たり触ったりする見た目の部分を開発していき、UI/UXを向上させることが主な業務になり、スキルの幅はバックエンドと比べると少ないです。

バックエンドはユーザが見えない、データベースの設計構築から、画面に表示するためのデータをフロントに渡したり、ユーザが入力したデータをデータベースに保存するAPIを開発するのが主な業務になり、

必要なスキルはバックエンドの言語とある程度のインフラやフロントエンド、データベースの知識も必要になってくるため、必要なスキルの幅が広いです。

 

フロントエンドエンジニアの業務と年収

 

業務について

フロントエンドエンジニアの主な業務はユーザの画面を開発することです。

例えば

フロントエンドエンジニアの業務と年収

 

これはエンジニア副業道場のトップ画面の一部です。

この画面はHTMLCSSというマークアップ言語で作られていて、このマークアップをしていくことがフロントエンドエンジニアの一つの仕事です。

またフロントエンドはJavaScriptというプログラミング言語を使って画面にアニメーションを入れたり、ブラウザからバックエンドにユーザがフォームに入力したデータを送るようにフロントとバックエンドをつなぐ開発などもあります。

 

参考

昨今だとフロントエンドエンジニアはJavaScriptも書ける事が必須になってきていて、SPA(シングルアプリケーション)というWebサイトを構築出来ることが重要になっています。

 

オザック
詳しくはこちらの記事に書いてあるので参考にしてみてください。

 

【エンジニアとは】わかりやすく業務内容と年収を現役エンジニアが解説

 

 

必要なスキルについて

 

フロントエンドで必要なスキルは

 

まずは画面を構成するための

  • HTML
  • CSS

です。

HTMLとCSSはマークアップ言語と言われ、プログラミング言語ではなくブラウザの画面を作るための言語になります。

 

HTMLは画面の骨組みを作ることを担います。

 

例えば表を作ったり、リストを作ったり、画像を入れたりなどはHTMLで行います。

 

CSSはその骨組みにデザインを当てる言語になります。

例えば表であったら表の背景の色や、フォントサイズ、フォントの種類、表の大きさなど、デザインをCSSはで作っていきます。

 

オザック

HTML、CSSはプログラミング言語と比べると比較的に簡単に学ぶことが出来ます。

とにかく直ぐにHTML、CSSの効率的な勉強方法を知りたい方、Web制作でお金を稼ぎたい方はこちらの記事を参考にしてください。

 

またもう一つの業務として、画面のアニメーションやバックエンドにデータを送る開発をするために使う技術

  • JavaScript(TypeScript)
  • (jQuery)
  • React.js
  • Vue.js

になります。

 

JavaScript(JS)は画面のアニメーションを作成したり、バックエンドにデータを送るためのフロントエンドの開発言語になります。

 

そしてTypeScriptというのはJSに型というのを導入してよりプログラマーが書きやすくしたMicrosoftが開発した言語になります。

 

昨今はTypeScriptの方が開発運用がしやすいという点からJSの代わりに使われる言語です。

 

jQueryというのはJSに置き換わる一番有名なライブラリになります。

 

JSをより書きやすくして、アニメーションなどを作成しやすくしたJSライブラリと覚えておくと良いです。

 

ただ昨今は後ほど述べるSPAが主流となっているため殆ど使われなくなりました。

 

React.js, Vue.jsはSPAというWebサイトを作るためのJSのフレームワークです!

 

参考

SPAとは単一のWebページで出来たWebサイトで、画面遷移は一つのページを部分的に変更することで無駄な処理を省き、直ぐに切り替わるようにしているツールになります。

 

オザック
昨今ではこのTypeScriptとReactまたはVueが使えることがフロントエンドエンジニアとしては必須のスキルになっています!

 

年収について

 

フロントエンドの年収は出来るスキルによって大きく異なってきます。

 

スペック 報酬額
HTML+CSSのみできる (規模にもよるが)1サイト10~30万
HTML+CSS+JS(jQuery) 300万~400万程度
HTML+CSS+JS+Vue(Nuxt) 500~800万程度、フリーランスだと80万/月も稼げるケースも有る
HTML+CSS+JS+React(Next) 600~800万程度、フリーランスだと80万/月も稼げるケースも有る
HTML+CSS+JS(TS)+React(Next) 700~1000万程度、フリーランスで100万/月も可能

参考文献: https://technolog.jp/engineer-business-content-salary/

 

バックエンドエンジニア業務と年収

 

業務について

 

バックエンドの業務はユーザに見えないシステムの裏側を開発することです!

主な業務としては

  • フロントに送るためのAPI実装
  • ユーザデータなどを保存するためのデータベース設計・構築
  • 定期的に処理をするためのバッチ実装
  • (インフラエンジニアがいる場合は不要)インフラ構築
  • (インフラエンジニアがいる場合は不要)CI/CDの構築
  • (フロントがやる場合もある)フロントエンドとAPIのつなぎこみ
  • バックエンドログ設計
  • (必要な場合)Dockerの構築
  • バックエンドの保守運用

とかなり幅広い業務があります。

 

バックエンドはフロントエンドやインフラとも密接に関わる領域のため、幅広い知識が求められます

 

必要なスキルについて

 

必要なスキルとしてまずバックエンド言語の習得です。

 

参考

バックエンド言語はPHPやRuby、Go、Java、TypeScript、Kotlin、Scalaなどがよく使われます。

 

またWebサイトを作るためのフレームワークの習得も必要です。フレームワークはWebサイトを作りやすくするために作られたツールで、それぞれの言語ごとに大体有名なフレームワークが存在します。

 

次にデータベースの知識が必要です。

 

例えばフロントからユーザが入力したデータをバックエンドに送り、そのデータをデータベースに保存して永久に使用します。

 

なのでデータベースとバックエンドは密接に関わるため、殆どの会社でバックエンドがデータベースを設計・構築・運用します。

 

続いてインフラ面の知識が必要です。

 

オザック
Web系で言うインフラとはサーバなど、Web配信をするための基盤のことを指します。

 

例えばhttps://technolog.jpにアクセスしたユーザにHTMLや記事のデータなどブラウザに渡して、ブラウザが表示します。そのHTMLやデータを渡す役割をサーバが担うため、Webサイトにはサーバの存在が必須です!

 

それを構築するのもバックエンドのエンジニアの役目というわけです。

 

参考

スタートアップや100人程度規模のベンチャーだとバックエンドがインフラを運用するのはよくあることですが、

大企業になってくるとインフラエンジニアと言われるインフラ専門に担う人がいたりして、バックエンドエンジニアはインフラを運用することはない場合もあります。

 

オザック
すぐにバックエンドのスキル勉強法を知りたい方はこちらに飛んでください!

 

年収について

 

バックエンドもスキルによりけりなので、どの程度の年収かは人によりますが、相場で言うといかになります。

 

スペック 報酬額 案件
PHP,Ruby3年程度 600~800万程度 豊富
Go3年程度 800~1200万程度 普通
Java 600~900万程度 豊富

参考文献: https://technolog.jp/engineer-business-content-salary/

 

 

フロントエンドとバックエンドの将来性

 

ポイント

フロントエンドとバックエンドの将来性は抜群にあります!

 

そもそもWebエンジニアの需要がここ10年程度はずっと右肩上がりで、未だに供給が需要を上回ることはリーマンショックのときしか無いです(参考)。

 

政府もIT人材を増やしていくため、幼少期の頃からITに触れさせる取り組みを始めています(参考)

IT人材供給に関する試算結果(低位)

今後のIT需要の伸びを低く見積もった厚生労働省の試算結果

 

IT需要を低く見積もっても既に不足している自体なので、フロントエンドだろうとバックエンドだろうと職がなくて困るということはまず無いでしょう。

 

フロントエンドとバックエンドどちらを選べばよいか?

 

ポイント

業務内容からやりたい方を選ぶ

業務内容からだと選べない場合

キャリアパスから選ぶ

 

業務内容からやりたい方を選択

 

ずばり僕の経験からポイントはまずは業務内容からやりたい方を選ぶのが良いです!

 

オザック

理由としては単純でやりたい方がスキルが伸びやすいからです。

その方が当然やりたいことと近いので勉強が捗ります。

 

エンジニアのキャリアパスから選ぶ

 

続いて今だとあまり業務のイメージがつかなかったり、特にどちらにも拘りはないという人向けに、フロントエンドとバックエンドのキャリアパスから選ぶという方法をオススメします!

 

まずそれぞれの特徴を説明します。

 

フロントエンドのキャリアパス

 

フロントエンドはバックエンドと比較して使う言語の種類や知識の幅はあまり多くは求められませんが、技術革新のスピードがとても速いです!

 

例えば今ではSPAが主流でReact+TypeScriptが流行っています。

 

ただ1,2年くらい前までは初学者でも覚えやすいという理由でVue+JavaScriptが流行っていたりしました。

 

すぐに技術の移り変わりが速いということはそれだけ情報のキャッチアップが必要ということです!

 

オザック
フロントエンドは技術の幅は広くないが、常に新しい技術をキャッチアップしたい人向けです!

 

バックエンドのキャリアパス

バックエンドの場合はフロントと比べて知識の幅が豊富です。

 

バックエンドはポジション的にバックエンドの知識は勿論、インフラの知識、CI/CDの知識、また多少はフロントエンドの知識も必要になってきます。

 

またバックエンドは言語の種類も豊富で昨今だと、

  • PHP
  • Ruby
  • Python
  • Rust
  • TypeScript
  • Go
  • Kotlin
  • Java
  • Scala

 

など流行り廃りは多少ありますが、プロダクト毎に使われている言語が違うので、複数言語の経験が必要となります。

 

キャリアの特徴としてはバックエンドは立場上、テックリードやCTOになるケースが多いです。

 

理由としてはサービスのボトルネックとなるインフラ障害が起きても対応出来たり、全体のシステムのことを知っている人というとバックエンドになるからです。

 

オザック
バックエンドは知識の幅が広いのでWebの全体的な知識を増やしたい人、テックリードやCTOを目指したい人向けです!

 

フロントエンドの勉強方法

まずはWebサイトを作る上でマストのHTML、CSSを学びましょう!!

 

HTML、CSSの勉強は独学で出来るので効率的な勉強方法はこちらの記事を参考にすると良いです!

 

ポイント

HTML、CSSがすでに理解している人(理解度はこちらの記事を参照)はテックアカデミーのフロントエンドコースでフロントを学ぶのが良いです!

 

理由は唯一フロントを教えてくれるプログラミングスクールであり、且つ現役エンジニアのメンターがついているので、技術習得には申し分ない点です。

 

現役エンジニアのメンターがいる点としては、

参考

  • 初学者のつまりポイントを熟知しているので挫折せずに最後までやり遂げられる
  • 現役エンジニアなので、教材では得られない実際の業務での知識を教われる

 

が主な強みです!

 

実際多くの人がエンジニアになろうとして挫折し失敗しているのが実情です。

 

一度でも挫折してしまうと、もう再度奮起してやるということは少ないと思います。

 

なので少しでも独学でやるのに不安な方はテックアカデミーのフロントエンドコースに入ることをおすすめします!

 

オザック
また値段的にも17万円程度で他のスクールに比べると比較的安いです!(学割もあります)

 

値段の問題は実際エンジニアになれば余裕で元が取れます。

 

僕自身約5年程度で年収1000万までいきました。そう考えると17万というのは全然安いですね。

 

オザック
もしまだ悩んでいる場合は無料キャリアカウンセリングで一度話を聞いてみると良いです!

 

このスクールの強みや学べる内容、将来的にどういう仕事につけるのかが学べます。

 

フロントエンドコースを見てみる

 

バックエンドの勉強方法

 

バックエンドエンジニアの幅広い知識を求められるため、いくつかのインフラ領域を勉強する必要がありますが、まずはバックエンドの言語を書ける様になることが当然重要です。

 

初学者向けに勉強しやすい言語はRubyとPHP、Pythonになります。

 

それぞれ特徴はありますがWeb系を目指すのであればRubyとPHPのどちらかを習得するのが良いです!

 

オザック

理由は

  • 日本語ドキュメントが豊富
  • 案件が豊富
  • 動的型付け言語なので初学者でも簡単に覚えやすい
  • Webサービスを作るのに優秀なフレームワークがある

 

Webサイトを作って稼げるエンジニアになりたいという方は以下のPHP/Laravelを学ぶ方法、またはRubyOnRailsを学ぶ方法の記事を参考にしてください!効率的な勉強法が載っています。

 

【初心者入門】PHP/Laravel開発の勉強法を現役エンジニアが解説

 

【初心者入門】RubyOnRailsの勉強法を現役エンジニアが解説

 

 

まとめ

ポイント

フロントエンドとバックエンドって何が違うの?

フロントエンドはユーザが直接触る画面を開発、バックエンドはデータベースのデータをフロントに渡したり、データを保存する裏方を開発する!

キャリアとしてどっちを選べばいいの?

今回の内容で業務に興味を持ったほうを選ぶべし。ただしどちらもまだわからない場合は、本文中にあるそれぞれのキャリアパスを見て選ぶ!

将来性は?
エンジニアは需要過多なので今からでも全く問題ない!

 

この記事からフロントエンドとバックエンドの違いがわかり、自分にとってどちらが良いキャリアか、そしてそのための勉強法もわかり、エンジニアとしての最初の一歩が歩めるはずです!

-初学者からエンジニアになるには?

© 2021 エンジニア副業道場 Powered by AFFINGER5