Reactの学習、今からやるならこうする

Reactの学習を初めて約2週間が経ちました。
Railsの時と違って「とりあえずこれをやっておけば良い」ってものが見当たらずなかなか大変でしたが、試行錯誤の上色々と見えてきたのでまとめていきます。

はじめに

React普通にむずいです。
他の言語の経験が無い場合、VueやRailsなどから始めることをおすすめします。

学習前の知識レベル

• Railsエンジニア
• JavaScriptは簡単なDOM操作程度ならできる
• Vue.jsを20時間くらい勉強した(途中でReactがやりたくなった)
• Webpackで静的ページのコーディング環境を整えている

学習法見定める上での難点

• Reactは過去数年で大きく進化しているので、今は主流ではなくなった書き方の記事、チュートリアルがたくさんある
  • 公式チュートリアルもProgateも古い書き方
• Railsチュートリアルのような絶対的な教材が存在しない

学習方法

ProgateのReactコース

https://prog-8.com/languages/react
雰囲気を掴むにはProgateが一番です。
有料ですが、数時間で終わるので980円(税別)でいけます。

web上のチュートリアルが終わったら、作ったアプリをローカルで再現するといい感じに知識が定着します。
create-react-appを使うと、reactの開発環境が簡単に整うのでこのタイミングで覚えましょう。

公式チュートリアル(三目並べ)

公式チュートリアルを改造して◯◯してみた、的な記事が色々あったりするので、やっておいた方が良いです。ある種の共通言語になります。

りあクト！シリーズを読む

• りあクト！ TypeScriptで始めるつらくないReact開発
• りあクト！ TypeScriptで極める現場のReact開発

このシリーズは本当に良いです。Reactの歴史、教義、このライブラリは昔流行ってたけど今は使われてないから注意、などなど、いろんなことが会話形式で楽しく学べます。強くおすすめします。

ちなみもう1つ、りあクト！ Firebaseで始めるサーバーレスReact開発という作品もありますが、Firebaseの説明が中心になるので、この段階で読む必要はないと思います。
私は読みましたが「Firebaseクセ強すぎ。Reactの基礎が固まる前に手を出すものじゃないな」という感想だけを抱きました。

(2020/09/24追記)
りあクト！ TypeScriptで始めるつらくないReact開発の改訂版が出ました。
大幅に更新・増補・改訂され、3部作となりました。
私はまだ読めていませんが、今から読むなら以下の3冊から入るのが良さそうです。
りあクト！ TypeScriptで始めるつらくないReact開発 第3版【Ⅰ. 言語・環境編】
りあクト！ TypeScriptで始めるつらくないReact開発 第3版【Ⅱ. React基礎編】
りあクト！ TypeScriptで始めるつらくないReact開発 第3版【Ⅲ. React応用編】

【最新版・hooks対応】 Reactの基礎を学んでTODOアプリを作ろう！

ここにきて初めて「関数コンポーネント + ReactHooks」が登場します。
Progateと公式チュートリアルでは「クラスコンポーネント」という、今は主流ではない書き方で書かれています。このチュートリアルでHooksの基礎を学びましょう。

Reduxの基礎の勉強

• Redux入門【ダイジェスト版】10分で理解するReduxの基礎
• React+Redux で Todoアプリを作ってみる

このあたりで、Reduxとは何者か、雰囲気を掴んでおくと良いでしょう。

React/ReduxでGoogleカレンダー風カレンダーアプリケーションを作ろう←今ここ

Googleカレンダー的なアプリを作りながら、Reduxやuiライブラリ、非同期処理などをガッツリ学びます。
かなり分量がありますが、すごく良かったです。Railsチュートリアル的な立ち位置かと。
ちなみに
【最新版・hooks対応】 Reactの基礎を学んでTODOアプリを作ろう！
と同じ作者です。

この記事を書いている2020年4月27日時点で、私はこのチュートリアルが終わった段階です。
ここまで2週間かかりましたが、色々回り道をしたので、素直に上からやっていけば10日と掛からず終わるんじゃないでしょうか。

今後やっていこうと思っていること

先ほどのステップで作ったカレンダーを色々いじっていこうと思っています。
具体的には

• 教材(極力)を見ずに再現する
• TypeScriptを組み込む
• APIサーバーを自前で用意する(RailsのAPIモードを使ってみる)
• Storybookを使う
• ESlintとPrettierの設定をガッツリやる
• redux-thunkをredux-sagaで書き換える
• Jest、Cypressでテストを書く
• StyledComponentを使う

これらが終わったら、NextとかGatsbyを触ってみたいですね。

その他参考になった記事など

• 保守性や堅牢性を高める！モダンフロントエンド開発に必要な周辺技術をまとめてみました
• 2020年のウェブフロントエンドエンジニアが学び実践すべきこと
• Learn to become a modern frontend developer
• Webpackでウェブサイト制作のHTML/CSS/JSコーディングを一気に効率化する実践講座 (Mac / Win) - udemy
  • 過去udemyで買った教材の中でダントツの大当たり。基本動画教材は微妙だと思っていますが、これは良いです。今回紹介した勉強法の中ではwebpackの知識は不要ですが、後々役に立ちそうなので、セールの時にでも買っておくと良いと思います。

良くなかった方法

最後に良くなかった方法も書いていきます。

• UdemyのReactの教材
  • 評価の高いものを買ってみたのですが、まじで全然良くなかったです
  • 動画だと、振り返るのが大変なのもマイナス
• 書店に並んでいる本
  • 良し悪し以前に、そもそも情報が古いものがほとんどでした
• だらだらネットサーフィンをして情報を集める
  • 「手を動かす」「記事にまとめる」の2つに比べて学習効率が低いです。「りあクト」は超良書なので例外ですが、基本的には手を動かすのが吉だと思います。

これからも頑張っていきます。