これからReactを学んでいくためのロードマップ

公開:2020/12/18
更新:2020/12/18
4 min読了の目安(約4300字TECH技術記事 3

「Reactをこれから改めて学ぶにはどの記事を参考にしたらいいか?」と聞かれることがあり、勢いで羅列した記事になります🔥

本記事自体にReactを学ぶための中身はなく、学んでいく上で参照すべき記事を独断と偏見でまとめたロードマップです。

すべての記事を読んだ上でマスターできるというよりは、より早くReactについて理解できる一助となれれば幸いって感じの記事です🙏

@catnose99さんコメントからの追記】
じっくり学びたい方は FreeCodeCampのReactチュートリアルもよさげです!英語ですが扱う内容がステップバイで幅広く初心者にやさしい内容です。無料です🔥

前提

関数、オブジェクト、配列、あるいはクラスといったプログラミングにおける概念について、馴染みがあること🎨(公式チュートリアルより)

手順

Step1. 公式のチュートリアルをやる

Reactの公式サイトにあるチュートリアルを進めましょう。

この時点で内容を完璧に理解しようとはせず、時間制限のあるハンズオンだと思ってサクッと進めると良い気がします。

https://ja.reactjs.org/tutorial/tutorial.html

チュートリアルを進めるにあたって記事内では Codepen が紹介されていますが、個人的には CodeSandboxがおすすめです。
サインイン後、"Create Sandbox"というボタンからReactを選択するだけでローカルエディタに近い環境がブラウザ上で立ち上がります🔥

以後、自分がコードサンプルをあげる場合はCodesandboxを使用すると思うので、こっち使ってほしい✌

ローカルで動作させたい方には Create React Appが簡単でよきです。

Step2. 公式のドキュメント(MAIN CONCEPTS)を熟読する

Reactの公式にあるドキュメント(MAIN CONCEPTS)を読み進めましょう。

https://ja.reactjs.org/docs/hello-world.html

ここの内容は何度も熟読し、Reactがどういうものなのか理解するのが良い気がします。
props, state, コンポーネント, ライフサイクルメソッドについて説明できるようになりましょう✌

MAIN CONCEPTS意外のその他の章については気になるところだけ読んで理解する程度で良い気がします。

Step3. React Hooksを知る

2018年末に発表されたHooksはReactの実装の在り方を大きく変えました🔥
公式にある記事を読んでHooksを知りましょう

https://ja.reactjs.org/docs/hooks-intro.html

記事中にもある当時の発表の様子が映された説明映像がわかりやすくておすすめです✌

https://www.youtube.com/watch?v=dpw9EHDh2bM&feature=emb_title

useState, useEffect, useContextについて説明できるようになりましょう💪

Step4. Hooksを使ってみる

Step2で取り扱った下記の記事で実装したサンプルをHooksに置き換えてみましょう!✌
そのまま置き換えるだけでなく、コード量が減らせそうな箇所はどんどん減らしてみましょう。

https://ja.reactjs.org/docs/thinking-in-react.html
  • クラスはなくなりましたか?
  • 不要なコードは削除されましたか?
  • useStateを不要な箇所で使っていませんか?

Step5. カスタムフックを作ってみる

Hooksを利用して独自のフックを作ってみましょう!

下記のようなユーザー登録フォームがあったとします。カスタムフックを利用してAppコンポーネント内のコードが減らせそうじゃないですか?(カスタムフック追加分のコード増加は一旦無視しますw)

減らしてみましょう!

自分が減らした例を貼っておきます。カスタムフックのコード追加分がありあまり減ってませんが、処理が分離できたことによる可読性があがったとはいえるのかなと🙇(考え方によりますが、、🙇)

https://codesandbox.io/s/zennjishiyong-kasutamuhutuku-li-26ghy

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を利用した解決を検討します🔥

https://ics.media/entry/200409/

https://zenn.dev/takepepe/articles/state-manegement-in-nextjs-2020
※Nextjsについては後ほど紹介します

ファイル肥大化問題への解決策

カスタムフックの利用や、実装に関する設計・規約での解決を検討します🔥

https://speakerdeck.com/nkzn/hooksshi-dai-falseshe-ji-falsehua-number-agrinoteinside

https://zenn.dev/takepepe/articles/howto-withstand-aging-react-component

OGPどうなるの問題への解決策

SSR(Server Side Rendering)を利用して、予めサーバーサイドでレンダリングしておく手法を検討します🔥最近だと概ね Nextjs一択な感じすらします。

型の定義ができない問題への解決策

TypeScriptの導入を検討します🔥というか基本TSいれとくっしょ✌🔥

https://qiita.com/ksyunnnn/items/fc583962dd82bc5a1233
https://qiita.com/Takepepe/items/0bbe4ab6ff4858a4e186

最後

大量の記事とか画像を参照させていただきました🙇
ほんとうに参考元の記事執筆されている方に感謝です🙇

ほとんどの記事が普段自分が参考にさせていただいている推し記事です。執筆されている方々をフォローしておくときっとご利益があることと思います🙏

参考までにですが、この記事のステップを進めるにあたってどれくらい時間がかかったよ〜という報告とかもらえたらうれしいです🙇
どれくらい時間がかかるのが妥当なコンテンツなのか自分ではよくわからず気になっているので🙏

お読みいただきありがとうございました〜!