2020/09/20

フロントエンドのエンジニアのロードマップ 【身につけるべきスキル・収入アップ手順】

FREELANCE PROGRAMMING WORK

フロントエンドエンジニアを目指す人「フロントエンドのエンジニアとしてスキルアップしていく方法を知りたい。フロントエンドのエンジニアとして収入を上げていくにはどうしたらよいのだろう。」

こういった疑問にお答えします。
僕も最初の頃に、情報が多すぎてわからず困った経験があり、先輩エンジニアに相談していたことがあります。

本記事の内容

• フロントエンドのエンジニアのロードマップ
• 収入を上げていくオススメの方法

この記事を書いている僕は、フロントエンドのプログラマー(フリーランス)として、これまで３年以上のWeb制作経験があり、HTMLやCSSのマークアップからJavaScriptのフレームワークであるVue,React,Nuxtなどフロントエンドの開発を得意としています。

フロントエンドのエンジニアのロードマップ

フロントエンドのエンジニアは、挫折しにくくハードルが低いため、なりやすいというメリットがあります。逆に参入障壁は低いため多くの参入者がいますが、フロントエンドの範囲が広いこともありスキルレベルの差が大きく、チャンスも多いのが特徴です。

ステップアップの手順を順番に紹介していきます。（デザインは分業する前提で含まれないものとして今回は扱います）

HTML/CSSでマークアップができるようになる

まず最初にやるのは、HTML/CSSでマークアップができるようにすることです。
最初はここを完璧に仕上げて、デザインカンプで上がってくるデザイン通りにマークアップできるようにします。

慣れてきたら、FlexBoxやGridLayoutを使うなどできるだけ最新の書き方でかけるようにしましょう。CSSアニメーションなども使えるようにします。

Sassを使えるようにする

次にSassを使えるようにします。CSSが書ければすぐに慣れると思います。
Sassはそのままだとブラウザが解釈できないのでCSSへコンパイルする必要があるため、初心者はPreprosなどのツールを導入すると簡単だと思います。
SASSとSCSSの2種類の書き方がありますが、基本がわかればどちらでも書けるようになります。SCSSの方がとっつきやすいので、初心者はSCSSで始めるのがオススメです。

JavaScript・jQueryで簡単な実装ができるようにする

基本的な実装ができるように、最初はjQueryでよいので書けるようにします。
ハンバーガーメニュー、スムーススクロール、タブ、アコーディオンなどです。

まずはライブラリーを使ったりする形でもよいので実装して慣れていき、そこからJavaScriptの基本的なところから徐々に使えるようにしていきます。
マークアップの仕事をしていれば、JavaScriptを使った凝った動作の実装などは出てくると思うので、積極的に手を挙げて実績を積むようにし、ステップアップするのをオススメします。

CSS設計について学ぶ

BEMやFLOCCS・SMACSSといったCSS設計ができるように、概要でもいいので学習して使えるようにしておきます。

JavaScriptのフレームワークを使えるようにする

Single Page Application を実装できるようにステップアップします。ここが一番難易度が高く、収益のアップが見込めるタイミングでもあります。
JavaScriptのフレームワークを避けたい場合はフリーランスになって自分でWeb制作案件を回す方向に舵を切るのもアリだと思います。

React、Vue、Angularの３つがメジャーで、Angularの案件は少なくTypeScriptも必須のため、ReactかVueから始めるとよいと思います。
ではReactとVueのどちらから始めるべきかということですが、初心者の視点でみた場合に以下の特徴があります。

React

• 案件はReactの方が多いです。
• 多くの場合はReduxという状態管理のフレームワークも使える必要があり難易度は少し高くなります。
  （React + Reduxでは非同期処理でredux-thunk、redux-sagaなども学習の必要があり初学者にはやや難しいです）
• 定番のライブラリ(MaterialUIやReduxForm等)を使う案件が多く、ある程度は使えるようにしておいた方が案件の幅が広がります。
• ある程度ルールがガッチリ決まっているので、一度覚えると人によるコードのばらつきが少なく、理解しやすいと思います。
• React経験値が増えてくると、現時点ではフロントエンドしかできなくても単価が高めの案件獲得がしやすい状況です。

Vue

• Vueの案件は増えてきており、Reactほどではないですが案件は豊富です。
• HTML・Script・CSSの構造がはっきりしているので初心者は理解しやすいと個人的には思っています。
• 公式の日本語マニュアルが充実していて学習しやすいです。
• Vuexなど状態管理もReduxより理解しやすく、学習しやすいと思います。
• VueをベースにしたNuxtの案件もたまにあったりするので、Vueが使えればNuxtも習得しやすい。
  （NuxtではSSRの知識やNuxt特有のルールをプラスで覚える必要がある）

ReactとVueに共通するのは、まだまだ新機能が追加され続けてバージョンアップしている点です。
変化が早いため経験者も学習し続けなければならないですが、逆にそこにチャンスが有り、経験が少なくても参入しやすいというメリットがあります。

自分で簡単なチュートリアルを両方やってみて、好きな方を選んでまずはやってみるでよいと思います。総合的にはVueの方が始めやすいかもしれません。
まずはどちらかをある程度使えるようにして案件に参加してみるのがよいです。

SPA(Single Page Application)未経験で案件に入るには、ポートフォリオを用意しておき、予め対応ができることをアピールすればチャンスがあると思います。
対応できる人員が不足しているはずなので、どこかにチャンスはあるはずです。

TypeScriptを使えるようにする

React・Vueと並行してTypeScriptの学習を進めることをオススメします。
最近はReactやVue・Nuxtで書く時もTypeScriptで書く案件は増えているように感じています。React・Vueが使えるようになってから、次のステップアップとしてTypeScriptを覚えるのはアリです。

SSR・SSGの知見を深める

SPA(Single Page Application)には、SEOや初期読み込みの重さなどの弱点があり、SSR(ServerSideRendering)やSSG(ServerSideGenerate)でJAMStackなサイト構築をするなども増えてきています。
ReactをベースにしたGatsbyやNextなどや、VueをベースにしたNuxtなどのフレームワークが代表的です。

収入を上げていくオススメの方法

収入を上げていくステップを紹介します。
未経験から始める場合は、「自主的な学習からポートフォリオを作る」「スクールに通って学習してポートフォリオを作る」というところから始め、Web制作会社に就職して経験を積むのがよいと思います。

その後は以下の手順でステップアップを狙います。

②のマークアップがある程度できるようになったところで、フリーランスとしてWeb制作の仕事を自分でとってこなしていくことも選択肢のひとつです。マーケティングなどを組み合わせれば年収1000万円は軽く超えられると思います。

ざっくりの月収目安は以下の通りです。

制作会社の社員

開発会社の社員

フリーランス (業務委託で企業に常駐)

フリーランスになる方法は別記事でも紹介しているので参考にしてみてください。

» フリーランス エンジニアのなり方 【プログラマーが初めて独立するタイミング】
» 未経験からフリーランスのエンジニアになって案件を獲得する方法

まとめ：マークアップ→JavaScript→JavaScriptフレームワークと経験を積んでいくのがよい

フロントエンドのフレームワーク（React・Vue・Angular）は落ち着いてはきたものの、まだまだバージョンアップが繰り返され学習し続けることが必要です。
プログラミング全体で言えますが、新しい言語やルール改定が激しい言語などは経験者が少ないので人気が出れば初学者にもチャンスが多いので積極的に学習していくのはアリだと思います。
（逆に学習しても流行らなくて学習が無駄になるなどのリスクもあります）

処理の最適化が進み、ひと昔前はバックエンドでやっていた一部の処理が、最近はフロントエンドに移行してきています。
バックエンド経験者がフロントエンドもやるということも増えてきていてフルスタック志向にもなりつつあるのと同時に、フロントエンドエンジニアのチャンスが増えていると思います。
現在はフロントエンドしかできなくてもある程度、高額の報酬を得られるようになってきており、フロントエンドを突き詰めていくというのもアリだと思います。

ご参考になれば幸いです。

フリーランス プログラミング フロントエンドエンジニア ロードマップ

※当サイトでは一部のリンクについてアフィリエイトプログラムを利用して商品を紹介しています

• facebook
• Tweet
• hatebu
• Share
• Read Later