フロントエンドエンジニアに転職したリアルなロードマップ公開

こんにちは、ジュンヤです。

Babyちゃん

今回の対象読者はフロントエンジニアになりたいけど、どういう風に勉強を進めていいかわからない人が対象です

今回は1年間のプログラミング独学の結果、フロントエンドエンジニア(JavaScript,React)として仕事をしている僕が、辿ってきたフロントエンドエンジニアになるためのロードマップを作成しました。

独学でフロントエンドエンジニアになるまでにかなり遠回りの学習をしてきたので、このロードマップがフロントエンドエンジニアを目指す方の助けになれば幸いです。

フロントエンドエンジニアを目指した理由

Coded stuff on screen

フロントエンドエンジニアになろう!!と志したのは、就職のしやすさから選んでいます。

実はフロントエンドの勉強に本腰を入れるまで、ずっとRuby、Ruby on Railsの勉強を進めており、Railsチュートリアルと呼ばれる学習教材の内容は完璧に理解できるまでになっていました。

しかし海外の企業で働くエンジニアの友達にRuby on Railsを扱えるエンジニアの需要を聞いたところ、「海外で働きたい奴が今更Ruby on Railsの勉強をするのはエンジニアにそもそも向いてない、ググレカス」と説教を受けたところが始まりです。

Who gives a F*** about Rails in 2019?

 

この記事では様々なソースをもとにRoR(Ruby on Rails)の将来性について話していますが、個人的にRoRを学び続けるモチベーションが湧かなくなったのがGitHubでのレポジトリ利用言語を年数別にみたグラフを見たときです。

プログラミング言語に流行り廃りはあるにせよ利用言語の上位陣は安定して使われていますが、Rubyだけ急激にランクを落としています。

github-octoverse-ruby-on-rails

参考URL:https://naturaily.com/blog/who-gives-f-about-rails

またIT大国のインドにてエンジニアの紹介事業を行なっているのですが、Rubyを学んでいる学生に出会うことよりIIT(世界最強のエンジニア学生集団)のエンジニアを紹介する方が簡単です。

エンジニア紹介から感じるプログラミング言語の需要やソースによってRoRを学ぶのを辞めて、フロントエンジニアとして必要な言語をガッツリと勉強することにしました。

ちなみにRuby、RoRの勉強をしたことで、フロントエンド学習の役に立った!!いい遠回りだった!!!と感じることは特にありません。

自分がWebアプリを作りたいからRoRを学ぶ!!と学習をむやみに始めるよりも、市場をしっかりと鑑みて学ぶプログラミング言語を選択すればよかったと感じています。

Webエンジニアのロードマップについて

Webエンジニアとは??

Webエンジニアは大別するとフロントエンドエンジニアバックエンドエンジニアに分かれます。

フロントエンドエンジニアはユーザーに見える部分の開発をします。
「デザインがきれいなWebサイトや凝ったアニメーションの演出があるWebサイトを作ってみたい」という人はフロントエンド志望でいいと思います。

バックエンドエンジニアはサービスが自動で動く裏側の仕組みを開発しています。
「ECサイトのようなユーザーに便利なサービスの開発に携わりたい」「将来的に自分のサービスを開発したい」という人はバックエンド志望でいいと思います。

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

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

フロントエンドエンジニアに最低限求められるもの

  1. HTML/CSSによるWebサイトコーディング
  2. JavaScriptの理解
  3. JavaScriptを使った動くUIの実装
  4. jQueryのプラグインやAjaxを使った実装
  5. タスクランナー(gulp)やモジュールバンドラー(Webpack)の利用
  6. Vue.jsもしくはReact.jsを使ったミニアプリの開発

バックエンドエンジニアのロードマップ

バックエンドエンジニア ロードマップ

バックエンドエンジニアに求められるもの

  1. 最低限のHTML/CSSの知識
  2. JavaScript及びjQueryを使った簡易アニメーション実装
  3. Web系言語(ex. PHP, Ruby, Python, etc)の理解
  4. データベース(MySQL)の基礎的な理解
  5. MVCフレームワークを使用したWebアプリケーション開発
  6. 仮想開発環境構築の理解(Vagrant/Docker)

このフロントエンド・バックエンドエンジニアのロードマップは毎年GitHubにアップ(更新)されているWebエンジニアに必要なスキルがまとめられたものです。

ちなみにこのロードマップの見方としては

「おすすめスキル」→黄色

「選択肢にもなるスキル」→クリーム色です。

1年間の学習履歴とフロントエンジニアになれたロードマップ

Programmers working in software developing company

僕が実際に行なった学習を期間・独学した媒体・利用した転職サービスを元に紹介します。

1年間プログラミング学習を続けて大事だと感じているポイントは「少し背伸びをした内容を常にインプットし続けていくこと」です。

如何せん、日本人がプログラミング学習をしようとすると如実に学習内容が重なることが多く意図的に知っている・分かっている内容を除いて毎日進み続けることができるのか?が習得スピードをあげるコツだと思っています。

Progateなどプログラミングを始めて学ぶ初学者にはぴったりですが、書籍に置き換えると序章です。

Progateをやるとプログラミング学習をした気になって、満足感が高くなりますが、要注意です。

学習ロードマップ

僕が年間を通してお世話になったのが『FrontendMasters』です。

毎日3-4時間、『FrontendMasters』の内容を真摯に取り組んだだけでしたが内定を頂けるレベルまで成長することができました。

日本には様々なフロントエンドを学ぶツールが存在しますが、このクオリティで学べるコンテンツは存在しません。

内容を理解するためにMDNを見返し続けました。

わかるまで、動画を見直し、公式テキストを読み返すことでJavaScriptはある程度理解できたかなと思っています。

またCSSへの理解は『FrontendMasters』にあるCSSコースを受講することを強くお勧めします。

Progateやドットインストールから学んでしまったのですが、『FrontendMasters』で基礎の基礎から教えてくれます。

TOEICの点数が700点近くあれば理解できるコンテンツなので、英語に苦手意識がないエンジニア志望の方は最初っから『FrontendMasters』で学んでみてください。

成長速度が段違いかと思います。

ロードマップ.001 ロードマップ.002 ロードマップ.003

ちなみに僕の学習ロードマップの見方としては

「勉強したスキル」→黄色

「利用したプログラミング教材」→クリーム色

「学習期間・関連内容」→水色

 結論:フロントエンドエンジニアを目指す人へお勧めの学習方法

 

FrontendMasters』をやり続けてください。1年間夢中になってやってください。絶対に内定を頂けるレベルまで成長することができます。

プログラミングスクールで学べないほどディープなコンテンツが独学で身につけることができます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です