【初心者・独学向け】React+TypeScriptをマスターする学習ロードマップ

僕がフロントエンドエンジニアとして、React + TypeScriptで開発して、3年ぐらい経過しました。

ノウハウがたまってきたので、React + TypeScriptの勉強方法をまとめようと思います。

すでにReact+TypeScriptでポートフォリオを作ってる方へ

基礎学習とポートフォリオ制作が終わっていれば、チーム開発に飛び込んで仕事から色々学ぶフェイズです!

といってもいきなり案件は難しいと思うので、未経験でもチーム開発が経験できるサービスを使いましょう。

関連記事

・未経験向けのチーム開発を経験して、脱未経験になってから転職orフリーランス独立を目指そう・未経験でもお金をかけずにチーム開発が経験出来るサービス紹介こんにちは、フロントエンドエンジニアのてりーです。僕の詳しいプロフィールはこち[…]

React + TypeScript学習のロードマップ

僕はReact + TypeScriptを独学で3ヶ月勉強して、案件を受け始めました。

その後はフラーランス→正社員→副業開始とReact + TypeScriptを使って渡り歩いています。

読んで欲しい人

フロントエンドエンジニアになりたい / React + TypeScriptをマスターしたい人

当記事の通りの手順で勉強すれば、React + TypeScriptでフロントエンドエンジニアとして、仕事が出来るぐらいの力がつきます!

独学がベースになるので、つらい事もあると思いますが、頑張って乗り越えていきましょう!

それでは、見ていきましょう。

【1】Reactの基礎を学ぶ

まずは第一歩としてReactの基礎を学びます!

次の手順でTypeScriptの基礎を学びますが、この2つの順番はどっちが先でも大丈夫です!

1-1 ProgateでReactに触れてみる

Progate – Reactコース

Progate

Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。…

Web界隈でとても有名なProgateを使います。
Progateはプログラミングを図を使って分かりやすく解説してくれて、それを見た後で、実際にコードを書く小テストをして身に付けるというWebサービスです。

日本語でプログラミングを勉強できるサービスの中ではダントツで分かりやすく学びやすいです!

学習のコツ

ProgateのReactコースは全部で4~5時間なので、早ければ1日で終わります!

Progate本当に分からない場合は、ヒントも出ますし、答えも教えてくれます。

なので、テストで躓いても、諦めずに何度もトライして必ず全部クリアしてください!

プログラミングの独学はエラーとの戦いです!

だからこそ、Progateを投げ出さずに自力でクリアしたらとても大きな自信になります!

1-2 (動画)Reactの全体像を一度頭にいれる

udemyという動画教材のプラットフォームで、Reactを日本語で分かりやすく解説している教材があるので、それで基礎的な概念を学びましょう!

React(v18)完全入門ガイド
icon

動画を見ながら、コードを書く環境がない場合は書籍学習がオススメ

動画教材は基本的に、動画を視聴しながら講師の画面を真似て自分もコードを書く写経スタイルが基本です。

ですので、外部モニターやipadなど手元のMac以外に、動画教材を見れるディスプレイがあるのが望ましいです。

ない場合は、次に紹介する書籍の方が学習しやすいなかーと個人的には思います。

学習のコツ

Progateとは対照的に、この動画教材は気軽な気持ちで視聴してOKです!
全部で25時間と長いので、倍速にしても良いので、1週視聴しましょう。

ここで重要なのは、完全に内容を理解することではなく、「こんなこと言ってたなー」となんとなく記憶しておく事です。

そうする事で、この後の学習や仕事の中で気になった時に、この動画に戻ってきて理解を深める事が出来ます。

1 – 2 (書籍) Reactの全体像を一度頭にいれる

書籍だとこちらが入門者向けに書かれていて、分かりやすくオススメです!

React.js&Next.js超入門 第2版

書籍も完全に理解しきらなくて良いので、1周勢い良く読み切りましょう!!

学習のコツ

ゆるく読んでOKですが、後半の手を動かして簡単なアプリケーションを作るパートは、完成を目指しましょう。

最初の注意書きの所に、本で解説しているコードの答えは全てダウンロードできます!

自分でコードを書いて上手くいかなかった時も焦らずに、答えのコードを見て修正して、アプリケーションが動けばOKです。

ちゃんと動くものを作り切ることが重要だと伝えている理由は、この作ったもの(ポートフォリオ)は職務経歴書に書くことで、最初に仕事を獲得するときにとても役立つからです。

【2】TypeScriptの基礎を学ぶ

次はTypeScriptの基礎を学んでいきます。
先ほども書きましたが、【1】Reactの基礎を学ぶ【2】TypeScriptの基礎を学ぶ はどちらを先にやっても大丈夫です。

1 – 1 JavaScriptを学ぶ

JavaScriptの基礎は書籍で学びます!

改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

TypeScriptはJavaScriptの上位互換でして、まずはJavaScriptを理解する必要があります。

イメージ図
JavaScript + 型付け機能 = TypeScriptです

学習のコツ

この書籍はJavaScriptという言語の基礎から応用まで網羅した完全版です!

実際に僕の知り合いが、サーバーサイドからフロントエンドの部署が変わった際に、「とりあえずこれ読めば、JavaScriptは大丈夫だよ」と、この書籍を渡されたと言います。

なので、全てを1回で理解しようとせず、繰り返し時間をかけて自分のモノにして下さい。

2- 2 TypeScriptを学ぶ

こちらもudemyの動画教材を使います。
これさえやればTypeScriptについては完全に理解できます。

【世界で7万人が受講】Understanding TypeScript 日本語版
icon 

学習のコツ

こちらのコースは全体で15.5時間です。
Reactの動画教材と同様にこちらも倍速でも良いので、1周視聴しましょう!

TypeScriptや型について、ざっくり理解できればOKです!

もし【1】、【2】で学習に行き詰まったら

動画教材や書籍での学習は飽きやすく、途中で行き詰まる事があるかと思います。

その際は迷わず【3】React + TypeScriptの実践 に進んじゃいましょう!

「動くもの作っている時が楽しくて、ただの勉強は飽きやすい!」はプログラミングあるあるです。

未経験から独学はただでさえしんどいので、楽しく続けられることが第一です!

動くものを作った後で、書籍や動画教材に戻れば良いんです!
その際は前よりも理解出来ることが増えて、退屈しなくなったりします。

・動画教材や書籍に飽きたら、【3】の動くもの作りに進んで良し!
・プログラミングの勉強を続ける事が最重要!!!

【3】React + TypeScriptの実践

TypeScript + Reactの基礎的な事を学んだら、次は手を動かして動くものを作っていきましょう!!

これは手を動かす事で理解を深めるのと同時に、作ったものをポートフォリオとして転職時に活用出来ます。

未経験から仕事を得る場合は、職歴がないので、「こんなものを作りました!」といかにアピール出来るかが鍵になります!

その点を考慮して、この教材がオススメです!(僕が作った教材です。)

Zenn

React+TypeScriptを使ったNetflixの映画一覧を表示するアプリケーションのチュートリアルです。学べ…

Netflixの映画一覧を取得し、カテゴリー毎に表示しています。
image.png

映画をクリックすると、Youtubeのプロモーション映像が流れます。

Image from Gyazo

学習のコツ

こちらの教材は半日程度で完成できるボリュームです。

今まで学んできたReactとTypeScriptの復習をしながら、実際にコードをバリバリ書いていきます!

チュートリアルに沿って進める事で、アプリケーション設計やコードを書く前の考え方など、実際の開発の流れを理解出来ます。

さらに、作った後に、機能やデザインを追加する事で、独自のポートフォリオとして転職時に活用できます。

番外編:React + TypeScriptを極める

「りあくと」という書籍でReactとTypeScriptの周辺知識まで含めて、広く学ぶ事をお勧めします。

💡 3.1版から 4版への変更点については以下の記事をご参照ください https://klemiwary.com/blo…

この書籍はvol3まであって、ボリューミーですが、物語形式で書かれている為、とても読みやすいです。

そしてなんと言ってもReact + TypeScriptの言語にまつわる歴史や最新事情までを整理して理解出来るめちゃくちゃ優秀な本です!

React + TypeScriptを使うエンジニアなら必読なんですが、内容のレベル的にエンジニアとして働き始めてからでも良いかなーと思い、番外編にいれました。

まとめ

最後までご覧になりありがとうございます。
この記事は僕自身が考える、React + TypeScriptを未経験からマスターするための方法です。

必ずしも正しいとは限りませんが、皆さんの参考になれば幸いです。

次のステップ

React + TypeScriptの基礎学習が終わって、ポートフォリオを作ったらいよいよチーム開発です!

いきなり案件は難しいと思うので、未経験でもチーム開発が経験できるサービスを使って、実戦の中でしか学べないスキルを磨いていきましょう!

関連記事

・未経験向けのチーム開発を経験して、脱未経験になってから転職orフリーランス独立を目指そう・未経験でもお金をかけずにチーム開発が経験出来るサービス紹介こんにちは、フロントエンドエンジニアのてりーです。僕の詳しいプロフィールはこち[…]

またこちらの記事ではおすすめの転職エージェントや転職先を解説しています。

関連記事

こんにちは、フロントエンドエンジニアのてりーです。僕の詳しいプロフィールはこちら・未経験からのエンジニア転職の心構え・未経験のITエンジニア転職におすすめの転職エージェント・転職先では、どうぞ!すぐに登録したい方へ・[…]