プロになるためのReact勉強法!!〜入門編〜

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

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

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

目次

まずはJavaScriptの基礎から

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

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

あわせて読みたい
プロになるためのJavaScript勉強法!! フリーランスエンジニアの雄貴です! 近年のWebサービスではSPAと呼ばれる構成でUIをより良くしているものが増えており、それを実現するReactやVue.jsなどのJavaScript...

ザックリReactを理解!

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

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

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

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

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

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

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

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

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

あわせて読みたい
SPA(シングルページアプリケーション)とは?【モダンフロントの技術を紹介!】 フリーランスエンジニアの雄貴です! 近年、WEBサービス開発でモダンな技術として採用されているSPA Vue.jsやReactなどのモダンフロントの技術を使用しているのは分かる...

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

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リストを作れるようになる」ことの重要性をお話ししました。

あわせて読みたい
プロになるためのJavaScript勉強法!! フリーランスエンジニアの雄貴です! 近年のWebサービスではSPAと呼ばれる構成でUIをより良くしているものが増えており、それを実現するReactやVue.jsなどのJavaScript...

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入門

Udemy
モダンJavaScriptの基礎から始める挫折しないためのReact入門 Reactの習得に苦戦する理由は「JavaScript」への理解不足です。このコースではスムーズにReact開発のスタート地点に立てるように、モダンJavaScriptの動作の仕組みや概念、...

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

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

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

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

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

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

Udemy
React Hooks 入門 - HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得 Vue.js Firebase Docker Gatsby などを抑え、なんと受講生の37.2%が次に学びたいと注目度の高い React Hooks 。複雑な状態管理をシンプルに且つ美しく実装するためのフロン...

ファンクションコンポーネントを用いて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勉強法の入門編をご紹介しました!

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

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

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

TypeScript

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

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

あわせて読みたい
プロになるためのReact勉強法!!〜TypeScript編〜 フリーランスエンジニアの雄貴です! 前回React入門編として記事をまとめました!状態管理がReactの基礎でしたね! 今回はTypeScriptについてお話ししようと思います! ...

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

この記事を書いた人

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

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

エンジニアの心の相談室を毎週木曜実施中

コメント

コメントする

目次
閉じる