MENU

これが最速!未経験から年収1000万円のフロントエンドエンジニアになる完全ロードマップ!

目次

はじめに

「高収入のフリーランスエンジニアになりたいものの、何から手をつければ良いかわからない」
そんな疑問が解消され、明確なアクションプランを立てることができます。

完全未経験から2年1ヶ月で月収112.5万円を達成した私の実体験をもとに
最速ロードマップを作りました。

方針としてはフロントエンドエンジニアという職種です。

あわせて読みたい
フロントエンドエンジニアとは?メリット、デメリットとその対策、向いている人などを徹底解説! 【はじめに】 今回はフロントエンドエンジニアという職業について解説します。 自分がどんな働き方が向いているのか、判断する際の参考になれば幸いです。 【フロントエ...

年収1000万のフリーランスエンジニアになるロードマップ!

Step1:Html CSS を学習する

HTMLはホームページやアプリに、テキストや画像を表示することが可能です。
CSSはテキストや画像の色や大きさを変更することができます。

学習手順

あわせて読みたい
これが最速!Html & CSS 学習方法 【この記事を読むメリット】 ・Html & CSSを効率よく学習する方法がわかる ・具体的な教材やアクションプランがわかる ・どこまで技術力が上げれば、Html & CSS...

目標

このサイトを模写できればHtml CSSの独学レベルのスキルは十分です。

あわせて読みたい

Step2:JavaScript を学習する

Javascriptはページに動きをつけることができます。
具体的には下記のような機能が実装できます。

・クリックしたら、一番上までスクロールされる
・スクロールしたら、モーダルが表示される

学習手順

あわせて読みたい
JavaScript入門!学習方法を現役フロントエンドエンジニアが解説! 【はじめに】 今回はJavaScriptの学習方法について解説します。 これからJavaScriptの学習を始めようとしている方の参考になれば幸いです。 【前提】 ①Html & CSS ...

目標

このサイトを模写できればJavaScriptの独学レベルのスキルは十分です。

あわせて読みたい

Step3:React を学習する

Reactはフロントエンドをより効率的に開発するためのフレームワークです。
難易度は上がりますが、市場価値も飛躍的に上がります。

学習手順

手順1:プロゲートの「React」コースを一周する(スキップ可)
Progate
Progate(プロゲート) | Learn to code, learn to be creative. Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

自信がある人は飛ばしてもOKです。
プロゲートで予習することで、ハードルが大きく下がります。

手順2:udemyの「【2024年最新】React(v18)完全入門ガイド|Hooks、Next14、Redux、TypeScript」を一周
Udemy
【2024年最新】React(v18)完全入門ガイド|Hooks、Next14、Redux、TypeScript HTML、CSS、JavaScriptの基礎を終えた方に最適!React入門の決定版!Reactについて知っておくべき基礎知識について体系的、かつ網羅的に学習して、最短でReactをマスターし...

これでReactの基本を習得できます。

独学がうまくいかない場合

対策1:独学に限界を感じたら、プログラミング教室に通うことも検討しましょう。
対策2:「Webコーダー」として転職活動をしてしまう(遠回りではありますが、、)

「JavaScript を学習する」まで学習できた方は、一度就職してしまうこともできます。
フロントエンドエンジニアではなくWebコーダーという点に注意しましょう。

収入は下がり、キャリアも遠回りとなってしまいますが、挫折してしまうよりは良いでしょう。

Step4:ポートフォリオを作成する

実務未経験の場合、実力を証明するアプトプットが必須です。
オリジナルアプリを作成し、転職先へ公開しましょう。

ポートフォリオの作成方法

Udemy
【Twitterクローン】React×Firebaseでツイッターアプリをハンズオン形式で自作してみよう! 「ReactとFirebaseを連携させてSNSアプリを自作してみたい!データベース管理もしてみたい!」そんなあなたに向けたReact中級者向けの動画です。いつも使っているツイッタ...

上記のようなアプリ作成のチュートリアル教材を利用しましょう。
そのまま企業に提出すると印象が悪いです。
オリジナルの機能やデザインは必ず追加実装しましょう。

ポートフォリオの作成がうまくいかない場合

ポートフォリオ作成につまづいたら、メンタリングサービスを使うのもありです。
実務経験豊富なエンジニアが、ピンポイントでアドバイスをくれます。

Step5:正社員エンジニアになる(月収25万)

正社員はスキルやキャリアを0から築くのに最適です。
「本当にエンジニアとしての実務経験が獲得できるのか?」ということにのみ注意しましょう。

あわせて読みたい
実務未経験者は正社員エンジニアを選ぶべき理由 【はじめに】 実務未経験からエンジニア転職を考える際に、色々な働き方を検討するかと思います。 時短で働けるアルバイト、自由時間で働けるフリーランスなど、その形...

転職の手順

手順1:面接対策
あわせて読みたい
実務未経験者必見!面接での頻出質問とその解答例Top10 【はじめに】 実務未経験者がエンジニアへの転職を成功させるには、面接対策は必須です。今回は頻出質問とその解答例をご紹介します。 また「未経験者」「微経験者」「...
手順2:実務未経験可のIT専門エージェントに複数登録

カウンセリングを通して、業界について勉強することができます。
履歴書や職務経歴書などの指摘もしてもらえるのでおすすめです。

実務未経験NGのエージェントもあるので注意しましょう。
検索ワードは「React フロントエンドエンジニア」です。

手順3:求人を探す
あわせて読みたい
実務未経験者必見!求人の見るべき場所Top5 【はじめに】 実務経験のないうちは、「求人のどこを見れば良いか?」がわからないものです。応募資格を満たしてる給料が高い求人になんとなくエントリーすると痛い目に...

転職がうまくいかない場合

転職活動を始めても、なかなか就職先が見つからないかもしれません。
その場合は、インターンかアルバイトでのスタートを検討しましょう。

半年程度現場経験を積めれば、そのまま正社員に昇格できる可能性が高いです。
実務経験が確実に詰める現場を選びましょう。

ITの実務経験が全く積めない会社に入社するのだけは避けましょう。

あわせて読みたい
アルバイトエンジニアのメリット、デメリットとその対策、向いている人について徹底解説! 【アルバイトエンジニアとは?】 アルバイトエンジニアとは雇用契約を結び、有期契約で働くエンジニアを指します。 【よく比較される雇用形態】フリーランスエンジニア...

転職に成功したらその現場で獲得すべきもの

・1年間の実務経験
・linterやformatterの使用経験
・gitを利用したチーム開発の経験
・バックエンドやデザインの知見
・モジュールバンドラーの知見

あわせて読みたい
フロントエンドエンジニアの年収はこれで決まる!評価されるスキルや経験について徹底解説! 【はじめに】 今回はフロントエンドエンジニアの市場価値の決まり方について解説します。この記事を読めば、どんなスキルや経験が評価されるのかがわかります。 キャリ...

    Step6:フリーランスエンジニアになる(月収50万)

    「1年間の実務経験」という大きな壁を超えると、市場価値は飛躍的に上がります。
    フリーランスは単価も高く、よりレベルの高い仕事を任せてもらえる可能性が高いです。

    あわせて読みたい
    フリーランスエンジニアのメリット、デメリットとその対策、向いている人について徹底解説! 【フリーランスエンジニアとは?】 フリーランスエンジニアとは業務委託契約を結び、有期契約で働くエンジニアを指します。 【よく比較される雇用形態】アルバイトエン...

    転職の手順

    フリーランスエンジニア専門のエージェントに登録しましょう。
    エージェントによって単価が20万円以上変わることも普通にあります。
    必ず複数登録し、正しい知識を身につけましょう。

    転職がうまくいかない場合

    なかなか月単価50万円の案件が見つからない場合があります。
    その場合は、今いる会社に残るのが良いです。

    エンジニアは3年までは自動的に市場価値が上がっていくので、時間をおいてチャレンジしましょう。
    また、その間に社内で市場価値向上につながりそうな仕事があれば、積極的に受けましょう。

    転職に成功したらその現場で獲得すべきもの

    ・2年間の実務経験
    ・TypeScriptの経験
    ・パフォーマンス改善の経験
    ・テスト経験
    ・3年間の実務経験
    ・要件定義の経験
    ・設計の経験
    ・技術選定の経験
    ・リーダー経験

      あわせて読みたい
      フロントエンドエンジニアの年収はこれで決まる!評価されるスキルや経験について徹底解説! 【はじめに】 今回はフロントエンドエンジニアの市場価値の決まり方について解説します。この記事を読めば、どんなスキルや経験が評価されるのかがわかります。 キャリ...

      Step7:単価を上げる(月収80万)

      実務経験が2年になれば、市場価値がさらに向上しています。
      単価交渉か現場移動によって単価が上がる可能性が高いです。

      方法

      方法1:単価アップの交渉をする

      1年間真面目に勤務していたなら、社内価値も向上しているはずです。
      ここで単価を上げてもらうように交渉することをお勧めします。

      エージェントに「次回の更新時〇〇万円に報酬アップを希望です」とお伝えしましょう。

      方法2:現場を移動する

      単価交渉に応じてもらえなかった場合は、現場移動を検討しましょう。
      スキルとのマッチ性が良かったり、予算に余裕のある会社であれば大幅な単価アップが見込めます。

      現場を移動する際は、2ヶ月前に申告し、余裕を持って案件を探しましょう。
      案件探しの期間が短いと、条件の悪い案件を掴んでしまう可能性が高いです。

      独学に限界を感じたら、プログラミング教室がお勧めです。
      未経験でも転職補償が付きます。
      エージェントは複数登録することをお勧めします。
      カウンセリングを通して、業界について勉強することができます。
      独学に限界を感じたら、プログラミング教室がお勧めです。未経験でも転職補償が付きます。
      エージェントは複数登録することをお勧めします。カウンセリングを通して、業界について勉強することができます。
      よかったらシェアしてね!
      • URLをコピーしました!
      目次