プロになるためのReact勉強法！！〜入門編〜

2020年12月11日2023年9月16日

URLをコピーしました！

フリーランスエンジニアの雄貴です！

JavaScriptフレームワークのなかで圧倒的にシェア率の高いReact!

しかし挫折率の高いフレームワークですので、現役フロントエンドエンジニアである私の知見から挫折しないReact習得のロードマップをご紹介しようと思います！

Youtubeではエンジニアの単価が上がる情報発信しています！

まずはJavaScriptの基礎から

Reactを学ぶ前に、まずJavaScriptの基本事項を理解しておく必要があります。

こちらの記事に勉強方法と必要なアウトプット、オススメ教材を紹介していますので、ぜひ実施した後にReactを学習してみてください！

ザックリReactを理解！

さてJavaScriptの基礎を理解できたので、早速Reactを勉強していきましょう！

まずはReactって何ができるのか？　そしてそれを実現するためにどんな機能があるのか？をザックリ学びましょう！

SPAの構築に最適なフレームワーク

ReactなどのJavaScriptフレームワークの最大のメリットと言えば、SPA(シングルページアプリケーション)を効率よく構築できる点です！

SPAは簡単に言うと、「サーバーのレスポンスを待つことなく画面遷移を実施できる」技術です。この機能により素早く画面遷移できます。

このSPAを実現している仕組みですが、実は「HTMLのbodyタグ以下の部分と入れ替えることで、画面遷移しているように見せる」ことで実現しています！

Reactでは画面のURLが変わるごとに、HTMLの表示部分のみを入れ替えています。

ではどのようにしてHTMLを部分的に変更しているのでしょう？

それを知るためには、まず「コンポーネント」と言うものについて理解する必要があります。

「コンポーネント」という概念

ReactではJavaScriptの中でHTMLを記載することができ、ボタンやヘッダー、フッターなど、画面の部品単位でパーツを作ることができます。

この部品単位のパーツのことを「コンポーネント」と呼んでおり、コンポーネントを組み合わせることで画面を構築していきます。

SPAでの画面遷移はこのコンポーネントを入れ替えることで実現しています。

このJavaScriptの中でHTMLを記載する方法を「jsx」と呼び、Reactではこの方法を用いてコンポーネントファイルを作成します。

また、以下の図のように1つのコンポーネントの中に、別のコンポーネントを導入することで画面を構築します。

この時、導入される側を親コンポーネントといい、導入する側を子コンポーネントと呼びます。

さらにコンポーネントはJavaScriptファイルとして作成するため、親コンポーネントのjsファイルの中に子コンポーネントのjsファイルをimportして導入することになります。

この時JavaScriptの機能である「ECMAモジュール」を使用しますので、しっかり復習しておきましょう！

更新したデータの箇所だけ変更する (仮想DOMについて)

Reactを用いるメリットの1つに「更新されたデータに影響のある箇所だけ変更される」点です。

Reactを用いていないWebサービスの場合、一部分のみの変更を実施する場合でも同期通信となり、画面全体を再描画しなければならず操作性は悪いです。(ajaxを用いて非同期通信もできますが、その場合複雑で保守性の悪いコードになりがちです。)

Reactを用いた場合、「更新されたデータに関連する画面のパーツのみを再描画する」ことができます。

よって同期通信で再描画したりせず、かつシンプルなコードで実現できます。

これは「仮想DOM (Virtual DOM)」を用いた差分レンダリングによって実現できます。

仮想DOMについては少し概念が難しいので、「変更前と変更後の画面データを持っていて、その差分を検知して変更分のみを更新する機能がある」と言うイメージをまず持っていただければと思います。

コンポーネントに状態を持つ (StateとProps)

仮想DOMによって効率よく画面のUIの変更が実施されることがわかりました。

それでは、「UIが変わった」というサインはどのように判断すれば良いでしょうか？

実はコンポーネントにはそれぞれデータ(状態)を持たすことができ、その状態の変更でUIが変更されたことを判断します。(Reactでは状態のことを「State」と呼びます。)

React Hooksの中の「useState」などの機能でコンポーネントに状態を定義できます。

またコンポーネントは入れ子にして構築することができるので、親コンポーネントで定義した状態を子コンポーネントへ渡したりできます。

この機能を「Props」と呼び、ReactにおいてStateとPropsは状態管理の基礎なのでしっかり理解しておく必要があります。

Reactにおいて状態管理は基礎中の基礎！！

ReactではStateやPropsを用いた状態管理によって快適なUIを実現しています。

コンポーネント内での状態の受け渡し方法はPropsの他に「Context API」という機能もあります。

また親子関係にないコンポーネントにも共通の状態を用いたい場面も出てくるので、それを実現した「Redux」という機能もあります。(Reduxのようなコンポーネント外で状態管理する機能を、「グローバルステート」や「ストア」と呼んだりします。)

このようにReactでは状態管理がとても大事なのです！

以前、JavaScriptの勉強法を紹介したこちらの記事で「JavaScriptだけでTodoリストを作れるようになる」ことの重要性をお話ししました。

Reactでは仮想DOMなど見えない部分でよしなにやってくれるので、実際に裏でどのように状態変化してUIを変更しているかイメージがつきにくいです。

なので、まずJavaScriptのみを用いて状態管理でUIを変更するアプリを実装し、データの流れからどのようにUIが変わっていくのかを理解することが大事なのです。

JavaScriptでTodoリストを作ったことがない方はReactを学ぶ前にぜひ実施してみてくださいね！

React入門編のアウトプット

入門編ではまず、Reactの状態管理について慣れていきましょう！

具体的にはJavaScriptのみで作成したTodoリストをReactで作り替えてみましょう！

まぁその前にReactの基礎をインプットしないとですよね(笑)

そのためのオススメ教材も選定していますので、この後紹介いたします！

インプットの前の注意点

オススメ教材の紹介の前に注意点があります。

実はReactにはコンポーネントを定義する方法が2種類あります。

クラスコンポーネント

ファンクションコンポーネント

クラスコンポーネントはコンポーネントをJavaScriptのクラスの機能を用いて定義する方法で、ファンクションコンポーネントはJavaScriptの関数として定義する方法です。

どちらの方法をとっても同様のUIを構築することができますが、現在(2020年12月時点)はファンクションコンポーネントを用いている現場が多数です。

元々Reactはクラスコンポーネントでしか状態を定義できていなかったので昔はクラスコンポーネントが主流でした。

しかし、ファンクションコンポーネントで用いることができるReact Hooksの登場で、一気にファンクションコンポーネントのシェアが拡大しました。

クラスコンポーネントのデメリットとして、データ処理が複雑になる、JavaScriptのthisを多用するので難易度が高いなど様々ありましたが、ファンクションコンポーネントとReact Hooksによってそのデメリットを解消することができました。

本来はクラスコンポーネントから学んで、React Hooksによって如何に便利になったかを実感した方がいいのですが、クラスコンポーネントのインプットは難易度が高いのです。

まずは入門としてReactがどんなものなのかを掴んで欲しいので、ファンクションコンポーネントの記法で学んでいきましょう！

クラスコンポーネントはReactに慣れてから勉強しても遅くはないです！

React入門のためのオススメ教材

インプット時の注意点をお話ししましたので、早速オススメ教材を紹介いたします！

【Udemy】モダンJavaSciptの基礎から始める挫折しないためのReact入門

現段階で、一番優しいReactの教材だと捉えています。

カリキュラムとして、JavaScriptの復習を実施してからReactの学習へと進むようになっています。

その際、フロントエンドの環境構築に必要な、npmやyarnなどのパッケージ管理ツール、webpackやbabelなどのモジュールバンドラーやトランスパイラなども説明されているので、モダンな環境にも触れられてます。

またJavaScriptで簡単なTodoリストを作成した後に、Reactで同様のTodoリストを作成する演習があるので、段階立てて理解できる工夫がされています。

React Hooksの機能である「useEffect」を用いた副作用(ライフサイクルフック)や、ReactのCSSライブラリである「CSS in JS」など、実務でよく使うスキルも紹介されています。

【Udemy】【はむ式】React Hooks 入門 – HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得

ファンクションコンポーネントを用いてReact Hooksの機能を実務レベルで理解することができる教材です。

React Hooksの機能である「useState」や「useEffect」、そしてContext APIを利用するための「useContext」の使用方法を学べます。

また「useReducer」や「useSelector」と言った機能を用いて、ReduxとReact Hooksを掛け合わせて使用する方法も学べて、実務レベルの状態管理方法を学べます。

Reduxについては詳細に説明していないのですぐには理解できないかもしれませんが、現段階ではイメージだけ掴めればOKです！

またこの教材はフロントの環境周りやReactの基本的な部分にフォーカスしてはいないので、まず1つ目に紹介した教材を実施した後に取り掛かることをオススメします。

いざアウトプット！

インプットもできたことなので、アウトプットをしていきましょう！

テーマは先ほど述べたJavaScriptのみで作成したTodoリストをReactで作り替えてみましょう！

状態管理の方法は初めはStateとPropsのみ使用した設計で作ってみて、自分自身でReactを触っていきましょう！

また慣れてきたらオススメ教材でインプットした「Context API」を取り入れてPropsなしのパターンでも作ってみると理解度は深まります。

Reduxに関してはこの段階で理解できなくても大丈夫なので、Reactの状態管理についてある程度慣れたら入門編はクリアです！

仕事で使えるレベルのアウトプット

上記アウトプットだけだと仕事で使えるレベルは難しいので

「最低限Reactの現場で仕事ができるレベル」まで成長することができるアウトプットのメニューをこちらのBrainで販売しています。

月単価100万以上の案件を複数経験したなかで、「最低限これだけできれば、どんな現場でもReactで仕事できるだろう」というものをまとめています。

どんなものか気になる方向けに無料で動画もありますので、ぜひご覧ください。

最後に

以上、React勉強法の入門編をご紹介しました！

上記内容を実施すればReactの状態管理についてイメージできてくるかと思います。

この段階ではまだSPAを構築できないのでそれは別途勉強法を記事にまとめます！

しかしSPAの前にまず慣れていきたいことがあります。それは。。

TypeScript

モダンなフロントエンドの現場ではよく導入されている言語です。

プロとしてReactを使うためには必須なので、次回キャッチアップしていきましょう！

高単価・高待遇を目指すエンジニアのメルマガもやってます。

月収100万円を稼ぐためのキャリア戦略なんかも話してるので
ご興味あれば。

期間限定のメルマガです。

ーーーーーーーーーーーーーーーーーーーー

僕は月商にして120万円を稼いでいますが、

エンジニアで月100万以上稼いでいるというと、

怪しいですよね。

お前は元々仕事できた、才能やセンスがあったんだろ？ともよく言われます。

ですが僕は最初からプログラミングが得意だったわけでもなければ、

仕事が得意だったわけでも

交渉や戦略も得意だったわけではありません。

そんな僕でも自信を得ることができて

エンジニアとして月100万以上頂ける程

実力をつけることができました。

経済的にも精神的にも豊かになってます。

結局正しい方向で努力するだけなんですよね。

誰だって稼げますし。

正しい方向で学べば誰でも自信を持って

エンジニアとして稼ぐことができる

僕雄貴がポンコツエンジニアから、月120万を稼げるようになった過程を下記の記事では公開しています。

>未経験から月商120万になれた雄貴の行動理念

ーーーーーーーーーーーーーーーーーーーー

【下記画像をクリックして、エンジニアのロードマップをGET！！】

>>詳細が気になる方はこちらをクリック<<

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

雄貴フリーランスエンジニア

【エンジニアの単価が上がる情報を発信中】
27歳未経験からIT業界へ→経験2年半で月商80万達成
React案件で初回契約月105万を実現

この著者の記事一覧へ

プロになるためのReact勉強法！！〜入門編〜

まずはJavaScriptの基礎から