プログラミング

【完全無料ロードマップ】Reactエンジニアへの転職方法まとめ

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

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

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

僕もそうでした。

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

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

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

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

また、他の同じような記事の筆者と違い、僕は大学卒業後の数ヶ月間ニートをやってました。
そんな経歴に傷のある人間でもできた方法です。

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

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

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

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

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

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

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

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

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

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

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

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

(タイトルにReactエンジニアと書いてますが、バックエンドやその他エンジニアに転職する際にも使えるロードマップになってます。)

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

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

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

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

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

具体的にはこちらに詳しい学習の進め方などを書いてますので、合わせてどうぞ。

summary
プログラミング始めたい方必見、知識0から効率的に学ぶ方法プログラミング始めたいけど、何から始めれば良いかわからないな。こういった疑問に答えます。「役に立ちそうだからプログラミング学びたいけど、具体的に何をしたら良いかわからない」ということありますよね。僕もそうでした。この記事では知識0からプログラミングを学ぶ上で、多くの人がやっている正しい学習手順を紹介します。実際に僕も知識0からはこれに似た手順で学習しましたので、自分の経験談も踏まえた上で記事を書いてます。...

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

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

progate
https://prog-8.com/
やはり最初は、みんな大好きProgateがオススメです。

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

具体的には

  • HTML
  • CSS
  • JavaScript

をやりましょう。

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

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

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

dotinstall
https://dotinstall.com/
次のこちらも言わずと知れた優良教材です。

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

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

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

Step1チェック項目

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

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

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

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

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

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

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

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

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

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

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

book
プログラミング独学初心者が最初に読むべきオススメWeb関連本3選Webエンジニアになりたいから、Webや基礎知識について学びたい。何かオススメ本があれば教えて欲しい。こういった要望に答えます。 初心者の内は「勉強したいけど、どの教材を使って勉強すれば良いかわからない」ということありますよね。僕もそうでした。Webエンジニアを目指す上では、プログラミングの勉強だけではなく、Webやコンピュータサイエンスの基礎を学ぶのがとても大事です。基礎ができてないのに、優秀なエンジニアになれる訳がありません。なので、これから紹介する書籍を読んで優秀なエンジニアになるための土台を作りましょう。この記事を読み終わる頃には、基礎をができたエンジニアになれているかと思います。...

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

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

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

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

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

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


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

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

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

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


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

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

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

Step2チェック項目

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

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

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

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

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

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

それは、

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

です。

正直、今の世の中スクールに通わずとも良い教材はたくさんあります。
なので、大金を払ってスクールに通わなくても、Webエンジニアへの転職は可能です。

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

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

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

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

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

独学

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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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


モダンJavaSciptの基礎から始める挫折しないためのReact入門

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

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

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

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

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

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


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

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

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

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

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

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

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


米国AI開発者がやさしく教えるGit入門講座

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

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

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

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

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

スクール

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

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

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

studying-programing
【最新】ReactエンジニアになれるおすすめプログラミングスクールReactエンジニアになりたいけど独学とか不安。良いプログラミングスクールがあったら通いたい。こういった要望に答えます。この記事ではReactエンジニアになるためのオススメスクールを2つ紹介します。また、そもそも高いお金を払ってスクールに通う必要があるのかということも解説します。この記事を読んでどのスクールに通うか決めてください!...

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

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

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

code_village

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

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

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

です。

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

挫折させない本気のプログラミングスクールの新規無料カウンセリング参加

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

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

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

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

です。

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

tech boost無料相談はこちら

Step3 チェック項目

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

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

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

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 転職の活動をしよう

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

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

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

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

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

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

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

オススメ転職サイト1 マイナビITエージェント

mynavi

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

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

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

IT業界の転職ならマイナビ IT AGENT<ご登録無料>

オススメ転職サイト2 レバテックキャリア

rebatech

次はレバテックになります。

やはり、エンジニアの職業を探すには案件数と質的にうってつけかと思います。

僕はプログラマーの経験が1年ある時に使ったので、かなり色々な求人を紹介していただけましたが、未経験の方にどこまでの求人が用意されているかは正直わからないです。

ただ、希望や考え方などもきちんとヒアリングしていただけましたし、書類の添削も丁寧にやってくださったのでとりあえず使ってみるのが良いかと思います。

Webエンジニアの転職なら【レバテックキャリア】

オススメ転職サイト3 Wontedly

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

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

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

wantedlyはこちら

Step5 チェック項目

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

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

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

【完全無料ロードマップ】Reactエンジニアへの転職方法まとめ まとめ

goal

まとめます。

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

といった感じです。

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

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

番外編

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

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

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

おわり

ABOUT ME
hinoshin
【執筆者】 【正しい努力をすれば誰でも成果は出せる】 をモットーに発信 元ニートの現フリーランスエンジニアです。 科学と実体験を元にした効率的で正しいスキルアップの方法を発信してます。