新しい言語やフレームワーク、触れたことのないアーキテクチャなどを習得しようとするとき、どのようにして学習していますか？ 効率の良い学習方法というのは人によってそれぞれ違うと思いますが、自分ならこうしますという記事があれば少しは有益かもしれないと思い本記事を書いています。 ここでは React を学習するにあたって、どのような教材を用い、どのような方法で学んだかを残しておきます。 あくまで僕が行ってきた学習方法を書いていますので、これがベストの方法だ、という内容ではないのでご注意ください。

学習の前に

まず僕のバックグラウンドですが、普段は AWS で Web サービスのインフラ構築をしており、バックエンドに Rails を少し触っていた時期がある、という感じです。 フロントエンド領域は苦手意識をもっており、簡単な HTML と CSS および JavaScript(jQuery) が書けるくらいの程度です。 学習の基本方針としては、基礎的な部分はしっかり理解し、細かい書き方などはさっと目を通して、後で見直したときに思い出せればいいくらいの感覚でやっています。 また学習にはインプットとアウトプットが欠かせないと思いますが、僕の場合、学び始めはインプットにかなり時間をかけます。

今回行った学習期間ですが、9月頃から学習を始めたので、以下の内容は3ヶ月間くらいで行った学習量になります。

使用した教材など

以下記載の順序で学習していきました。

Jsprimer

React の前にモダン JavaScript の理解は必須だと思ったので学習しました。非常に有益なサイトでした。オススメです。

React.js & Next.js 超入門

React.js&Next.js超入門
React.js & Next.js 超入門
掌田 津耶乃(著)
秀和システム
売り上げランキング: 239,043
Amazon.co.jpで詳細を見る

超入門とあったので読んでみましたが、あまり良い本ではなかったです。説明がまわりくどい感じがしました。さっと流し読みして終わりました。

フロントエンドエンジニアのための React・Redux アプリケーション開発入門

こちらは Udemy の講座になります。最近は動画での学習も流行っていますね。 この方はコードを書きながら説明をしていくというスタイルなので、実装の流れがみてわかるのが良かったです。

React 公式チュートリアル

この段階で？という感じですが、React 公式のチュートリアルをやりました。 五目並べを実装していくチュートリアルです。とりあえず写経しましたが、この段階ではまだ React のことはよく分からないままです。

React Hands On 資料

教材を探しているときに見つけました。クラスコンポーネントベースで古いためオススメしません。 この時はまだ関数コンポーネントとクラスコンポーネントでどっちがモダンなのかという知識さえ持ってませんでした。

入門 React

入門 React ―コンポーネントベースのWebフロントエンド開発
入門 React ―コンポーネントベースのWebフロントエンド開発
Frankie Bagnardi (著), Jonathan Beebe (著), Richard Feldman (著), Tom Hallett (著), Simon HØjberg (著), Karl Mikkelsen (著), 宮崎 空 (翻訳)
オライリージャパン
売り上げランキング: 337,835
Amazon.co.jpで詳細を見る

クラスコンポーネントベースであり、またアローファンクションを使ってない、など古い内容となっているためオススメしません。

この頃にようやく Hooks 登場以前の古い React と新しい React では書き方が大きく変わったのだなということを知りました。進化の早いフロントエンドはなるべく新しい情報に触れるのが大事なんだと再認識しました。 以下のサイトをみて useState, useEffect といった関数コンポーネントでの state 管理方法を学ぶ必要があることを知りました。

React and Redux Toolkit Full Course (free)

これまでの学習で React の基礎の基礎は理解できたという手応えがあったので、モダンなライブラリや設計、環境構築方法なども学んでいこうという段階に入ってきました。 そこで状態管理として Redux を学ぶことにしました。ただ Redux はそこそこの量のテンプレートを書く必要があるらしいのですが Redux Toolkit を使うことで簡潔に書けるようです。 Youtube で Redux Toolkit と検索して、ヒットした動画をみて勉強することにしました。分かりやすく良かったです。

React 開発 現場の教科書

React開発 現場の教科書
React開発 現場の教科書
石橋 啓太 (著), 丸山 弘詩 (編集)
マイナビ出版
売り上げランキング: 108,947
Amazon.co.jpで詳細を見る

Atomic Design に関して知りたかったので本書を購入して読みましたが、この本はオススメできません。理由としては下記の通りです。

  • 内容が古い、クラスコンポーネントで書かれている
  • 環境構築の方法も古い
  • Atomic Design にあまりページ数が割かれていない

Atomic Design は別で勉強したほうがいいでしょう。

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

React の基礎を学ぶ際にみた Udemy の講師の方が別の動画を出されていたので購入してみました。Hooks についてよく理解できました。

モダン JavaScript の基本から始める React 実践の教科書

モダンJavaScriptの基本から始める React実践の教科書
モダンJavaScriptの基本から始める React実践の教科書
じゃけぇ(岡田 拓巳)
SBクリエイティブ
売り上げランキング: 1,723
Amazon.co.jpで詳細を見る

すごく分かりやすい内容かつ書き方もモダンでよかったです。これから React を学ぼうという際に最もふさわしい入門書です。 一番最初にこの本に出会っておきたかった……。本書は別でレビューを書いたので詳細はこちらをみてください。

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

Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス
Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス
Alex Banks (著), Eve Porcello (著), 宮崎 空 (翻訳)
オライリージャパン
売り上げランキング: 34,900
Amazon.co.jpで詳細を見る

React の書籍ならコレ！と言われる鉄板の本らしいです。実際読んでみて納得できました。特にサスペンスコンポーネントの説明はありがたかったです。 こちらも詳細レビューを別で書いているのでよろしければご覧ください。

仕事ですぐに使える TypeScript

モダンな開発では TypeScript は切り離せないなと思ったので、この段階で TypeScript を勉強することにします。 非常に充実した分量で、また開発現場に即した内容のためすごく学びになりました。

もし今から初めて勉強するとしたら

僕の学習順序はこれまでに書いた通りですが、中には古い情報の書籍などを参考にしたため遠回りをしてしまった部分もありました。 もし今から React を学ぶ場合、以下の順序で学んでいくのがいいと思います。

まずはこちらで JavaScript の基礎を抑えます。

次にこの本を読んで React の基本を学びます。

モダンJavaScriptの基本から始める React実践の教科書
モダンJavaScriptの基本から始める React実践の教科書
じゃけぇ(岡田 拓巳)
SBクリエイティブ
売り上げランキング: 1,723
Amazon.co.jpで詳細を見る

最後にこれを読んで React の少し深いところを学習します。

Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス
Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス
Alex Banks (著), Eve Porcello (著), 宮崎 空 (翻訳)
オライリージャパン
売り上げランキング: 34,900
Amazon.co.jpで詳細を見る

また TypeScript の勉強はこのサイトがあれば問題ないです。

今後実装を始めるときに参考にしたいサイト

React の基礎を学び、状態管理の Redux を学び、TypeScript も勉強しました。 ここまでの学習でなんとなくアプリが実装できそうだなという感覚を得たので React を完全に理解したと言ってよいでしょう。 今後はアーキテクチャの考え方や、ライブラリについて調べたりすることになりそうです。

そこでアプリ実装を始めたら役立ちそうなサイトを貼っておきます。

やらなかったこと

今回の学習において Next.js は学習しませんでした。またフルスタックフレームワークの blitz.js なども学習していません。