JavaScript

【初心者向け】現役エンジニアが選ぶオススメのReact教材3選

どうも、Kohei(@koheinishino_)です。

JavaScriptに慣れてきたからそろそろReactを勉強しようかなと思ってるけど、どの教材を使えば効率的に勉強を進められるんだろう…。Reactの基礎の部分について体系的に解説している書籍のオススメを知りたい!

という方に向けて、今回の記事では現役エンジニアの自分が実際に利用してみて「分かりやすくて初心者にもオススメできる」と感じたReactの教材を3つ紹介します。

この記事の内容をオススメできる方は、「HTML/CSS、JavaScriptを使用したプログラミングの基礎学習を一通り終えてポートフォリオ作成中のエンジニア」の方や「実務経験1年未満のエンジニア」の方になります。

そのような方がこの記事を読むことで、ポートフォリオづくりや実務でReactを使用するときに必要な知識を効率的に学習できる教材と勉強方法について知ることが出来ます!

今回紹介する3つの教材の中から自分の目的にあったものを選び、Reactを勉強する際の参考にしてみてください!

オススメのReact教材3選

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

オススメの教材1つ目は「モダンJavaScriptの基礎から始める挫折しないためのReact入門」です。

こちらはUdemyという動画学習サイトの教材で、JavaScriptで簡単なアプリを作った経験があってReactを初めて触る初学者の方にオススメです。

スムーズにReact開発のスタート地点に立てるように、モダンJavaScriptの動作の仕組みや概念、機能から解説します。」と銘打っているように、講座内容はJavaScriptが60%、Reactが40%くらいの割合で組まれています。

この講座の最大の特徴が「同じTODOアプリを素のJavaScriptとReactの2種類の方法で開発する」というハンズオンがあることです。このハンズオンがあることによって、主に下記2点を体感できると思います!

  • 素のJavaScript・Reactの基礎的な構文
  • 素のJavaScriptのみで開発するデメリットReactで開発するメリット

Reactの深い部分までは取り扱いませんが、Reactを学習するための最初の教材としてオススメです!

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

オススメの教材2つ目は「Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版」です。

コチラは1つ目に紹介したUdemy教材の続編で同じ作者の方の講座になります。

この教材ではReact開発で詰まるポイントである「再レンダリング、CSSライブラリ、ルーティング、コンポーネント分割、state管理、TypeScriptの導入、カスタムフック」周辺に重点を置いて解説されているため、モダンな実務環境に近い内容を学べます。

進め方としては、講座の最後にハンズオンがあるためシンプルに順番に進めていくと良いです。また、別のプロジェクトで似たような内容で詰まったときに都度講座を見返すのも良いと思います。

1つ目の教材を終えてモダンJavaScriptとReactの基礎が身に付いた方で、より実践的な内容に触れてみたい方にオススメです!

3. Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス

オススメの教材3つ目は「Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス」です。

コチラは技術書で有名なオライリー社が出版しているReactの書籍になります。2021年8月に日本版が出版されたので執筆時点で最新のReact書籍となります。

上記2つの教材は動画ですがコチラは書籍ですが、2021年時点で最新の内容がかなりのボリュームで記載されているため、Reactの基礎から応用までしっかり学びたい方向けの教材です。タイトルの通りハンズオンもあるので実際に手を動かして学べます。

使い方としてはオライリーの書籍全般に言えることなのですが、今の自分が必要としている部分だけ読み、しっかり理解したいときはコードを写経してローカルで実行させて動作確認するのが良いです。

Reactの基礎を理解し実践的な内容も身に付けた方が、体系的にReactの深い部分を追究するときにオススメの教材です!

番外編:オススメのJavaScript教材

JavaScript Primer 迷わないための入門書 (アスキードワンゴ)
created by Rinker

基本的にReactの教材はまずはじめにモダンJavaScriptの基礎部分(主にES6の記法)について解説していますが、明らかにJavaScript自体の理解が不足していると感じた場合JavaScript Primer』を使用して学び直すことをオススメします。基礎固めの教材としてはこの1冊で充分です。

コチラの教材は、タイトルの通りReactではなくJavaScriptの解説に特化した書籍です。JavaScriptの解説というと分厚い書籍をイメージされるかもしれませんが、頻出の部分だけに特化したような内容で意外とサラッと読めてしまうかなと思います。

また、応用編として簡単なハンズオンもあるので実際に手を動かして勉強できます。個人的にはハンズオンをやる場合は同じPC画面でみたいので電子書籍のほうがオススメですが、なんと下記のリンク先で無料公開されているので、書籍として手元に持っておく必要がない場合は下記のサイトを利用するのが良いです!

まとめ:Reactはハンズオンで学ぼう!

今回はReactを学ぶためにオススメの教材3選を紹介しました!

そして最後にJavaScriptのオススメ教材である『JavaScript Primer』を紹介しました!

私の経験上ハンズオンを通して学んだほうが記憶に残りやすいため、3種類ともハンズオンが中心の教材をセレクトしてます。バックエンドよりも視覚的な動きの実装が多いため、実際に作って動かしてみたほうが効率が良いんですよね。

なので、Reactを含むJavaScript全般を学ぶときはぜひ何かを作りながら学んでみてください!

また、モダンフロントエンド開発全般について体系的に勉強してみたい方は下記の書籍がオススメです!

フロントエンド開発入門 プロフェッショナルな開発ツールと設計・実装
created by Rinker
ABOUT ME
Kohei Nishino
Webエンジニア、ブロガーです。新卒未経験で開発エンジニアとして大手SIerに入社し2年で退職。その後、派遣と業務委託を半年ほど経て都内のWeb系企業にエンジニアとして転職。しばらくは本業コミットのため技術的な話が多めです。Ruby on Rails / React.js / AWS