こんにちは、フロントエンドエンジニアのてりーです。
僕がフロントエンドエンジニアとして、React + TypeScriptで開発して、3年ぐらい経過しました。
ノウハウがたまってきたので、React + TypeScriptの勉強方法をまとめようと思います。
すでにReact+TypeScriptでポートフォリオを作ってる方へ
基礎学習とポートフォリオ制作が終わっていれば、チーム開発に飛び込んで仕事から色々学ぶフェイズです！
未経験でもチーム開発が経験できるサービスを使いましょう。
・未経験向けのチーム開発を経験して、脱未経験になってから転職orフリーランス独立を目指そう ・未経験でもお金をかけずにチーム開発が経験出来るサービス紹介 こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこち[…]
- 1 【初心者・独学向け】React + TypeScript学習のロードマップ
- 2 【React・TypeScript学習ロードマップ①】Reactの基礎を学ぶ
- 3 【React・TypeScript学習ロードマップ②】TypeScriptの基礎を学ぶ
- 4 【React・TypeScript学習ロードマップ】もし【1】、【2】で学習に行き詰まったら
- 5 【React・TypeScript学習ロードマップ③】React + TypeScriptの実践
- 6 【React・TypeScript学習ロードマップ番外編】React + TypeScriptを極める
- 7 【React・TypeScript学習ロードマップ】まとめ
【初心者・独学向け】React + TypeScript学習のロードマップ
僕はReact + TypeScriptを独学で3ヶ月勉強して、案件を受け始めました。
その後はフラーランス→正社員→副業開始とReact + TypeScriptを使って渡り歩いています。
読んで欲しい人
当記事の通りの手順で勉強すれば、React + TypeScriptでフロントエンドエンジニアとして、仕事が出来るぐらいの力がつきます！
独学がベースになるので、つらい事もあると思いますが、頑張って乗り越えていきましょう！
それでは、見ていきましょう。
【React・TypeScript学習ロードマップ①】Reactの基礎を学ぶ
まずは第一歩としてReactの基礎を学びます！
次の手順でTypeScriptの基礎を学びますが、この2つの順番はどっちが先でも大丈夫です！
1-1 ProgateでReactに触れてみる
Progate – Reactコース
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。…
Web界隈でとても有名なProgateを使います。
Progateはプログラミングを図を使って分かりやすく解説してくれて、それを見た後で、実際にコードを書く小テストをして身に付けるというWebサービスです。
日本語でプログラミングを勉強できるサービスの中ではダントツで分かりやすく学びやすいです！
学習のコツ
ProgateのReactコースは全部で4~5時間なので、早ければ1日で終わります！
Progate本当に分からない場合は、ヒントも出ますし、答えも教えてくれます。
なので、小テストで躓いても、諦めずに何度もトライして必ず全部クリアしてください！
プログラミングの独学はエラーとの戦いです！
だからこそ、Progateを投げ出さずに自力でクリアしたらとても大きな自信になります！
1-2 (動画)Reactの全体像を一度頭にいれる
udemyという動画教材のプラットフォームで、Reactを日本語で分かりやすく解説している教材があるので、それで基礎的な概念を学びましょう！
【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門
学習のコツ
Progateとは対照的に、この動画教材は気軽な気持ちで視聴してOKです！
全部で7時間でとてもコンパクトで分かりやすく解説されています！！
ここで重要なのは、完全に内容を理解することではなく、「こんなこと言ってたなー」となんとなく記憶しておく事です。
そうする事で、この後の学習や仕事の中で気になった時に、この動画に戻ってきて理解を深める事が出来ます。
1 – 2 (書籍) Reactの全体像を一度頭にいれる
書籍だとこちらが入門者向けに書かれていて、分かりやすくオススメです！
書籍も完全に理解しきらなくて良いので、1周勢い良く読み切りましょう！！
動画を見ながら、コードを書く環境がない場合は書籍学習がオススメ
動画教材は基本的に、動画を視聴しながら講師の画面を真似て自分もコードを書く写経スタイルが基本です。
ですので、外部モニターやipadなど手元のMac以外に、動画教材を見れるディスプレイがあるのが望ましいです。
ない場合は、次に紹介する書籍の方が学習しやすいなかーと個人的には思います。
学習のコツ
ゆるく読んでOKですが、後半の手を動かして簡単なアプリケーションを作るパートは、完成を目指しましょう。
最初の注意書きの所に、本で解説しているコードの答えは全てダウンロードできます！
自分でコードを書いて上手くいかなかった時も焦らずに、答えのコードを見て修正して、アプリケーションが動けばOKです。
ちゃんと動くものを作り切ることが重要だと伝えている理由は、この作ったもの(ポートフォリオ)は職務経歴書に書くことで、最初に仕事を獲得するときにとても役立つからです。
【React・TypeScript学習ロードマップ②】TypeScriptの基礎を学ぶ
次はTypeScriptの基礎を学んでいきます。
先ほども書きましたが、【1】Reactの基礎を学ぶ と【2】TypeScriptの基礎を学ぶ はどちらを先にやっても大丈夫です。
1 – 1 JavaScriptを学ぶ
JavaScriptの基礎は書籍で学びます！
TypeScriptはJavaScriptの上位互換でして、まずはJavaScriptを理解する必要があります。
イメージ図
JavaScript + 型付け機能 = TypeScriptです
学習のコツ
この書籍はJavaScriptという言語の基礎から応用まで網羅した完全版です！
実際に僕の知り合いが、サーバーサイドからフロントエンドの部署が変わった際に、「とりあえずこれ読めば、JavaScriptは大丈夫だよ」と、この書籍を渡されたと言います。
なので、全てを1回で理解しようとせず、繰り返し時間をかけて自分のモノにして下さい。
2- 2 TypeScriptを学ぶ
こちらもudemyの動画教材を使います。
これさえやればTypeScriptについては完全に理解できます。
【世界で7万人が受講】Understanding TypeScript 日本語版
学習のコツ
こちらのコースは全体で15.5時間です。
Reactの動画教材と同様にこちらも倍速でも良いので、1周視聴しましょう！
TypeScriptや型について、ざっくり理解できればOKです！
【React・TypeScript学習ロードマップ】もし【1】、【2】で学習に行き詰まったら
動画教材や書籍での学習は飽きやすく、途中で行き詰まる事があるかと思います。
その際は迷わず【3】React + TypeScriptの実践 に進んじゃいましょう！
「動くもの作っている時が楽しくて、ただの勉強は飽きやすい！」はプログラミングあるあるです。
未経験から独学はただでさえしんどいので、楽しく続けられることが第一です！
動くものを作った後で、書籍や動画教材に戻れば良いんです！
その際は前よりも理解出来ることが増えて、退屈しなくなったりします。
【React・TypeScript学習ロードマップ③】React + TypeScriptの実践
TypeScript + Reactの基礎的な事を学んだら、次は手を動かして動くものを作っていきましょう！！
これは手を動かす事で理解を深めるのと同時に、作ったものをポートフォリオとして転職時に活用出来ます。
未経験から仕事を得る場合は、職歴がないので、「こんなものを作りました！」といかにアピール出来るかが鍵になります！
その点を考慮して、この教材がオススメです！(僕が作った教材です。)
こんにちは、フロントエンドエンジニアのてりーです。 記事を手に取って頂きありがとうございます。 このチュートリアルでは…
Netflixの映画一覧を取得し、カテゴリー毎に表示しています。
映画をクリックすると、Youtubeのプロモーション映像が流れます。
学習のコツ
こちらの教材は半日程度で完成できるボリュームです。
今まで学んできたReactとTypeScriptの復習をしながら、実際にコードをバリバリ書いていきます！
チュートリアルに沿って進める事で、アプリケーション設計やコードを書く前の考え方など、実際の開発の流れを理解出来ます。
さらに、作った後に、機能やデザインを追加する事で、独自のポートフォリオとして転職時に活用できます。
【React・TypeScript学習ロードマップ番外編】React + TypeScriptを極める
りあくと
「りあくと」という書籍でReactとTypeScriptの周辺知識まで含めて、広く学ぶ事をお勧めします。
💡 3.1版から 4版への変更点については以下の記事をご参照ください https://klemiwary.com/blo…
この書籍はvol3まであって、ボリューミーですが、物語形式で書かれている為、とても読みやすいです。
そしてなんと言ってもReact + TypeScriptの言語にまつわる歴史や最新事情までを整理して理解出来るめちゃくちゃ優秀な本です！
React + TypeScriptを使うエンジニアなら必読なんですが、内容のレベル的にエンジニアとして働き始めてからでも良いかなーと思い、番外編にいれました。
Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
実務レベルでReactを触るなら気にしたいポイントなどを解説しているとても良い教材なので、現場に入った後のインプットとしても良いと思います！
今後のフロントエンド開発で必須知識となるReact v18の機能を丁寧に理解する
今後のフロントエンド開発の流れに関わってくる概念が追加されたので、ぜひインプットしましょう！
【React・TypeScript学習ロードマップ】まとめ
最後までご覧になりありがとうございます。
この記事は僕自身が考える、React + TypeScriptを未経験からマスターするための方法です。
必ずしも正しいとは限りませんが、皆さんの参考になれば幸いです。
次のステップ
React + TypeScriptの基礎学習が終わって、ポートフォリオを作ったらいよいよチーム開発です！
未経験でもチーム開発が経験できるサービスを使って、実戦の中でしか学べないスキルを磨いていきましょう！
・未経験向けのチーム開発を経験して、脱未経験になってから転職orフリーランス独立を目指そう ・未経験でもお金をかけずにチーム開発が経験出来るサービス紹介 こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこち[…]
またこちらの記事ではおすすめの転職エージェントや転職先を解説しています。
こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら ・未経験からのエンジニア転職の心構え ・未経験のITエンジニア転職におすすめの転職エージェント・転職先 では、どうぞ！ すぐに登録したい方へ ・[…]