レビュー

React.js学習のおすすめの教材を紹介!

こんにちは、MSKです。
僕は個人開発でReact.jsを使って、フロントサイドやデスクトップアプリを開発しています。
React.jsを学んだ、または今現在学んでいる教材でおすすめのものを紹介します。

React.jsとは

Facebook社が開発したJavaScriptのライブラリの1つです。
JavaScriptのフレームワーク・ライブラリは数多くあり、日本ではVue.jsが人気ですが、世界的に見るとReactが使われています。

採用事例としては、FacebookやInstagram、Netflix、Slackなどがあります。
Reactの特徴としては、次があります。

  • 宣言的
  • コンポーネントベース
  • 拡張機能が豊富

宣言的

Reactは指定したデータの値が変更されたときだけ、画面を更新してレンダリングします。
そのため、シンプルで理解しやすいソースコードが作成しやすく、デバッグしやすいという利点があります。

コンポーネントベース

UIの部品をコンポーネントとして切り出して、カプセル化された状態で構築することができます。
このため複雑なUIだったとしても、コンポーネント組み合わせて簡潔に作ることができたりします。
コンポーネントとして切り出すことで、

  • 不具合発生時、該当するコンポーネントの改修だけですむ
  • 1つ1つの部品を短く分かりやすいソースコードの状態で管理できる
  • 必要な場所でコンポーネントを呼び出すだけで使えるので、再利用もやりやすい

という利点があります。

拡張機能が豊富

コンポーネントベースに少し関わりますが、他の人が作成したコンポーネントをダウンロードして組み込んで使うことができます。
実現したい機能を簡単に使うことができるようになるためメリットは大きいです。

本のおすすめ

本のおすすめは1つだけです。

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

さまざまなプログラミング言語やフレームワーク・ライブラリに対して分かりやすい入門書を書かれている掌田さんが書かれているReact.jsの入門書になります。

基本的な内容について動かしながら学べる本です。
第1版ではReduxについて書かれていて、Hooksについては記載がないのですが(出版当初はリリース前だと思うので仕方ないですが・・・)第2版からはReduxの記載がない代わりにHooksについて書かれています。
今から学ぶ人は第2版を学んで、いくつかアプリを作った後にReduxが必要になれば、その時にReduxについても学べばいいのではと思います。

FirebaseやNext.jsについては簡単ですが、学べるのはいいなと思います。

目次は以下のようになっています。

  1. Reactを準備しよう!
  2. JSXをマスターしよう!
  3. コンポーネントをマスターしよう!
  4. フックで状態管理しよう!
  5. Next.jsでReactをパワーアップ!
  6. FirebaseでReactをパワーアップ!
  7. Addendum : JavaScript超入門!

動画教材のおすすめ

Udemyの教材は基礎的な内容から実践的な内容まで講義されているので、おすすめです。
Udemyは頻繁にセールをやっていて、全体的に90%OFFなどで購入できます。
もし興味があった動画があった場合はセールまで待って購入してください。
(平均2000円以下で購入できるようになると思います。)

その中でも僕がおすすめだと思う動画教材を紹介します。

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

実際に手を動かしながらReact Hooksを学習できる教材です。
解説が丁寧であり、また質問にも素早く回答してもらえるので安心して受講ができます。
また、Githubに最終的なソースがあるので、詰まったら見比べることができます。

ただ、JavaScriptについては知っているものとして進められるのでJavaScriptの文法が不安な人はJavaScriptの基本を学んでから受講すると良いと思います。

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

Firebase + React Hooks(TypeScript)によるWebアプリ開発

Twitterクローンを作りながらReact Hooksの実践的な使い方を学べる講義です。
この講義ではTypeScriptが使われるので、TypeScriptを先に学んでおくとよいと思います。
この講義の作成者が別の講義で無料でTypeScriptについて動画を出しているので、それを受講されるのもよいと思います。

Firebase + React Hooks(TypeScript)によるWebアプリ開発

[基礎編]React Hooks + Django REST Framework API でフルスタックWeb開発

PythonのサーバーサイドのフレームワークであるDjangoを使用しますが、サーバーサイドとフロントサイド両方を開発できるようになる基本的な講義になっています。

フルスタック開発に興味がある人にはおすすめの内容です。

[基礎編]React Hooks + Django REST Framework API でフルスタックWeb開発

[JIRA編]React Hooks/TypeScript + Django REST APIで作るオリジナルJIRA

こちらもDjangoを使ったフルスタック開発の教材になります。
タスク管理で有名なJIRAのクローンを作りながら、DjangoとTypeScriptを使ったReact Hooksの学習が行えます。
実際に使えるようなアプリを作成されているので、かなり実践的な内容になっています。

[JIRA編]React Hooks/TypeScript + Django REST APIで作るオリジナルJIRA

最後に

React.jsを学習する際におすすめの教材について紹介しました。
特にUdemyの実践的な内容を1つでもマスターできれば、すぐに業務や個人開発に使えると思います。

またおすすめの教材が出てきましたら、更新してお伝えしたいと思います。

以上、「React.js学習のおすすめの教材を紹介!」でした。
最後までご覧いただき、ありがとうございました!

ABOUT ME
MSK
九州在住の組み込み系エンジニアです。 2児の父親でもあります。 数学やプログラミングが趣味です。 最近Webプログラミングと曲面結び目理論にはまっています。