次回から当サイト「えんじにゃーブログ」でご検索ください

未経験からフロントエンドエンジニアへ!転職を目指すロードマップを解説!

未経験からフロントエンドエンジニアになりたい!という人は多いです。

しかし、フロントエンドエンジニアになりたい!と思っても「一体何から始めれば…」と悩む方も多いですよね。

今回は、そんな方に向けてフロントエンド・バックエンドの両方をこなす僕が

  • あなたがフロントエンドエンジニアに向いているか
  • フロントエンドエンジニアの将来性
  • 未経験者からの具体的な学習ステップ
  • 未経験からフロントエンドエンジニアになる

について解説します。

目次

フロントエンドエンジニアを目指すなら知っておきたい基礎知識

フロントエンドエンジニアを目指すなら、少し面倒ですが業界のことについて正しい知識をつけておく必要があります。

なぜなら、間違った知識のまま面接に行くと、面接官から「この人は何も知らないんだ」と簡単に落とされてしまいます。

そうならないためにも、フロントエンドエンジニアについて以下のことは最低限知っておく必要があります。

フロントエンドエンジニアについて知っておくべき点
  • フロントエンドエンジニアの仕事内容
  • フロントエンドエンジニアのスキル
  • バックエンドとの違い

では見ていきましょう。

フロントエンドエンジニアの仕事内容

フロントエンドエンジニアの主な仕事内容は、主にユーザーが触れる画面やデザインをコードに落とし込むことです。

したがって、技術者以外でも目に付きやすいためデザイナーや企画チームとのコミュニケーション能力も求められます。

フロントエンドエンジニアになるなら、技術力以外にも

  • 他チームと協力するコミュニケーション能力
  • ユーザーがどう感じるか考えられる能力

といった、他者と協力してユーザーを理解しようと考えられる人に向いています。

たかひろのアイコン画像たかひろ

エンジニアの中でも非技術者と関わる機会は多い職種といえるよ!

フロントエンドエンジニアのスキル

フロントエンドエンジニアが技術的に求められるスキルは以下の項目です。

フロントエンドエンジニアの技術の特徴として、バックエンドと比較しても技術の移り変わりが激しいことが挙げられます。

簡単に、フロントエンドとバックエンドの人気のフレームワークがいつ頃登場したかを比較してみると、

フロントエンドとバックエンドの公開時期の違い

フロントエンド

  • React.js・・・2011年
  • Vue.js・・・2014年
  • Angular・・・2016年

バックエンド

  • Ruby on Rails・・・2004年
  • Django・・・1991年
  • Laravel・・・2011年

と、フロントエンドの方が最近出てきた技術でも人気が高いことがわかります。

つまり、フロントエンドの技術は移り変わりが早く、より学習に積極的な姿勢が求められます。

フロントエンドはバックエンドと比べると簡単という意見もありますが、それは最近のJavaScript事情に詳しくない人の説明と言えます。

実際、フロントエンドを学習する際につまりやすい具体的なポイントを以下にまとめているので、合わせてご覧ください。

バックエンドとの違い

最後にバックエンドとの違いについてですが、今現在ではバックエンドの方が需要は大きいです。

また、上記でお話した部分もありますが、フロントエンドはバックエンドと比較しても

  • 技術的変化が早いため学習必須
  • 年収はバックエンドエンジニアの方が高い傾向にある
  • バックエンドエンジニアの方が求人も多い

など、正直、未経験からフロントエンドエンジニアになるのは不利な側面があります。

それでも、ユーザーが実際に触る見た目の部分に関わりたい!という人には、おすすめの職種です。

フロントエンドとバックエンドの違いと適正に関しては以下の記事にまとめているので、合わせてご覧ください。

たかひろのアイコン画像たかひろ

変化が速い分、最新の技術にも触れやすいというメリットもあるよ!

未経験からフロントエンドエンジニアになる学習ステップ

では、未経験からフロントエンドエンジニアを目指す学習ステップについて解説します。

学習ステップの手順は以下の通りです。

フロントエンドエンジニアになる学習ステップ
  1. Progateで独学する
  2. webサイトを自作する
  3. JavaScriptフレームワークに触れる
  4. フレームワークの周辺技術について知る

STEP 1: Progateで独学する

まず、フロントエンドエンジニアを目指すにあたってProgateで学習を進めていきましょう。

出典: Progate

Progateで学習するコースは以下の5つです。

  • HTML
  • CSS
  • Sass
  • JavaScript
  • jQuery

これらのコースを全て受講しようと思うと月額で980円かかりますが、非常に価値のある教材なので、さっと終わらせていきましょう。

STEP 2: webサイトを自作する

続いて、Progateで学習した内容を元にwebサイトの制作をしていきます。

webサイトを作る学習として最も効果的な方法は、実際に公開されているwebサイトの写経です。

写経・・・webサイトを真似して自分でコーディングを組むこと

例えば、Uberのサイトなどはデザインもシンプルで写経するにはもってこいと言えます。

画像
出典: Uber

このサイトのデザインのみをHTML+CSS (+jQuery) でコーディングしていきます。

webサイトを写経するときのポイントは以下の2つです。

  • 完璧を求めない
  • 画像やアイコンなどはダミーでOK

とにかく、実際にゼロから手を動かして大枠を作ってみることが重要です。

もし、わからない箇所が出てきたらProgateに戻って再確認してもいいので、全体像を作ってみましょう!

たかひろのアイコン画像たかひろ

最初は時間もかかるけどかなり力がつくよ!

STEP 3: JavaScriptフレームワークに触れる

続いてJavaScriptのフレームワークを学習していきましょう。

2020年現在であれば、以下の3つが人気のフレームワークですが、初心者はVue.jsから学習しましょう。

JavaScript人気フレームワーク
  • Vue.js(初学者におすすめ)
  • React.js
  • Angular

学習方法としてですが、公式ドキュメントにTODOアプリケーションの作成講座もあるので、こちらを進めるといいですね。

ToDoリストを作りながら学習しよう!

まずは写経から、着実にVue.jsの理解を深めていきましょう。

上記の学習を終えたら、より本格的な学習をするために以下のUdemyも活用して勉強も進めていくといいでしょう。

画像

超Vue JS 2 入門 完全パック

上記の講座ではフロントエンドエンジニアになるために必要なVue.jsの基礎知識が網羅されています。

講座で学べる知識
  • コンポーネント指向
  • Vue Routerによるルーティング
  • Vuexによるstore処理
  • axiosを使った非同期通信処理
  • Firebaseを使ったサーバレスアーキテクチャ構築

少しボリュームは大きいですが、より実践に近い技術が身につくので非常におすすめです。

STEP 4: フレームワークの周辺技術について知る

最後に、最近のフロントエンドでは「タスクランナー」「パッケージマネージャ」といったツールが必須です。

これらの学習を進めることによって、最近のフロントエンドフレームワークがどのように動くのかを理解することができます。

具体的な学習方法は、既にあるVue.jsの環境をTypeScript化してみるといいでしょう。

正直、難易度はかなり高いのでできなくても大丈夫です。ただし、できれば確実にフロントエンド技術理解は深まります。

本記事に記載した学習方法には、以下の記事により詳細に解説しているので合わせてご覧ください。

未経験からフロントエンドエンジニアに転職ための準備

では、学習が終えた方は転職活動をしていきましょう。

しかし、ここまで学習を終えたなら、自分の狙った企業に行きたいと思われるのではないでしょうか。

自分の望む転職を実現するためには以下の2つのポイントを守るといいですね。

転職を成功させる2つのポイント
  • ポートフォリオを用意する
  • エンジニア未経験に強い転職サイトに登録する

ポートフォリオを用意しよう

未経験からエンジニアになるにあたって、ポートフォリオは効果的なツールになります。

なぜなら、企業側は「未経験のあなたがどれくらいエンジニアとして活躍できるか」見極める必要があるためです。

仮に同じ勉強量で全く同じスキルだったとしても、

ポートフォリオのあるAさん

ポートフォリオのないBさん

だとAさんを採用しやすいと思われるのではないでしょうか。

たかひろのアイコン画像たかひろ

ポートフォリオは自分のやったことをアピールする良いツールになるよ!

どんなポートフォリオがいいの?と疑問かと思いますが、以下の記事にまとめているので合わせてチェックしておきましょう。

未経験エンジニアに強いサイトに登録しよう

また、エンジニアの転職サイトと一口に言っても様々な特徴があります。

一例を挙げてみると

エンジニア転職サイトの特徴例
  • 未経験からの転職に強い(おすすめ)
  • 新卒に強い
  • 経験値が高くハイクラス
  • ベンチャー企業に強い

未経験からエンジニアになることを狙うならdodaがおすすめです。

dodaで業界大手ということもあり、未経験の求人も数多く掲載されています。

↑東京の未経験求人でも1000件近くあります

↑関西でも未経験で200件超えの求人サイトはめずらしいです

いくつか登録すべき転職サイトはありますが、dodaは外せないサイトと言えます。

\ CHECK NOW /

=> dodaの公式サイト

他に未経験からフロントエンドエンジニアを目指す人が登録すべき転職サイトを以下にまとめています。合わせてご覧ください。

まとめ:未経験からフロントエンドエンジニアには十分転職可能!

ここまでの記事のポイントをまとめます。

  • フロントエンドエンジニアは他職種の人とも関わる機会が多い
  • フロントエンドは技術的な変化も速い
  • Vue.jsで簡単なアプリケーションが作れたらOK
  • 転職時にはポートフォリオを用意して未経験に強い転職サイトを使う

ここまで未経験からフロントエンドエンジニアを目指すにあたって、基礎知識と具体的なステップについて解説してきました。

未経験からエンジニアになるなら地味ですが、着実にステップを踏むことが最短コースになります。

しかし、こうしたロードマップに従わず、思わぬ転職をして後悔する人も少なくありません。

したがって、自分が望む転職を実現するためにも、ぜひ参考にしてみてください。

最後にフロントエンドエンジニアになるための学習方法について、まとめた記事のリンクを貼っておくので合わせてご覧ください。

【今だけ全プラン半額
– メンター始めました –

この度、MENTAにて未経験から1人前のエンジニアへ
転職を目指す方に向けて新たなプランを作成しました。

以下のボタンより対象のプランへアクセスできるので要チェックです。

【エンジニア転職を成功させる】

  • ブラック企業には行きたくない
  • わからないことだらけでサポートが欲しい
  • 未経験でも企業はちゃんと選びたい

未経験からエンジニア転職を実現するためには、自分に合った転職サイトを使うべきです。

webの評判が良くても未経験者にはおすすめできない転職サイトも数多くあります。

その中で、僕が「実際に使った」転職サイトのうち、未経験者におすすめのサイトだけピックアップして解説します。

- 3ヶ月でエンジニア転職を目指そう -

  • 解決できないエラーに心が折れた
  • 転職に必要なレベルがわからない
  • 本当に今の学習で転職できるか不安

そんな悩みを持っている人に

現役エンジニアが教える3ヶ月でエンジニア転職を実現する方法

を解説しています。

コメント

コメントする

目次
閉じる