プロが選ぶ!Reactオススメ教材9選!!

フリーランスエンジニアの雄貴です!

今回は現場レベルのReactスキルを身につけることができるオススメの教材を9つ紹介いたします!

目次

Reactを学ぶ前に

JavaScriptの基礎がわかっていないと、Reactを勉強しても100%挫折します!

完璧にする必要はありませんが、「こんなのあったなぁ」くらいの認識は必要です。

JavaScriptの基礎固めの方法はこちらにまとめていますので、まずはこちらから着手してみてください!

あわせて読みたい
プロになるためのJavaScript勉強法!! フリーランスエンジニアの雄貴です! 近年のWebサービスではSPAと呼ばれる構成でUIをより良くしているものが増えており、それを実現するReactやVue.jsなどのJavaScript...

また「Reactってこういうものなんだよ!」っていうイメージを学ぶ前に持っておいた方がいいので、そちらも記事にまとめています。

Reactも機能がたくさんあるので、「優先的に学ぶもの」と「時間がある時にキャッチアップすべきもの」を区別しなければ、効率的に学習することができません。

少しはイメージを掴むことができるかと思います。

あわせて読みたい
プロになるためのReact勉強法!!〜入門編〜 フリーランスエンジニアの雄貴です! JavaScriptフレームワークのなかで圧倒的にシェア率の高いReact! しかし挫折率の高いフレームワークですので、現役フロントエンド...

オススメ教材9選!!

それでは早速、オススメ教材を紹介していきます!

「初級編」、「中級編」、「上級編」と3段階で紹介しますので、ご自身のレベルにあったところから始めてみてください!

初級編

初級編ではこれからReactの勉強をはじめる方にとって分かりやすい教材を選定しています。

初級編でReactに慣れてみてください。

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

Udemy
モダンJavaScriptの基礎から始める挫折しないためのReact入門 Reactの習得に苦戦する理由は「JavaScript」への理解不足です。このコースではスムーズにReact開発のスタート地点に立てるように、モダンJavaScriptの動作の仕組みや概念、...

はじめてReactに触れるならこの教材から始めることをオススメします。

カリキュラムとして、JavaScriptの復習を実施してからReactの学習へと進むようになっています。

またフロントエンドの環境構築に必要な、npmやyarnなどのパッケージ管理ツールwebpackやbabelなどのモジュールバンドラーやトランスパイラなども説明されているので、モダンフロントの基礎的な部分はイメージできると思います。

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

Udemy
Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版 「React何となく分かったけど次どうしたら良いか分からない」という人がステップアップするために知っておくべきことを順序立ててハンズオン形式で詰め込みました。本コー...

基礎から実践向きのスキルを習得するのに、最適な教材です。

CSS in JSやReactRouterなどを学ぶための基礎的な教材はあまり出回っていないので、とても貴重です。

またReactだけでなくコンポーネント設計の思想であるAtomic Designや状態管理の手法も説明されているので、現場に出向く前に抑えておきたい事項ばかりです。

【Udemy】|【はむ式】React Hooks 入門 – HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得

Udemy
React Hooks 入門 - HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得 Vue.js Firebase Docker Gatsby などを抑え、なんと受講生の37.2%が次に学びたいと注目度の高い React Hooks 。複雑な状態管理をシンプルに且つ美しく実装するためのフロン...

UdemyのReactといえば有名な「はむさん」の教材です。

こちらではReduxとReactHooksを併用した手法を基礎的な部分から説明しています。

現場に出ると分かるのですが、結構ReduxとReactHooksを併用している案件は多いんですよね。。

またReduxについては慣れが必要な部分もあるので、この教材で抑えておくのが良いと思います。

【Udemy】|【はむ式】ハンズオンで学ぶTypeScript – JavaScript エンジニアのためのTypeScript徹底入門

Udemy
ハンズオンで学ぶTypeScript - JavaScript エンジニアのためのTypeScript徹底入門 受講生の約6割が次に学びたいと高注目のTypeScript。Goに並ぶ人気、フロントエンド(React/Vue/Angular)やバックエンド(AWS CDKでPythonと並び採用)での存在感は、まさに非...

こちらはTypeScriptを基礎から学べる教材です。

今やReactを使っている現場のほとんどはTypeScriptで記述されています。

というより、「TypeScriptを入れるからReactを使っている」と言った方が正しいですね。

こちらの教材ではJavaScriptの基礎に自信がない方でもでも、その辺りを説明しながらTypeScriptを教えているので、非常にわかりやすいです。

また最後にTypeScriptでReactを記述する方法も教えています。

なぜTypeScriptが必要なのか?はこちらの記事にまとめていますので、ぜひご覧ください。

あわせて読みたい
プロになるためのReact勉強法!!〜TypeScript編〜 フリーランスエンジニアの雄貴です! 前回React入門編として記事をまとめました!状態管理がReactの基礎でしたね! 今回はTypeScriptについてお話ししようと思います! ...

中級編

中級編では実践的なスキルを身につけていける教材を選定しています。

現場でよく使う機能の実装方法や、有能なライブラリの紹介など、仕事で使う上でとても役に立つ教材を選定しました。

【Techpit】| React/ReduxでGoogleカレンダー風カレンダーアプリケーションを作ろう

Techpit(テックピット)
React/ReduxでGoogleカレンダー風カレンダーアプリケーションを作ろう | Techpit React/Redux を使い実践的な開発・設計スキルを身に着ける。さらに、Reduxによる状態管理、実践的なAPIサーバーとの非同期通信、複雑なロジックを含むアプリケーションの...

この教材ではReduxを用いてカレンダーアプリを開発していくカリキュラムになっています。

Reduxは癖が強いので座学で勉強するだけではなく、多くアウトプットしていく必要があります。

こちらの教材で作成したコードを参考に、Reduxを組み込んだ簡単なアプリを開発していくと効率良くReduxをキャッチアップしていくことができます。

またカレンダーのUI実装も割と現場であったりするので、この機会にやり方を学ぶのもオススメです。

【Techpit】|【React/Redux/TypeScript】実践的なフォームの扱いを完全に理解しよう!

Techpit(テックピット)
【React/Redux/TypeScript】実践的なフォームの扱いを完全に理解しよう! | Techpit React/Redux/TypeScriptで実践的でかつUXの高いフォームを作成!基本的なフォーム(文字列・日付・ラジオ・セレクト)の扱いから、住所フォーム(郵便番号による自動補完)...

入力フォームやセレクトボックス、ラジオボタンなど、Webシステムを開発する上で絶対に開発することになる機能の構築方法を学べます。

またTypeScriptを用いた有効な型定義の方法なども学べて、かなりの実践スキルが身に付きます。

フォームの開発はモダンフロントの仕事では避けては通れないのですが、割と難しいんですよね。。

この機会にキャッチアップしていきましょう!

【書籍】| フロントエンド開発入門


こちらはReact専門の書籍ではなく、モダンフロントで扱うスキル全般を「なぜそれが必要なのか?」という背景にフォーカスして説明しています。

これまでに紹介してきた教材をこなしているならば、こちらの教材の内容も理解しやすくなっていると思います。

モダンフロントはTypeScriptやReact, Vue.jsだけでなく、node.js, yarn, babel, webpack, storybook, jestなど必要なスキルは多くあります。

こちらの書籍で全体像とそれぞれを用いる意味を理解していきましょう!

【書籍】| りあクト!

あわせて読みたい
くるみ割り書房 ft. React - BOOTH 「仕事で使える React 本」といえばコレ❗ 超・実践的な React が学べると評判の『りあクト!』シリーズ。 技術同人誌として異例の累計 1.8 万部を突破、現在 BOOTH 技術書...

モダンなReactを基礎から実践的な使い方まで説明している書籍です。

この一冊をやり込めば、Reactの基礎は完璧だと言えます。

これまでやってきた内容の総復習と、他の教材でキャッチできなかった実践的な部分をキャッチアップできるので、ぜひ購入することをオススメします。

最新版はこちらの3.1版で、全3部構成になっています。

あわせて読みたい
りあクト! TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】 - くるみ割り書房 ft. Rea... ☝🏻 2021年 9月アップデート。React 17.0 と TypeScript 4.4 に対応。フロントエンド初中級者や前の版をお持ちの方にもオススメです。くわしくは下の目次をチェック! ―――― ...
あわせて読みたい
りあクト! TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ. React基礎編】 - くるみ割り書房 ft. Reac... ☝🏻 2021年 9月アップデート。React 17.0 と TypeScript 4.4 に完全対応。React 初中級者や前の版をお持ちの方にもオススメの内容です。くわしくは下の目次をチェック! ―――...
あわせて読みたい
りあクト! TypeScriptで始めるつらくないReact開発 第3.1版【Ⅲ. React応用編】 - くるみ割り書房 ft. Reac... ☝🏻 2021年 10月アップデート。React 17.0 と TypeScript 4.4 に完全対応。Redux の新しい書き方から Suspense までを網羅。React 初中級者や前の版をお持ちの方にもオスス...

上級編

上級編では教材ではなく、実際に最先端の企業が開発しているシステムのコードを見て学んでいきます。

企業もあまり公開しておらず、私の観測範囲では1点のみでしたが、実務で運用しているコードなのでここから全てを学ぶことができます。

【Github】| SmartHR UI

GitHub
GitHub - kufu/smarthr-ui: React components for creating SmartHR applications. React components for creating SmartHR applications. - GitHub - kufu/smarthr-ui: React components for creating SmartHR applications.

SmartHR社が公開しているUIライブラリのコードです。

コンポーネントの構築のみならず、カスタムフックの構築、型定義ファイルの構成など、現場で使っている構成を全て学ぶことができます。

もちろん全ての現場で使われている構成ではありませんが、実運用されているシステムのコードを閲覧できるのはとても貴重です。

現場でReactに慣れてきた後にこちらで学習してみることをオススメします。

最後に

以上、Reactオススメ教材9選を紹介しました!

初級編、中級編、上級編と難易度別に分けて紹介いたしました。

インプットだけでなくアウトプットしながら効率良く学べる教材を選定しているので、ぜひ学習してみてください!

よかったらシェアしてね!

この記事を書いた人

雄貴のアバター 雄貴 フリーランスエンジニア

【エンジニアの単価が上がる情報を発信中】
27歳未経験からIT業界へ→経験2年半で月商80万達成
React案件で初回契約月105万を実現

エンジニアの心の相談室を毎週木曜実施中

コメント

コメントする

目次
閉じる