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開発](https://oukayuka.booth.pm/items/1312652)
- [りあクト！ TypeScriptで極める現場のReact開発](https://oukayuka.booth.pm/items/1312815)

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

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

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

### 【最新版・hooks対応】 Reactの基礎を学んでTODOアプリを作ろう！
https://note.com/dragontaro/n/n04e0b9c0cca7

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

### Reduxの基礎の勉強
- [Redux入門【ダイジェスト版】10分で理解するReduxの基礎](https://qiita.com/kitagawamac/items/49a1f03445b19cf407b7)
- [React+Redux で Todoアプリを作ってみる](https://webbibouroku.com/Blog/Article/react-redux-todo#outline__9)

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

### React/ReduxでGoogleカレンダー風カレンダーアプリケーションを作ろう←今ここ
https://www.techpit.jp/p/react-calendar

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を触ってみたいですね。

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

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

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

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