【初心者の方へ】難しすぎるReactを挫折しない学習方法3選

• reactを学習しているけど、難しすぎて挫折しそう
• Progateや公式チュートリアルがそもそも難しすぎる
• なんでこんなに難しいreactを学習しないといけないんだろう
• 難しい単語が多すぎて、わからないことがわからない
• React...？Redux...？

巷にあふれるReact関連の情報は 『エンジニア目線過ぎて、初心者に寄り添ったものが少ない』 です。初心者がReactを習得するには 『学ぶ内容を取捨選択』 しなくてはいけません。

実は私も数ヶ月前にはReactを挫折しかけていました。ですがReactの学習方法に気づいて乗り越えることができ、今では実務でReactのコードをバリバリ書けるまでに成長できました。

この記事では Reactが難しすぎる原因 から 『難しすぎるReactを挫折せず習得できる学習方法』 をご紹介します。

【初心者の方へ】難しすぎるReactを挫折しない学習方法3選

• Progate・公式チュートリアルは使用しない
• 書籍やネットではなく、動画学習で手を動かす
• メンターについてもらう or プログラミングスクールを利用する

先に結論を書いてしまうと、上記3つの学習方法を実践してください。それぞれ詳しく解説をしていきます。

Reactが難しすぎる3つの理由

• 開発の環境構築が必要だから
• JavaScriptの理解が必須だから
• 学習方法を間違っているから

Reactが難しすぎる原因を知っておくことで、スムーズにReactを学び始める事ができます。主な理由は上記の3つです。それぞれ詳しく解説します。

開発の環境構築が必要だから

普段、Progateで学習をしていたり、 HTML / CSS / JavaScript を書いていた方が初めて行うことになるのが『環境構築』です。

Reactを学び始めたいのに、Reactを学ぶまでに行き着かないため『難しすぎる』と思ってしまうケースがあります。

プロの開発現場でも必ず環境構築を行うため、避けては通れない道です。以下で紹介する記事の手順通りに行えば、環境構築を行うことができるはずです。

Reactの分かりやすい環境構築はこちらの記事で解説しています。

【2022年10月最新】初心者でも分かりやすいReactの始め方

JavaScriptの理解が必須だから

Reactが難しすぎると思ってしまう原因の一つは 『JavaScriptがわからないから』 です。

JavaScriptは奥深い言語です。Webサイトに動きをつけるために『JQuery』をコピペで済ませて満足している程度では理解したとは言えません。

Reactは『JavaScriptのライブラリ』であり、 JavaScriptを理解していないと必ずつまづいてしまいます。

JavaScriptが理解不足だと感じる方は、こちらの教材で学び直すことをオススメします。

【2022年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）

学習方法を間違っているから

• Progate・React公式チュートリアルで学んでいる
• 頭で覚えようとしすぎて、手を動かしていない
• ReactとReduxを同時に学ぼうとしている

Reactが難しすぎる原因の殆どは『学習方法を間違っている場合』が多いです。この記事の本題である『難しすぎるReactの正しい学習方法』をそれぞれ詳しく解説します。

【難しすぎるReactの正しい学習方法①】 Progate・公式ドキュメントは使用しない

ProgateやReact公式チュートリアルで学び始めてはいけません。 理由は情報が古すぎるためです。

Reactの記述方法に『クラスコンポーネント』と『関数コンポーネント』の2種類がありますが、シンプルで記述量が少なく、直感的に理解がしやすい『関数コンポーネント』が現在の主流です。

しかしながら、ProgateやReact公式チュートリアルでは、分かりにくい『クラスコンポーネント』で紹介されています。これが『Reactが難しすぎる』と感じてしまう原因の一つです。

これから学びはじめる方々は、 必ず『関数コンポーネント』の情報か確認するようにしましょう。

関数コンポーネントが理解しやすい理由は『コードが短くて済む』から

関数コンポーネントが分かりやすい理由は 『コードが短くて済む』 からです。コードが短いとそれだけで『書く側』も書きやすく、『読む側』も理解しやすいです。

また、Reactの公式が『React Hooks』という『コードを簡単に記載するパーツ群』の開発とサポートに力を入れており、『クラスコンポーネント』でしか出来なかったことが『関数コンポーネント』でもできるようになりました。

現在では、 Hooksを用いた関数コンポーネントで開発をすることが推奨 されています。

実際に同じ挙動をする『クラスコンポーネント』と『関数コンポーネント』のプログラムを比べてみると、コード量の違いが明らかです。

下記は画面上に表示されたボタンを押すと、数字が1ずつカウントアップしていくプログラムです。

クラスコンポーネントの場合

import { Component } from 'react'

class ClassComponent extends Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
 }

 render() {
   return (
     <div>
       <p>count: {this.state.count} times</p>
       <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        クリックで+1
       </button>
     </div>
   );
 }

関数コンポーネントの場合

import { useState } from 'react'

const FunctionalComponent = () => {
 const [count, setCount] = useState(0);

 return (
   <div>
     <p>count: {count}</p>
     <button onClick={() => setCount(count + 1)}>クリックで+1</button>
   </div>
 );
};

React Hooksは2019年2月に登場しているため、それ以前の情報には注意しましょう。

Reduxは後回しで良い

もうひとつReactをわかりにくくしている存在が『Redux』です。Reduxとは状態管理をするためのフレームワークです。

Reactは『State』という状態を変更することで画面の表示を切り替えたり、値を変更したりします。大規模なアプリになると、stateの数も膨大になり複雑になってしまうため、stateを1箇所で管理する必要があり、Reduxを使用します。

デファクトスタンダード（事実上の標準）になっているReduxですが、かなり複雑なため習得が難しいです。 『Reduxが難しすぎるからReactを挫折してしまった』 という話も聞いたことがあるぐらいです。

しかし、Reduxが必要なのは、大規模なアプリケーション開発のときだけで、 入門段階の小規模なアプリケーションの開発では不要です。

stateの管理も『React Hooks』の登場によって、簡潔に行えるようになりました。『難しすぎるRedux』は後回しにして問題ありませんので、Reactについての学習を進めましょう。

【難しすぎるReactの正しい学習方法②】 書籍やネットではなく、動画学習で手を動かす

本や動画を見て、まず専門用語や構文を暗記しようとしてはいけません。『プログラムの動き方』を確認して、自分の手で動かしてみることが正しい学習方法です。

実際の開発現場でも丸暗記している人はおらず、 わからなくなったら『ググり』 ます。教科書持ち込み可能なテストだと思ってもらえれば、少しは気が楽になるのではないでしょうか。

オススメな教材は手を動かしやすい『ハンズオン形式の動画教材』です。つまづきやすい環境構築から、具体的なアプリ開発の仕方まで体系的に教えてくれる動画であれば、学習を終える頃には、かなりレベルアップが出来ているはずです。

オススメな動画教材はUdemyで、とにかく 『理解速度とコスパのバランスがいい』 コースが多いです。以下の記事で私が実際に受講しオススメだったコースをまとめています。ぜひ自分にあったコースを受講してみてください。

【失敗させない】React初心者が選ぶUdemyおすすめ教材5選+1

【難しすぎるReactの正しい学習方法③】メンターについてもらう or プログラミングスクールを利用する

難しすぎるReactを独学で学びきろうとすると挫折しやすいです。どうしてもわからないところは早めに質問できる環境を作っておくことをオススメします。

つまづき解消にはココナラがおすすめです。

ココナラにはReactのつまづき解消を行ってくれるメンターもいるため、どうしてもわからないところがあった場合に利用してみてください。いざというときのために、無料登録だけでも済ませておくと良いかもしれません。

無料会員登録はこちら

独学で学ぶのに自信がなくなったら、プログラミングスクールも視野に。

また、やはり独学では難しいと思ってしまった方や、最効率でReactを習得したい方にはプログラミングスクールも視野に入れるほうが良いと思います。

プログラミングスクールの良さは、未経験からでもフロントエンドエンジニアになれるスキルが身につくことです。また就職のためのサポートが充実しており多くの場合、就職に直結します。

フロントエンドエンジニアになりたくて、Reactを学習しているという方にはピッタリだと思います。プログラミングスクールは高額なイメージもありますが、中にはサブスク制で通いやすいものもありますので、詳細を確認してみても良いかもしれません。

フロントエンドエンジニア特化のプログラミングスクールはこちらの記事で紹介しています。

【フロントエンドエンジニア特化】おすすめプログラミングスクール3選

なぜReactを学ぶ必要があるのか

• フロントエンドエンジニアになりたいから
• Webアプリが作りたいから
• いずれReactNativeでスマホアプリの開発がしたいから

ReactはJavaScriptのフレームワークの中でも世界的な人気を誇っており、学習コストは高くても、それに見合うハイレベルなコンテンツを作ることができます。

フロントエンドエンジニアに転職する際にはJavaScriptのフレームワークの習得は必須とも言われています。

ユーザビリティが高いWebサービスを作りたいから

作りたいコンテンツが以下のようなものであるなら、Reactは学び続けるべきです。

• サクサク動いて、ユーザーが快適なページが作りたい
• APIからデータを取得し、高速にページの切り替えができる『SPA』を作りたい
• 流行のUIを手軽に扱いたい

作りたいコンテンツのイメージが固まっている方も、そうでない方も参考になると思いますので、こちらの教材を貼っておきます。気になる方は是非チェックしてみてください。

3つのアプリの作り方を学べてコスパ高め

【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座

より実践的な内容で最先端のWebアプリが作れる

ReactでTrelloクローンアプリケーションを作ってReactをマスターしよう！

フロントエンドエンジニアになりたいから

フロントエンドエンジニアは近年『稼げる』と話題の職業で、市場のニーズも高いです。経済産業省が2017年に発表した IT関連産業の給与等に関する実態調査結果でもフロントエンドエンジニアを含むWebエンジニアの年収平均は592.2万円と高水準です。

職業としてフロントエンドエンジニアを目指す場合は、戦略的に動くべきです。プログラミングスクールの卒業生はレベルが高いポートフォリオを作っている場合もあるため、趣味程度に開発を進めるだけでは負けてしまうかもしれません。

以下の記事で未経験からフロントエンドエンジニアになるための方法をまとめてみました。是非参考にしてみてください。

未経験からフロントエンドエンジニアになりたい方へ

未経験からフロントエンドエンジニアに転職するための戦略

まとめ

• Progate・公式ドキュメントは使用しない
• 書籍やネットではなく、動画学習で手を動かす
• メンターについてもらう or プログラミングスクールを利用する

経済産業省の IT関連産業の給与等に関する実態調査結果を見ると2017年時点で、Webエンジニアの年収平均は592.2万円とかなり高く、たしかに稼げる職業であることがわかります。Reactを習得すれば平均年収は間違いなく超えてきそうですので、挫折してしまうのはもったいないですね。

私がReact初心者のときに知りたかった学習方法をまとめてみました。参考になれば幸いです。