フリーランスエンジニアの雄貴です!
今回は現場レベルのReactスキルを身につけることができるオススメの教材を9つ紹介いたします!
Youtubeではエンジニアの単価が上がる情報発信しています!
毎週木曜日の21時から、ライブ配信やってますので、気軽にお越しください😁
Reactを学ぶ前に
JavaScriptの基礎がわかっていないと、Reactを勉強しても100%挫折します!
完璧にする必要はありませんが、「こんなのあったなぁ」くらいの認識は必要です。
JavaScriptの基礎固めの方法はこちらにまとめていますので、まずはこちらから着手してみてください!
![](https://read-engineer.com/wp-content/uploads/2020/12/スクリーンショット-2020-11-30-15.05.37-300x190.png)
また「Reactってこういうものなんだよ!」っていうイメージを学ぶ前に持っておいた方がいいので、そちらも記事にまとめています。
Reactも機能がたくさんあるので、「優先的に学ぶもの」と「時間がある時にキャッチアップすべきもの」を区別しなければ、効率的に学習することができません。
少しはイメージを掴むことができるかと思います。
![](https://read-engineer.com/wp-content/uploads/2020/12/スクリーンショット-2020-12-19-22.15.28-300x135.png)
オススメ教材9選!!
それでは早速、オススメ教材を紹介していきます!
「初級編」、「中級編」、「上級編」と3段階で紹介しますので、ご自身のレベルにあったところから始めてみてください!
初級編
初級編ではこれからReactの勉強をはじめる方にとって分かりやすい教材を選定しています。
初級編でReactに慣れてみてください。
【Udemy】| モダンJavaSciptの基礎から始める挫折しないためのReact入門
![](https://img-c.udemycdn.com/course/480x270/3452848_0c2e.jpg)
はじめてReactに触れるならこの教材から始めることをオススメします。
カリキュラムとして、JavaScriptの復習を実施してからReactの学習へと進むようになっています。
またフロントエンドの環境構築に必要な、npmやyarnなどのパッケージ管理ツール、webpackやbabelなどのモジュールバンドラーやトランスパイラなども説明されているので、モダンフロントの基礎的な部分はイメージできると思います。
【Udemy】| Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
![](https://img-c.udemycdn.com/course/480x270/3834240_bbc9.jpg)
基礎から実践向きのスキルを習得するのに、最適な教材です。
CSS in JSやReactRouterなどを学ぶための基礎的な教材はあまり出回っていないので、とても貴重です。
またReactだけでなくコンポーネント設計の思想であるAtomic Designや状態管理の手法も説明されているので、現場に出向く前に抑えておきたい事項ばかりです。
【Udemy】|【はむ式】React Hooks 入門 – HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得
![](https://img-c.udemycdn.com/course/480x270/2329814_98bf_4.jpg)
UdemyのReactといえば有名な「はむさん」の教材です。
こちらではReduxとReactHooksを併用した手法を基礎的な部分から説明しています。
現場に出ると分かるのですが、結構ReduxとReactHooksを併用している案件は多いんですよね。。
またReduxについては慣れが必要な部分もあるので、この教材で抑えておくのが良いと思います。
【Udemy】|【はむ式】ハンズオンで学ぶTypeScript – JavaScript エンジニアのためのTypeScript徹底入門
![](https://img-c.udemycdn.com/course/480x270/2582904_eca5_5.jpg)
こちらはTypeScriptを基礎から学べる教材です。
今やReactを使っている現場のほとんどはTypeScriptで記述されています。
というより、「TypeScriptを入れるからReactを使っている」と言った方が正しいですね。
こちらの教材ではJavaScriptの基礎に自信がない方でもでも、その辺りを説明しながらTypeScriptを教えているので、非常にわかりやすいです。
また最後にTypeScriptでReactを記述する方法も教えています。
なぜTypeScriptが必要なのか?はこちらの記事にまとめていますので、ぜひご覧ください。
![](https://read-engineer.com/wp-content/uploads/2020/12/スクリーンショット-2020-12-17-21.26.25-300x137.png)
中級編
中級編では実践的なスキルを身につけていける教材を選定しています。
現場でよく使う機能の実装方法や、有能なライブラリの紹介など、仕事で使う上でとても役に立つ教材を選定しました。
【Techpit】| React/ReduxでGoogleカレンダー風カレンダーアプリケーションを作ろう
![](https://techpit-market-prod.s3.amazonaws.com/uploads/course/eye_catch/22/f8305f77-d78e-4808-a8d0-3c853baea598.jpg)
この教材ではReduxを用いてカレンダーアプリを開発していくカリキュラムになっています。
Reduxは癖が強いので座学で勉強するだけではなく、多くアウトプットしていく必要があります。
こちらの教材で作成したコードを参考に、Reduxを組み込んだ簡単なアプリを開発していくと効率良くReduxをキャッチアップしていくことができます。
またカレンダーのUI実装も割と現場であったりするので、この機会にやり方を学ぶのもオススメです。
【Techpit】|【React/Redux/TypeScript】実践的なフォームの扱いを完全に理解しよう!
![](https://techpit-market-prod.s3.amazonaws.com/uploads/course/eye_catch/81/d2a3824a-86cc-4f15-85f2-50781e9f7c05.jpg)
入力フォームやセレクトボックス、ラジオボタンなど、Webシステムを開発する上で絶対に開発することになる機能の構築方法を学べます。
またTypeScriptを用いた有効な型定義の方法なども学べて、かなりの実践スキルが身に付きます。
フォームの開発はモダンフロントの仕事では避けては通れないのですが、割と難しいんですよね。。
この機会にキャッチアップしていきましょう!
【書籍】| フロントエンド開発入門
こちらはReact専門の書籍ではなく、モダンフロントで扱うスキル全般を「なぜそれが必要なのか?」という背景にフォーカスして説明しています。
これまでに紹介してきた教材をこなしているならば、こちらの教材の内容も理解しやすくなっていると思います。
モダンフロントはTypeScriptやReact, Vue.jsだけでなく、node.js, yarn, babel, webpack, storybook, jestなど必要なスキルは多くあります。
こちらの書籍で全体像とそれぞれを用いる意味を理解していきましょう!
【書籍】| りあクト!
![](https://booth.pximg.net/c/620x620/a6bb6149-3c80-4a32-af82-d43ef5505047/i/2368045/ae67fc6e-8f77-4024-bf8a-3e9867c85409_base_resized.jpg)
モダンなReactを基礎から実践的な使い方まで説明している書籍です。
この一冊をやり込めば、Reactの基礎は完璧だと言えます。
これまでやってきた内容の総復習と、他の教材でキャッチできなかった実践的な部分をキャッチアップできるので、ぜひ購入することをオススメします。
最新版はこちらの3.1版で、全3部構成になっています。
![](https://booth.pximg.net/c/620x620/a6bb6149-3c80-4a32-af82-d43ef5505047/i/2368045/ae67fc6e-8f77-4024-bf8a-3e9867c85409_base_resized.jpg)
![](https://booth.pximg.net/c/620x620/a6bb6149-3c80-4a32-af82-d43ef5505047/i/2368019/c9f43e45-c909-4424-a625-c8c4e9b25130_base_resized.jpg)
![](https://booth.pximg.net/c/620x620/a6bb6149-3c80-4a32-af82-d43ef5505047/i/2367992/3f526908-04c9-4594-831d-d6d875b57a32_base_resized.jpg)
上級編
上級編では教材ではなく、実際に最先端の企業が開発しているシステムのコードを見て学んでいきます。
企業もあまり公開しておらず、私の観測範囲では1点のみでしたが、実務で運用しているコードなのでここから全てを学ぶことができます。
【Github】| SmartHR UI
SmartHR社が公開しているUIライブラリのコードです。
コンポーネントの構築のみならず、カスタムフックの構築、型定義ファイルの構成など、現場で使っている構成を全て学ぶことができます。
もちろん全ての現場で使われている構成ではありませんが、実運用されているシステムのコードを閲覧できるのはとても貴重です。
現場でReactに慣れてきた後にこちらで学習してみることをオススメします。
最後に
以上、Reactオススメ教材9選を紹介しました!
初級編、中級編、上級編と難易度別に分けて紹介いたしました。
インプットだけでなくアウトプットしながら効率良く学べる教材を選定しているので、ぜひ学習してみてください!
Youtubeではエンジニアの単価が上がる情報発信しています!
毎週木曜日の21時から、ライブ配信やってますので、気軽にお越しください😁
コメント