🔰 概要

今回はReactの勉強手順についてです。

Reactはモダンなウェブアプリケーションのフロントエンドにほとんどのケースで使われているので、学習の費用対効果が非常に高いフレームワークの1つです。

またReactを使うことによって、周辺知識(API, DB, TypeScriptなど)の技術力も上がるので、Reactを抑えることで周辺の技術力にも波及します。

✅ Reactの勉強手順

STEP1: ハンズオン形式のReactで作る〜を選ぶ

• Udemy
• Kindle
• Youtube

この3つのうちのプラットフォームのどれかを利用して、実際にハンズオン形式のものを選びましょう。

Kindle Unlimitedの読み放題のものかUdemyでいくつかピックアップして購入したりすれば大丈夫です。

分かりやすければ、無料のYoutubeも利用するのも選択肢の1つとしてありです。

STEP2: 実際にハンズオン形式のものを真似していく

ハンズオンの講座を選んだら、最初から真似していきましょう。

分からないところは適宜ChatGPTやGoogle検索を利用して、調べながら少し時間をかけて取り組むのがおすすめです。

STEP3: ウェブアプリ作成またはポートフォリオ作成にReactを使う

React単体で使っても大丈夫ですが、Next.jsと一緒に使っても大丈夫です。

ただ、Next.jsと一緒に使うほうが使いやすいのはあります。

Reactを実際のアウトプットに取り入れて試行錯誤しながら機能を実装していくことで、Reactの網羅性と深さが向上します。（React力向上）

また、それに伴ってReact周辺のAPIやDBレイヤー、TypeScriptといった部分の能力が勝手に向上します。

厳密には、周辺の知識が向上しなければ、Reactが高いレベルでは書けるようになりません。

実際にハンズオンで学んだことをベースに、手を動かしながら何かを作っていきましょう。

STEP4: React周辺の情報を知っておく

QiitaやZennなどでReactに関するトピックを全体的に読むと、周辺の事柄のインプットができます。

例)

• グローバルステートのトレンド
• Fetchライブラリのトレンド
  • react-queryやswrなど

✅ Reactの勉強のコツ

1: ハンズオンのものを選んで真似する

ハンズオンのものを真似して、それを参考にしながら最初は真似していきましょう。

分からない部分は適宜調べながら、周辺の技術力も伸ばしていきながら、真似していくことが本当に重要です。

すごく時間がかかるところではありますが、着実に継続していくことが大事です。

2: 実際に成果物を出す

• ウェブアプリケーションをReactベースで作ってデプロイする
• ポートフォリオにReactを入れて作る

こういったアウトプットにReactをフロントエンドとして取り入れて、調べながらなんらかの機能を実装していくことが2つ目のコツです。

例えば、特に小さい範囲での実装だとこういった機能的な要件になります。

• ユーザー画像のアップロードと削除
• 非同期的ないいね機能の実装
• 基本的なデータ操作のCRUD機能を実装
  • 例: 掲示板の読み書き削除更新

✅ 目安の勉強期間

• メインで使う場合は、勉強に終わりが特にないです
  • ずっと使うことになります
• 市場（実務）で問題なく、かつ、メンバークラスとして十分に開発できるようになるまでの目安の期間
  • かなり早く習得できた場合でも最低で1年

✅ 具体的なアクション

• ハンズオン形式のReactの教材を1つ選ぶ
• ハンズオン形式のものを実際にやる
• 自分でウェブアプリやポートフォリオでReactを使う