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の開発環境が簡単に整うのでこのタイミングで覚えましょう。
公式チュートリアル(三目並べ)
公式チュートリアルを改造して◯◯してみた、的な記事が色々あったりするので、やっておいた方が良いです。ある種の共通言語になります。
りあクト！シリーズを読む
このシリーズは本当に良いです。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とは何者か、雰囲気を掴んでおくと良いでしょう。
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つに比べて学習効率が低いです。「りあクト」は超良書なので例外ですが、基本的には手を動かすのが吉だと思います。
これからも頑張っていきます。