これからReactを学んでいくためのロードマップ
「Reactをこれから改めて学ぶにはどの記事を参考にしたらいいか？」と聞かれることがあり、勢いで羅列した記事になります🔥
本記事自体にReactを学ぶための中身はなく、学んでいく上で参照すべき記事を独断と偏見でまとめたロードマップです。
すべての記事を読んだ上でマスターできるというよりは、より早くReactについて理解できる一助となれれば幸いって感じの記事です🙏
【@catnose99さんコメントからの追記】
じっくり学びたい方は FreeCodeCampのReactチュートリアルもよさげです！英語ですが扱う内容がステップバイで幅広く初心者にやさしい内容です。無料です🔥
前提
関数、オブジェクト、配列、あるいはクラスといったプログラミングにおける概念について、馴染みがあること🎨(公式チュートリアルより)
手順
Step1. 公式のチュートリアルをやる
Reactの公式サイトにあるチュートリアルを進めましょう。
この時点で内容を完璧に理解しようとはせず、時間制限のあるハンズオンだと思ってサクッと進めると良い気がします。
チュートリアルを進めるにあたって記事内では Codepen が紹介されていますが、個人的には CodeSandboxがおすすめです。
サインイン後、"Create Sandbox"というボタンからReactを選択するだけでローカルエディタに近い環境がブラウザ上で立ち上がります🔥
以後、自分がコードサンプルをあげる場合はCodesandboxを使用すると思うので、こっち使ってほしい✌
ローカルで動作させたい方には Create React Appが簡単でよきです。
Step2. 公式のドキュメント(MAIN CONCEPTS)を熟読する
Reactの公式にあるドキュメント(MAIN CONCEPTS)を読み進めましょう。
ここの内容は何度も熟読し、Reactがどういうものなのか理解するのが良い気がします。
props, state, コンポーネント, ライフサイクルメソッドについて説明できるようになりましょう✌
MAIN CONCEPTS意外のその他の章については気になるところだけ読んで理解する程度で良い気がします。
Step3. React Hooksを知る
2018年末に発表されたHooksはReactの実装の在り方を大きく変えました🔥
公式にある記事を読んでHooksを知りましょう
記事中にもある当時の発表の様子が映された説明映像がわかりやすくておすすめです✌
useState, useEffect, useContextについて説明できるようになりましょう💪
Step4. Hooksを使ってみる
Step2で取り扱った下記の記事で実装したサンプルをHooksに置き換えてみましょう！✌
そのまま置き換えるだけでなく、コード量が減らせそうな箇所はどんどん減らしてみましょう。
- クラスはなくなりましたか？
- 不要なコードは削除されましたか？
- useStateを不要な箇所で使っていませんか？
Step5. カスタムフックを作ってみる
Hooksを利用して独自のフックを作ってみましょう！
下記のようなユーザー登録フォームがあったとします。カスタムフックを利用してAppコンポーネント内のコードが減らせそうじゃないですか？(カスタムフック追加分のコード増加は一旦無視しますｗ)
減らしてみましょう！
自分が減らした例を貼っておきます。カスタムフックのコード追加分がありあまり減ってませんが、処理が分離できたことによる可読性があがったとはいえるのかなと🙇(考え方によりますが、、🙇)
Step6. Reactのつらみ知る
React Hooksの実装まで理解した上で、実際に実装してみるとぶつかりがちな悲しい場面についていくつか例をあげます😩
propsのバケツリレー
引用元 https://tech.playground.style/javascript/state-management/
Reactアプリケーションにおいてデータは上位コンポーネントから下位コンポーネントへ流れていきます。中規模以上のアプリケーションだとpropsのバケツリレーが発生して、 stateの管理がつらたんです😢
ファイル肥大化問題
引用元 https://speakerdeck.com/nkzn/hooksshi-dai-falseshe-ji-falsehua-number-agrinoteinside?slide=7
JSX、データ通信処理、イベント実装、表示用のデータ整形処理などなど、記述する処理の関心は多岐に渡り、1ファイルのコード量は肥大化しがちでつらたんです😢
OGPどうなるの問題
たとえばReactでWebメディアを作った場合に、コンテンツごとに記事のmetaタグ(SNSでシェアしたときに出てくる画像とかタイトルのOGP設定)を用意したとします。
ReactはJSで生成したUIをひとつのHTMLにマウントするので、metaタグをコンテンツごとに変更したいときも動的にJSで変更する必要があります。
逆にいうとJSが実行されなければmetaタグは変更できず、いまのところJSを実行しない各SNSのクローラーたちは正しいOGP情報を読み込んでくれません😢コンテンツをSNSでシェアしたときにトップページのmetaタグ情報しか読み込まれなかったりするのでつらたんです😢
型の定義ができない問題
ReactはピュアなJavaScriptなので型の定義はできません。つまりどこかの上位コンポーネントから流れてくるpropsからどんな値が渡されるのかは実行してみないとわからないし、下位コンポーネントに必要なpropsが流れてこずとも実行してエラーにならなければ気づけません。
ひとりで開発していて、記憶力にめちゃくちゃ自信がある方は問題ないのですが、たいていのプロジェクトはひとりじゃないし、記憶力に自信がないのでつらたんです😢
Step7. Step6の解決策の例を知る
propsのバケツリレーへの解決策
状態管理(stateの管理)のためのライブラリの導入を検討します🔥またはReactが用意したContextを利用した解決を検討します🔥
※Nextjsについては後ほど紹介します
ファイル肥大化問題への解決策
カスタムフックの利用や、実装に関する設計・規約での解決を検討します🔥
OGPどうなるの問題への解決策
SSR(Server Side Rendering)を利用して、予めサーバーサイドでレンダリングしておく手法を検討します🔥最近だと概ね Nextjs一択な感じすらします。
型の定義ができない問題への解決策
TypeScriptの導入を検討します🔥というか基本TSいれとくっしょ✌🔥
最後
大量の記事とか画像を参照させていただきました🙇
ほんとうに参考元の記事執筆されている方に感謝です🙇
ほとんどの記事が普段自分が参考にさせていただいている推し記事です。執筆されている方々をフォローしておくときっとご利益があることと思います🙏
参考までにですが、この記事のステップを進めるにあたってどれくらい時間がかかったよ〜という報告とかもらえたらうれしいです🙇
どれくらい時間がかかるのが妥当なコンテンツなのか自分ではよくわからず気になっているので🙏
お読みいただきありがとうございました〜！
Discussion
ステップ1〜2のあたりで、英語に抵抗がなければFreeCodeCampのReactチュートリアル（無料）をやってみるのも良いかもしれません。
あと、どこかでCSS in JSを学ぶ必要がありそうですね。嫌でも触れることになると思いますが…
コメントありがとうございます！
FreeCodeCampのReactチュートリアル、たしかにそうですね！補足として追記しようと思います🙏
CSS in JSについては現在のベストプラクティスわかんなくて記載保留にしてたのですが、確実にふれる問題なのもたしかなので追記しようと思います🤔
あ、わざわざありがとうございます😹
CSS in JSについては難しいところですよねー。とりあえずstyled-components触ってみてパフォーマンスが気になったときにlinariaを触るとかかな…？