僕が実践したReactの勉強方法を紹介します！

こんにちは！りょた(@Ryo54388667)といいます(^o^)

今回は、僕が実践したReactの勉強方法を紹介していきます。

• Reactの勉強を始めたいが、何から手をつければいいかわからない。
• ポートフォリオを作りたいけど、何から勉強すればいいかわからない。
• 誰かのReact勉強方法を参考にしたい。

そのような人の悩みの解決につながれば幸いです(^^)

１　書籍で学習

まずは書籍で学習します。

書籍の最も優れている点は、体系的にまとまっている点です。基礎から応用まで習得の順序が明確で、たいていの書籍ではページ順にコードを学習していけば、ある程度はかけるようになります。

「いや、YouTubeがあるでしょ！まずは無料動画がよくない？」

こう思われる人もいるかと思います。

確かに、動画自体は無料ですし、お金を払う前に難易度を知ることができたり、ある程度学習できたりする側面はあります。僕自身、実際その技術で何ができるのか、など概論的な部分はYouTubeで確認することが多いです。

しかし、書籍学習をおすすめする理由は、体系的にまとまっている点です。YouTubeではReactの個々のコードの役割を順序立てて教えてくれるような教材はなかなかありません。あっても少数で、検索が大変なことが多いです。

その点、書籍はECサイトのレビューを見れば、良い書籍かどうかは一目瞭然で、基本的には検索でヒットした上位の書籍を購入すれば、外れることは稀です。

そんなこんなで、僕の場合は書籍で学習します。

「じゃあ、具体的に何の本がいいの？」

2022年3月現在時点では、

岡田拓巳（じゃけぇ）さんが書かれた、「React実践の教科書」がいいと思います。

この書籍をおすすめする理由は２つあります。

① React Hooks ベースで書かれている。

「React Hooks　何それ？」

こう思われた人も多いかと思います。

React Hooksとは2019年に公開されたライブラリーで、比較的新しいReactの書き方です。

これが公開される前までは、Reduxというものが使われていたわけですが、これの学習コストが非常に高く、初心者には難しいというのが大きな問題でした。

一方、React HooksはReduxに比べて、コードがシンプルでわかりやすいというのが特徴です。

このReact Hooksは公開されて、日が浅いので、このライブラリーベースで解説されている書籍は珍しいです。

そんな情勢の中、この書籍はHooksベースで解説がされていて、しかも、カラーで見やすい！

個人的には、勉強方法がわからない人には、これ一択だと思います。

② 最後にミニアプリの作り方が書かれている。

僕はさまざまな技術書を購入し、読了してきたのですが、「この本ハズレだな。。。」と思う本には共通点があることに気づきました。

「一つひとつの章は丁寧だけど、実際、アプリを作る時に個々のコードをどの部分で使っていくのかわからない。。。」

理由はシンプルで、最後にミニアプリを作るようなページがない、からです。

それは「白いピースのパズルが手元にある」ような状態に似ています。

形や輪郭ははっきりしているものの、色がついてないが故に、他のピースとの組み合わせ方がわからない、そんな状態ではないでしょうか。

他のコードとのつながりを理解するためには、実際に一気通貫でミニアプリを作るページが必要です。

この書籍にはこのページがあります。

実際にメモアプリを作るページがあります。見た目は簡素なものですが、Reactで書かれたロジック部分は非常に勉強になります。

最後のセクションだけでも購入する価値のあるものです。

ぜひ購入してみてはどうでしょうか(^^)

２　動画で学習

ちょっと書籍の良さを語りすぎた感あります。。(^^;

書籍で学んだ後、動画で学習します。

「おいおい、さっき動画を否定していたじゃないか！！！」

入門する時に動画は、心もとないんじゃないのかな、というのが僕の主観です。この部分に関しては向き不向きがあります。

しかし、書籍で体系的に学習し、ある程度全体感が掴めたあと、動画で学習するのはいいことだと思います。

あくまで、僕の方法ですが、書籍の次は動画で学習します。

YouTubeもいいですが、僕のおすすめはUdemyという動画教材サイトで、有料の動画を購入することをおすすめします。

UdemyにはReactに関する動画がたくさんありますが、僕の場合、先ほどの書籍があまりにわかりやすいので、その著者の販売している動画教材を購入しました。

具体的な名称は、

「Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版」

この教材の良さは、先ほどの書籍では学びきれなかった部分が網羅的に学べます。

再レンダリングの仕組み

さまざまなCSSの当て方に触れる

ルーティングの基礎(React Router)

コンポーネント分割方法(Atomic Design)

グローバルなstate管理

React X TypeScript

カスタムフック

実践アプリ(Chakra UI)

Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版

それに、地味に有益なのは質問の部分です。

この部分に何度助けられたことか！(^^)

作成者が非常に丁寧に質問に答えられています。

動画と書籍のハイブリッドでReactの勉強をするといいのではないかと思います！

Udemyはちょくちょくセールをやっているので要チェックです！

最後まで読んでくださり、ありがとうございました！

未経験からエンジニアに転職するまでにやってきたことについては下の記事にすべて書きました。

あわせて見てみてください(^^)