LINEで無料質問回答
LINEに登録してくれた方の質問に無料で回答します。
「スキルアップ」に関する悩みのある人は登録必須! line
プログラミング

【完全無料ロードマップ】Reactエンジニアへなるための方法まとめ【現役Reactエンジニアが解説】

Reactロードマップ
Reactに興味がある。未経験からReactエンジニアになるまでのロードマップを知りたいな。

こういった要望に答えます。

「エンジニアになりたいけど、具体的に何をしたら良いかわからない、、」
という悩みはありませんか?

僕もそうでした。

しかし、そんなやる気はあるけど方法がわからないという人は、単に正しい道筋を学べば良いだけなのです。

そして、そのロードマップをこのブログで無料で全て公開します。

このロードマップは、実際に未経験からReactエンジニアになった僕の経験を元に書いてます。

なので、ある程度の信頼性はあるのかなと。

また、他の同じような記事の筆者と違い、僕は大学卒業後の数ヶ月間ニートをやってました。

そんな経歴に傷のある人間でもできた方法です。

なので、皆さんはもっと簡単に転職できるようになるかと。

この記事を読み終わる頃には、具体的にどのような道筋を辿れば良いかが明確になっているかと思います。

後は、記事に書いてあることを実践するだけです。

ぜひこの記事を読んで実践してください。

本記事の内容
・どんな人がエンジニアになれるのか
・Reactエンジニアになるまでの道筋全て

先ほども話しましたが、この方法を僕が実際にReactエンジニアになり、その経験をさらにブラッシュアップしたものになります。

僕はエンジニアになる前は、パソコンの知識はほとんどありませんでした。

ですが、そんな僕でも実際にエンジニアになれました。

なので、この記事はかなり参考になるかと思います。

昨今エンジニアがもてはやされています。

実際に、フリーランスになれば年収1000万も夢では無いです。

もちろん、努力は必要ですが。

ぜひ、みなさんも夢のあるエンジニアという職業を目指してください。

おすすめプログラミングスクール

Reactを学べるおすすめプログラミングスクールは次の3つです。

「本気でReactエンジニアになりたい!」という方は、気になるものはクリックして無料相談に行きましょう。

本記事の著者
hinoshin
ひのしん
現役フリーランスエンジニア
  • 文系学部(体育学部)卒だけど、Webエンジニアに転職成功
  • プログラミングスクールに通った経験あり
  • 実務10ヶ月でフリーランスとして独立
  • 元々勉強が苦手で、大学の偏差値は50ほど
  • 血液型はO型、千葉県出身の神奈川県在住、8月生まれの現在26歳

Sttep1 基礎を学んで適性を見極めよう

Sttep1 基礎を学んで適性を見極めよう

まずは、プログラミングの基礎の基礎を学びましょう。

プログラミングにはある程度適正が必要だと思ってます。

好きな人は「パズルみたいで楽しい」という感覚を味わえると思いますし、嫌いな人は「生理的に受け付けない、、、」となるでしょう。

なので適性を知るために、まずは基礎の基礎を学びましょう。

では、説明していきます。

基礎の基礎を学ぶためのオススメサイト1 Progate

progate

やはり最初は、みんな大好きProgateがオススメです。

これに勝るプログラミングの入門教材は無いです。

具体的には、次のことを学びましょう。

  • HTML
  • CSS
  • JavaScript

をやりましょう。

ここは全て1周、わからなかったところだけ2周するようにしましょう。

それ以上は無意味なので、どんどん次へ進みましょう。

基礎の基礎を学ぶためのオススメサイト2 ドットインストール

dotinstall

次にやるべきなのは、ドットインストールです。

次のこちらも言わずと知れた優良教材です。

ここでは、JavaScriptの講座は全てやりましょう。

恐らく、これは1周では理解しきれないと思うので、まずは1周して2周目はあまり教材を見ずに自分だけで再現できるかを試すのが効果的です。

これも、3周はする必要ないかなと思います。

Step1チェック項目

Q.あなたは今までにやった学習を、楽しいまたは興味が湧くと思ましたか?

A.はい
あなたはプログラミングへの適性があるので、この先のロードマップも学習を進めて是非エンジニアになってください。

A.いいえ
あなたはプログラミングには向いてないかもしれません。
一旦冷静に自分を見つめ直してみてください。

Step2 書籍でWeb周りの知識を補強しよう

Step2 書籍でWeb周りの知識を補強しよう

プログラミングの基礎の基礎がわかったところで、次はWebの勉強をしましょう。

ここもしっかりと基礎固めましょう。

  • Webとは
  • インターネットとは
  • ネットワークとは
  • HTTPとは
  • せキィリティとは

などの知識が無いとエンジニアとしては全く使えない人材になってしまいます。

そしてこれを学ぶには、書籍などの情報がきちんとまとまっていて信頼性のあるものを選ぶのが一番良いです。

今回はその中でも特に初心者向けにおすすめの本を3冊ピックアップしました。

具体的にはこちらにも書いてますので、是非どうぞ。

プログラミング独学者必見|おすすめ学習本3選【エンジニアが厳選】 本記事では、こういった要望に答えます。 初心者の内は、 「勉強したいけど、どの教材を使って勉強すれば良いかわからない」 ...

では、説明していきます。

CSの基礎を学ぶためのオススメ書籍1 Web技術の基本

この本は、Webエンジニアとして必要な知識をバランス良く網羅しています。

しかも、見開き片方のページに解説、もう片方のページにイラストという構成になっているのでかなりわかりやすいです。

これからWebエンジニアを目指そうと思ってる人全員に読んでもらいたいレベルの良書です。

CSの基礎を学ぶためのオススメ書籍2 独学プログラマー


この本はProgateやドットインストールでは学べなかった、プログラミングのより深い知識を得ることができます。

しかも、エンジニアが使う様々な技術を扱っており、エンジニアとして働く上で必要なマインドセットやコツまでも解説してくれています。

かなり読みやすくページ数もそこまで多く無いので、初心者の方でも読み進めやすいような本かと思います。

CSの基礎を学ぶためのオススメ書籍3 キタミ式基本情報技術者


この本はボリュームはかなりありますが、イラストが豊富でとてもわかりやすいです。

しかも、ITとコンピュータサイエンスの基礎を網羅しているのでかなり良い本と言えます。

最悪他の2冊はやらなくても何とかなりますが、この本はマストとなりますので絶対使ってください。

Step2チェック項目

Q.あなたはコンピュータサイエンスの基礎を学んだと自信を持って言えますか?

A.はい
あなたには既にプログラミングの基礎の基礎が出来上がってます。さらに学習を進めてプロのレベルを目指しましょう。

A.いいえ
コンピュータサイエンスの知識が無くても仕事はできますが、どこかが必ずボロが生じます。
しっかり復習をしてから、次のステップへ進んでください。

Step3 独学かスクールか決めよう

では、基礎の基礎が出来上がったところで、より本格的にプログラミングを学んでいきましょう。

まず、プログラミングをさらに深く学習する上で、決めるべきことがあります。

それは、次の2つ。

  • スクールか?
  • 独学か?

正直、今の世の中スクールに通わずとも良い教材はたくさんあります。

なので、大金を払ってスクールに通わなくても、Webエンジニアへの転職は可能です。

しかし、良質なプログラミングスクールには大金を払うだけの価値もあります。

実際、僕もスクールに通ってプログラミングを学びました。

プログラミングスクールは良質な教材だけでなく、いつでも質問ができる環境や、転職を相談できる環境、また大金を払ったプレッシャや、仲間の存在などからモチベーションを保ちやすいです。

なので、大金を払ってでもエンジニアになりたいというくらい本気の方は、スクールに通うことを勧めます。

今回は、独学とスクールに通う場合とに分けて解説していきます。

独学

まず、プログラミング学習は、動画形式で学ぶのが一番良いです。

そして、その際に使えるサービスがUdemyです。

ここで、プログラミングの基礎を学びましょう。

詳しい事はこちらの記事に書いてますので、合わせてどうぞ。

おすすめのUdemy講座
React学習におすすめのUdemy講座6選|現役エンジニアが厳選Reactエンジニアになりたいけど、動画講座がわかりやすいからUdemyでオススメの講座があれば教えて欲しいな。こういった要望に答えます。「Udemyは動画形式で分かりやすいんだけど、お金は無駄にしたくない。どの講座が分かりやすくて当たりなのかわからない。」って思いますよね。僕も常に思ってます。なので、今回は僕が受講した中でReactエンジニアになる上で役に立ち、超絶分かりやすかった講座を5つ紹介します。...

以下、Udemyのオススメ教材です。

オススメUdemy講座1 JavaScriptをとことんやってみよう【超初心者から脱初心者へレベルアップ】【わかりやすさ重視】

  • 内容:JavaScript
  • おすすめ度:4
  • コース時間:9.5時間
  • 評価:4.3
コース詳細はこちら

やはり、Reactを学ぶ上でJavaScriptはきちんと理解しておく必要があります。

JSの基本ができていないのに、Reactに手を出してもどうせ理解できません。

僕もJSをろくに学習せずにReactの学習を始めましたが、結局理解できずJSの基礎学習から始めました。

あなたにも同じ失敗はして欲しくないので、絶対にJSの基礎からみっちり学んでください。

この講座を見てみる

オススメUdemy講座2 Webpackでウェブサイト制作のHTML/CSS/JSコーディングを一気に効率化する実践講座 (Mac / Win)

  • 内容:Webpack
  • おすすめ度:4
  • コース時間:8時間
  • 評価:4.5
コース詳細はこちら

僕も最初は、
「Webpackとはなんぞや?」
という状態でした。

けれど、この講座で完璧に理解することができました。

今やフロントエンドとして働くのなら必須の知識となっているので、絶対に学んでください。

これで、効率的にフロントエンドのコーディングをしていくには、何をしたら良いかがわかるようになれます。

この講座を見てみる

オススメUdemy講座3 モダンJavaSciptの基礎から始める挫折しないためのReact入門

  • 内容:React基礎
  • おすすめ度:5
  • コース時間:6時間
  • 評価:4.6
コース詳細はこちら

Reactの入門講座としてこれ以上の教材は無いです。

このように断言できるほど、この講座は最高です。

まず、今風のモダンなJSの書き方を学び、素のJSでTodoリストを作ります。
そして、次にReactの基礎を学び、ReactでTodoリストを作ります。

素のJSとReact、両方でTodoリストを書くことで、Reactの凄さを体験できるような講座の構成になってます。

マジでこれに勝るReactの入門講座は他にないので、この凄さを実感してください。

この講座を見てみる

オススメUdemy講座4 Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版

  • 内容:React発展
  • おすすめ度:5
  • コース時間:8時間
  • 評価:4.7
コース詳細はこちら

さっきのReact講座と、今回のこの講座をやれば現場で働けるレベルになれます。

作者も新人には、「とりあえず、これを見させてから実務に入ってもらってる」と言ってます。

それほど、よくできている講座だと僕も思います。

本当にこの2つの講座は、基礎を十分作れるような内容になってます。

React講座を色々見ておきましたが、本当に良く出来てる講座だと思いました。

この講座を見てみる

オススメUdemy講座5 米国AI開発者がやさしく教えるGit入門講座

  • 内容:git
  • おすすめ度:5
  • コース時間:10
  • 評価:4.8
コース詳細はこちら

最後は番外編のような感じになりますが、重要です。

なぜなら、Webエンジニアとして働くのであればGitの知識は必須になるからです。

WebエンジニアになるのであればGitは避けては通れない技術です。
なので、ここでしっかり身につけておきましょう。

そして、Gitを学ぶ上でこの講座がダントツでオススメです。

僕は、Udemyで30前後の講座を受けてきましたが、この方の講座が一番圧倒的に分かりやすかったです。

この講座を見てみる

スクール

プログラミングスクールに通う際は、どこに通うべきかをしっかりと吟味する必要があります。

今は詐欺まがいなサービスも増えているので、大金を無駄にしてしまう可能性があるからです。

もし、あなたがReactエンジニアまたはフロントエンドエンジニアを目指しているのであれば、僕のこの記事を参考にしてください。

reactを学べるプログラミングスクール
【最新】Reactを学べるおすすめプログラミングスクール3選Reactを学びたいですか?プログラミング学習で最も効率的なのはプログラミングスクールに通うことです。なので今回は、おすすめのプログラミングスクールを厳選しました。これでスクール選びで失敗することは無いです。Reactは需要が高いスキルなので、今すぐ学びましょう。...

ここで紹介している2つのスクールはどちらも自信を持ってオススメできます。

また、それ以外のスクールを選ぶ時もネットしっかりと情報収集してから選ぶようにしましょう。

おすすめ1位:Rsaise Tech

raisetech

RaiseTechは、基礎から応用まで徹底的に学べるスクールになります。

具体的には、「プログラミング言語」だけでなく、それ以外の現場に必要な知識もまとめて学べるので、かなりコスパが良いです。

学べる内容は次の通りです。

  • React/JavaScriptの基礎
  • フロントエンド周りの開発環境
  • TypeScirpt+Nexttjs
  • フロントエンドのテスト

正直、未経験者でNext.jsやフロントエンドのテストができる人はほぼいないです。

そのくらい高いレベルのことを学べるので、転職時に圧倒的に有利になります。

また、受講後も半永久的に質問ができるので、初心者の内はかなりありがたいかと思います。

そして、極め付けは2週間の返金保証がついていることです。

返金保証がついているので、後悔することはまずないです。

「さらに具体的にこのスクールについて知りたい!」
という人はこの記事で、詳細に解説しているのでぜひ参考にどうぞ。

raisetech
【2022年】Raise Tech(レイズテック)口コミ・評判【AWS/Java/React】プログラミングスクール選びって、かなり大変ですよね?特に今は、かなり数多くのスクールがあるので、どこにしようかとても迷うかと思います。なので、今回はその経験などを元に、特に一押しのRaise Tech(レイズテック)を紹介しようと思います。...

めちゃくちゃおすすめなので、ぜひこちらをクリックして無料相談へどうぞ。

RaiseTechへ無料相談

おすすめ2位:Code Village

code_village

Code VillageはJavaScriptに特化したプログラミングスクールとなっています。
なので、JavaScriptのライブラリであるReactを学ぶにはとても良い環境かと思います。

このスクールの良い点は主に3つあります。

  1. クラス形式の授業となっていること
  2. カリキュラムで何を学べるかが明確なこと
  3. 現役のIT企業のCTOがカリキュラム、教材、授業の監修を行なっていること

クラスのみんなで切磋琢磨してる人には向いてるスクールかと

さらに詳しくこのスクールについて知りたい方は、こちらも記事も参考にどうぞ。

codevillageを徹底解説
【評判悪すぎ?】CodeVillage(コードビレッジ)の評判を徹底解説【コスパ最高】プログラミングスクール選びって、かなり大変ですよね?特に最近はスクールがかなり増えているので、めちゃくちゃ迷うかと思います。なのでこの記事では、Code Village(コードビレッジ)の料金・カリキュラム・口コミ・転職先などを徹底的に解説していきます。...

Code Villageへ無料相談

おすすめ3位:tech boost

tech_boost
tech boostも個人的に結構オススメだなと思いました。

理由はこちらも3つあります。

  1. メンターが100%現役エンジニアであること
  2. オリジナリアプリの指導があること
  3. 学習スタイルや受講期間等を選ぶことができる

とにかく質の高いサービスを受けたいと言う人にはピッタリのスクールかと。

さらに詳しくこのスクールについて知りたい方は、この記事も参考にどうぞ。

tech_boost
【評判悪すぎ?】tech boost(テックブースト)の料金・カリキュラム・転職先プログラミングスクール選びって、かなり大変ですよね?僕もめちゃくちゃ迷いました。 なので今回は現役エンジニアの僕が、tech boost(テックブースト)を紹介します。tech boost(テックブースト)の料金・カリキュラム・口コミ・転職先などを徹底的に解説しているので、かなり参考になるはずです。...

tech boostへ無料相談

Step3 チェック項目

Q.このStepでやった講座の6割程度は理解できましたか?

A.はい
あなたには既にプログラミングの基礎が出来上がってます。次のステップに移ってポートフォリオ作りを始めましょう。

A.いいえ
ちょっとこの状態で次のStepに進むと挫折してしまうかもしれません。
しっかり復習をしてから、次のステップへ進んでください。

Step4 ポートフォリオを作ろう

Step4 ポートフォリオを作ろう
基礎の知識は身についたと思うので、ここからは転職活動で使うポートフォリオを作って行きましょう。

「まだエンジニアとして働くには知識が足りないのでは?」

と思うかもしれませんが、さっさとエンジニアになってわからない所は仕事で学んでいく方が早いです。

実務と独学の学習効率には雲泥の差があるので。

と言う事でポートフォリオを作っていきますが、何に作るべきか迷う人はかなりいると思います。

また、作ってる時にわからないことが出て、どうしたら良いかわからなくなる事もあるかと思います。

なので、ポートフォリオ作成をする上で役立つサービスと使い方を解説して行きます。

ポートフォリオを決める上で、考え方は3つあります。

  1. 既存のサービスをアレンジして作る
  2. 自分の欲しいサービスを作る
  3. 誰かから言われたサービスを作る

この考え方を元に作品を作っていきましょう。

正直、何を作るかはあまり重要では無いです。

ポートフォリオは自分である程度のサービスを作れると言うことを証明するためだけの物なので。

ここで、あまり迷い過ぎないようにしましょう。

また、ポートフォリオ作りでつまずいた時などに使えるサービスを紹介します。

ポートフォリオ作りに役立つサイト1 Menta

menta
https://menta.work/
どこかわからないことやプロに相談したいと思った時はやはりこのサービスが一番良いです。

現役のエンジニアなどが丁寧に対応してくれます。

そもそもこちらはプログラミング初心者のために作られたサービスなので、使わない手は無いです。

金額もそこまで高いものは無いので気軽に使えるかなーと。

ポートフォリオ作りに役立つサイト2 Stack Overflow

stackoverflow
https://ja.stackoverflow.com/
何かわからないことがあったら、こちらで質問すると良いです。

エンジニアの方が無料で答えてくれます。

ただ、質問の仕方は気をつけましょう。

そうしないと相手も困りますし、意図していない回答が来るかもしれません。

このサービスはエンジニアに必須の能力である質問力を鍛えることもできるので、かなり良いです。
しっかり質問できない状態だと、エンジニアになってから苦労しますので。

ポートフォリオ作りに役立つサイト3 グーグル検索

google
https://www.google.com/
やはり、わからないことがあったらきちんとググって解決する力は養っておきたいです。

  1. まずわからないことはググったりして調べる
  2. それでもわからない時はStack Overflowで質問する
  3. Googleに乗ってないことや個人的な相談などはMentaを使う

って感じの使い分け方が理想かなと思います。

Step4 チェック項目

Q.あなたの技術力を証明するためのポートフォリは完成しましたか?

A.はい
あなたには既に転職の準備が整いました。あとは転職活動をしっかりと行えばエンジニアになれます。
あと、もう一息頑張りましょう。

A.いいえ
ポートフォリオが完成してない状態で転職活動を行っても十中八九上手くいきません。
しっかり作りきってから、転職活動に挑んでください。

Step5 転職活動をしよう

Step5 転職活動をしよう
さて、プログラミングの基礎を身につけ、転職に必要なポートフォリオという武器も完成しました。

後は、実際に転職活動するだけです。

ここでは僕が転職する際に使って良いと思った転職サービスを3つ紹介します。

詳しい事はこちらの記事に書いてますので、ぜひどうぞ。

agent
【最新】Reactエンジニアを目指すならオススメな転職サイト3選こういった疑問に答えます。転職サイトってめちゃくちゃあり過ぎて、どれを使用するか迷いますよね?僕も最初転職した時はめちゃくちゃ迷いました。なので、僕が実際にエンジニアになった経験も合わせて、フロントエンドエンジニアを目指す上でどの転職サイトを使うべきかをまとめました。他の、ただ転職サイトを列挙している記事とは違い、僕が実際に使った体験談もお話するのでかなり参考になるかと。ぜひ、この記事を読んで転職サイトを選ぶ際に役立ててください。...

では、説明していきます。

オススメ1位:マイナビ IT AGENT

mynavi

まずおすすめなのが、マイナビ IT AGENTです。

やはり、エージェントが着くのが強いです。

わからないことなどはなんでも相談できますし、書類の添削などもしてくれるので使わない手は無いです。
自分の希望を伝えればそれに対応した求人を紹介してくれます。

また、面接毎にフィードバックやアドバイスなどももらえるのでそこもかなり良いです。

このサービスについてはこの記事で詳しく説明しているので、こちらも参考にどうぞ。

マイナビITエージェントの評判は悪い?口コミや特徴を徹底解説 この記事では、こういった疑問に答えます。 プログラマーへの転職って、どのサイトを使うか迷いますよね? 僕もどのサイト...

マイナビ IT AGENTへ無料登録

オススメ2位:ウズキャリIT

ウズキャリIT
次に、おすすめなのがウズキャリITです。

ウズキャリITのメリットは主に3つあり、それは次の通りです。

  • ITに特化して2000人以上の就職を支援
  • 技術的な学習もサポート
  • 厳しい自社基準で、ブラック企業を徹底排除

つまり、徹底した学習サポートと転職サポートで、未経験からエンジニアに導いてくれる転職エージェントになります。

ここまで未経験からのIT転職に特化したエージェントはないので、かなりおすすめです。

このサービスについては、この記事で詳しく説明ているのでこちらも合わせてどうぞ。

ウズキャリIT
ウズキャリIT評判は最悪?メリット・デメリットをエンジニアが解説転職エージェント選びって、かなり大変ですよね?僕も未経験からWebエンジニアに転職した経験時は、どこにしようかとても迷いました。なので、今回はその経験などを元に、現役エンジニアの僕がおすすめするウズキャリITについて紹介しようと思います。...

ウズキャリITへ無料登録

オススメ3位:Wontedly

wantedly

最後におすすめなのが、wantedlyです。

こちらエージェントはついてませんが、やはり外せないサービスですね。

未経験向けの求人数はここが一番多いかと思います。

他の2つと併用しつつ使うのがベストかと。

wantedlyへ無料登録

Step5 チェック項目

Q.エンジニアへの内定はもらえましたか?

A.はい
おめでどうこざいます。さらに技術力などを伸ばして収入を上げていきましょう。

A.いいえ
諦めずに転職活動を続ければいつかは内定がもらえます。
諦めずにもう一踏ん張りです。

【完全無料ロードマップ】Reactエンジニアへなるための勉強方法

まとめます。

  1. Progateとドットインストールで適正を見ながら基礎の基礎を学習
  2. 適性ありの場合は書籍でコンピュータサイエンスの学習
  3. スクールか独学か決め、それに合わせた学習をする
  4. 学習した内容でポートフォリオを作る
  5. 作った作品を武器に転職活動に挑む

といった感じです。

これらを実践することで、ほぼ確実にReactエンジニアになれるかと思います。
逆にこの通りに学習しないと、無駄な遠回りをしてしまう可能性があります。

しっかりと先人の知識を活かしましょう。
あなたがReactエンジニアになれることを願ってます。

↓気になるスクールは無料相談へ行こう

1位:RaiseTech
2位:Code Village
3位:tech boost

番外編

転職に成功し、1年ほど実務経験を積んだ方はこの記事を参考にどうぞ。

フリーランスになれば年収が数倍になるはずです。

1年でフリーランスになれるか
実務1年でフリーランスエンジニアになることは可能か?【単価も暴露】プログラマーになって数ヶ月、給料を上げるためにそろそろ独立したい。けど、単価がどのくらい貰えるか分からないし、そもそも経験が浅くても案件が見つかるのかも分からない。こういった疑問に答えます。 「フリーランスになりたいけど、どのくらいの経験を積んだら独立するか迷う、、」という悩みはありませんか?僕もそうでした。...

おわり

ABOUT ME
ひのしん
【執筆者情報】ひのしんです。「正しい努力をすれば誰でも成果は出せる」 をモットーに発信しています。元ニートのフリーランスエンジニア。 年収240万→840万,TOEIC425→885。0スキルアップに関する知識を発信してます。フォローするだけで年収がUPします。成功したいけど何をしたら良いか分からない人は必読です。
\\こちらの記事が大好評です//
LINEで無料質問回答
LINEに登録してくれた方の質問に無料で回答します。
「スキルアップ」に関する悩みのある人は登録必須! line