まんじ
フリーランスのエンジニア

ドバイと日本に住んでるウェブのエンジニア。26の頃からわりとFIRE気味。
自作ワードプレステーマ
無料で使えるワードプレステーマ
プログラミング講座
まんじと学ぶ無料のPython講座まんじと学ぶ無料のJavaScript講座

昔やってた大学受験のサイト

不登校から早稲田へ

Reactを0からやる場合は何からやるのがいいのか

  • 2023/06/15
  • 2023/06/17
  1. ホーム >
  2. エンジニア >
  3. Reactを0からやる場合は何からやるのがいいのか
Reactを0からやる場合は何からやるのがいいのか

始めに

ういっす、まんじです。

今回はReactを0から勉強していく場合、どういう手順で勉強していくのがいいのか的な部分を書いていきます。

何かを作れる状態を目的地にして学習できるコンテンツか教材を用意して勉強する

最初からドキュメント読んでそのまま実装していくのは無理ゲーに近いので、最初に何かしらの教材を用意するのがおすすめです。

(ぼくの場合は何も学習教材なしに実務でやってました、今思うと微妙)

  • Kindleなどの安価な本
  • Udemyの動画
  • Youtubeの動画

特におすすめなのが、「何かを作れる状態にとりあえずなれる」という教材です。

具体的に言うなら、「ReactでTODOアプリをSPAで作れる」というような状態になれる手を動かしつつ作りながら学んでいけるものがおすすめできます。

逆に言うと、文法とかだけ最初から学んだり「仮想DOMとはウンタラなのでReactは軽量」みたいなことを丸暗記してもあまり意味がありません。

よく分からないけど、なんか気合いで作れる状態を目指しつつ、細かい枝葉の部分を作りながら埋めていく方法がおすすめです。

教材てきなものが決まればあとはそれにのっかってやるだけです。

  • Props
  • State
  • Reactのコンポーネントのライフサイクル

ここらへんを最初に学べると良い感じです。

言語は最初からTypeScriptではなくてJavaScriptでノリで作るのがおすすめかもしれません。

(最初からTypeScriptでもいいかもだけど…)

入門が終わったら少しずつ難易度を上げていく

次に学ぶ項目としては以下となります。

  • メモ化
  • フロントエンドCSSフレームワークを使いこなす
  • 使いまわせる的な目的でカスタムフックを入れる
  • ロジックを分離する的な意味あいでフックに切り出す
  • 状態管理ライブラリを入れる
  • バックエンドのAPIを自分で用意してつなぐ
  • フェッチした結果をキャッシュするライブラリを入れる
  • Next.jsなどのReactフレームワークを入れる
  • Socketを使ってリアルタイム通信してみる
  • Linterを入れる
  • フロントエンドアーキテクチャてきなものを理解したり使ってみる
  • Reactの単体テストを書けるっちゃ書ける
  • E2Eテストを書けるっちゃ書ける

具体的にやるべきこととしては、実務でReactを書くか自分の個人開発で使うかのどちらかになります。

個人的には実務で使えるほうが技術力や全体的な知見が深まるので、実務に入ってしまうのがおすすめです。

どうしても実務は無理な場合には、個人開発で使っていくと良いと思います。

ぼくは実務で11ヶ月ぐらい書いてから、その実務でやった内容の全体的な知見をまるっと真似して、個人開発で使ってました。

実務+個人開発でやって、歴で数年の優秀なエンジニアやGAFAMにいたエンジニアからもReactの初歩的な部分に関してコードレビューで指摘を受けることはほぼほぼないです。(たまにある…?か…?いや、ないはず…)

あと、ここらへんの技術力になってくると個人でウェブアプリをつくてマネタイズできるだけの技術力だけはついてきてると思います。

個人でウェブアプリを作って利益を出す場合に問題になるのは、技術力よりも商品開発やマネタイズや集客の部分なんですが、ここらへんは別の記事に書いています。

ということで、ここらへんまでくればわりかし普通にReactで働けるし、自分でもそれなりに不自由なく使えてる状態になります。

さらにフロントエンドの技術力を磨くには

ぶっちゃけここからはぼくは知らんのですが、以下らへんが次のステップだと思います。

  • バックエンドもバックエンド担当エンジニアぐらい書けるようにする
    • (フロントエンドの技術ではないけど…)
  • SocketやwebRTCとかなんか難しそうな題材をテーマに開発する
  • めっちゃリッチなUIの開発をする
  • ライブラリの開発をする
  • 自分よりも明らかにフロントエンドができる人に見てもらう
  • とりあえず惰性で実務をする
  • その他、VueやAngularとかもやってみる
    • ↑ウーン…?

個人的には、めっちゃリッチなUIとかバックエンドも担当するとかが良い気がします。

もはやReactの領域は出てる気もするので、ここらへんにお話はとどめておきたいと思います。

まとめ

Reactは最初が結構難しい気がしますが、少し慣れてくると似たようなことが多くなってきます。

早い人で半年~1年、まあまあ早い人で1.5年ぐらいガッツリめにやるとそれなりに使えるようになる気がします。

使えるのレベルがどの程度を指すかは人によりますけど、実務入っても普通にやっていけるんでね?ぐらいのレベル感です。

プログラミング入門者〜初心者でReactをやる場合は、やること決めたら、あとは気合い。

あと、多分最初は難しいか意味不明と感じる人が大半だと思います。

まんじ
フリーランスのエンジニア

ドバイと日本に住んでるウェブのエンジニア。26の頃からわりとFIRE気味。
自作ワードプレステーマ
無料で使えるワードプレステーマ
プログラミング講座
まんじと学ぶ無料のPython講座まんじと学ぶ無料のJavaScript講座

昔やってた大学受験のサイト

不登校から早稲田へ