実務でコーダーの私がやったReactの勉強方法（Hooks対応）
1604 回閲覧されました
Reactは情報がどんどん新しくなっていますがネットの情報は古い物も多くあります。
2019年2月にReact Hooksが登場してから関数コンポーネントが主流でクラスコンポーネントがどんどん非推奨みたいな扱いになっていつ正式に非推奨になるか分からないです。
それなのに2020年を過ぎてもネットではクラスコンポーネントで解説している記事を見かけます、超有名なProgateですらクラスコンポーネントです。
こんな状況なのでどういう勉強をすればいいかが分からなかったのですが散々調べてReactを身に付けるまでの勉強方法について解説します。
2020年9月にReactの勉強を始めた私のスタートのスキルは↓です。
・WordPressでサイトを作るのとフックでサイトのカスタムを始めた段階(PHPはよく分かっていない)
・JavaScriptで簡単な操作はできてドットインストールでミニアプリを作る勉強をしている
・実務でLPのコーディングをひたすらしている
だからプログラミングに関しては実務未経験者とそんなに変わらないと思うので実務をまだしていない人は参考になると思います。
↓の人の記事を読んでから勉強方法を探したのですが他の言語のコードをガンガン書いている人の目線とこれからコードを書く人ではプログラムの理解力が違うので参考にした記事と勉強方法が異なる部分があります。
↓の記事を読んで「どこがいいんだろう？」と思う時もありました。
JavaScriptの勉強に関しては最初Progateで勉強しています、万が一JavaScriptの勉強をしていない人はProgateで勉強しましょう。
JavaScriptを勉強しないとReactの理解はできません。
ここからProgateのJavaScriptのページに飛べます。
目次
今からプログラミングを始める人
これからプログラミングの勉強を始める人で「プログラミング言語は何から始めればいいんだろう？」と思う人は結構いるはずです。
ネットを見ると情報があるけど実際は何をやればいいかが分からないはずです。
Twitterを見るとReact.jsを推す人がいますが初めて勉強する言語としては超難易度が高いです。
私は半年位勉強してあまりの難易度にVue.jsに切り替えました。
「React.jsを勉強するんだ〜」って思う人は冗談抜きにVue.jsをお勧めします。
Vue.jsは学習難易度が低いってネットを見ると情報がありますがJavaScriptがある程度使える人にとってですよ。
Vue.jsの中でJavaScriptを使うから0から始める人にとっては十分に難しいです。
WEB制作をやる人なら
プログラミングを勉強するのに何をやればいいかわからないからやってしまう人がいると思いますがWEB制作（WEBサイトを作る仕事）をやりたいならReact.jsやVue.jsをやっては絶対にダメですよ。
全く必要ないのでHTML・CSS（Sass）・JavaScript・WordPressサイトの作り方を勉強しましょう。
WEB開発をやる人なら
「React.jsは稼げる」っていうのを見かけますがReact.jsだけで仕事をする所って私が求人を探した限りそんなにない印象です。
バックエンドのPHPのフレームワークのLaravelやRUBYのフレームワークのRuby on railsと一緒に使う仕事は見ます。
だからReact.js単体でやるのではなくまずはPHPを使えるようにしてLaravelを使う際に必要になったらReact.jsを勉強するって考えた方が勉強的に無駄な時間が減ると思います。
マジでやめた方がいい勉強方法
みんなが知っているProgate
ProgateのReactの内容ですが現在は非推奨に近いです。
開発元のマイクロソフトは「クラスコンポーネントは非推奨にはしない」と言っているみたいですがReact Hooksがどんどん強くなっているので時間の問題で消えていく気がします。
Progateはクラスコンポーネントというやり方の解説をしていますが現在は関数コンポーネントが主流になっています。
私は1ヶ月位Progateで勉強し続けて非推奨になったのに気がついたので何度も何度もProgateで学習するのは意味がないです。
この記事を書いているのが2020年10月ですがその辺りでもクラスコンポーネントで解説している人がいます、恐らくProgateで勉強した人でしょう。
Progateと同じ位有名なドットインストール
Progateで勉強してからドットインストールで勉強しましたがこれは絶対にやめた方がいいです。
理由は定数など置いたりコンポーネントを置く時に何でもかんでも同じ名前で置いているので動画を見る回数が増えるほど訳が分からなくなりました。
それとクラスコンポーネントで説明しているので内容的にダメです。
Reactの公式チュートリアル
公式はクラスコンポーネントで説明しています。
Progateで勉強した後にクラスコンポーネントに慣れるのにならいいですが今は非推奨になっているからお勧めしません。
それと最後のチャプターがすごく難しいので私は全く理解ができなくて読むのを止めました。
Twitterでも難しいというツイートを見かけます。
reactチュートリアルやってるけど結構難しいぞ…‼︎
— まついSESエンジニア (@KosukeIT1) November 19, 2019
ここからチュートリアルに飛べます。
超有名なudemy
udemyは高評価の講座であっても必ず悪い評価を見た方がいいです、いい評価しかない講座は経験上怪しいです。
Reactの評価が高い講座で↓みたいに悪い書き込みがされているのがあります。
(良い点)
1.常に公式ドキュメントを参照してAPIを使い方を説明している。
(問題点)
1.アプリケーション実装の具体的な説明は良いが、その前段階の概要の説明がおぼつかない
2.「リファクタリング」の途中で（=動かない状態で）機能を追加したりしている。これではリファクタリングとは言えない
3.レクチャーのタイトルは「Hooks と Redux を組み合わせて～」となっているので、Redux ライブラリの説明もされると期待するかもしれないが、ほとんど Redux は登場しない。
4.ほとんど Redux ライブラリの機能は登場しないが、説明は Redux をベースにしているので混乱する
もっと良い点を挙げたいが、全体的に説明があやふやだと感じた。コードがあれば、コードを読んだり、実際に動かすことで、何を言っていたのかが分かる、という感じ。
Reactの講座はどれもこんな感じなのでどうせ返金することになって時間が無駄になるからudemyは使っていません。
最初に勉強するのは多分これが一番いいと思う
「どうしよう」と思ってネットで探していたらnoteで↓を見つけました。
同じ作者でクラスコンポーネントで解説した記事もありますが私は最初これで勉強したら途中で動かなくなったので著者のコードが間違っていると思い読むのを止めました。
コードをコピペしたけどダメでした。
【無料！】 Reactの基礎を学んでTODOアプリを作ろう！
そして有料で動かなくなったら怖いけど最新版の記事を読んだらちゃんと動きました。
コードエラーは確か二ヶ所ありましたが明らかに気がつくエラーなので自分で修正が可能です。
明らかに間違いが分かる所なので著者が確認をしていないのでしょう。
解説に関しては丁寧で難しい内容ではないし実装内容的に長いコードではないので挫折はないと思います。
金額が1980円で内容と比べると高いと思いますが初心者に最適なのが現状これしかないと思います。
【最新版・hooks対応】 Reactの基礎を学んでTODOアプリを作ろう！
見る前にまず↓の記事を読むと理解が深まると思います、無料で読めますが有料級に解説が詳しいです。
React入門チュートリアル (4) フォームとイベントハンドリング
React入門チュートリアル (4)は練習問題(1)(2)(3)があるのですが(3)は難しいのでひとまず飛ばした方がいいです。
次はこれで勉強した
↓で勉強したのですが無料です、ただ内容が最初に勉強した1980円の記事より少し難しいので最初にこれで勉強すると挫折する可能性があります。
同じTODOリストを作るのですが実装内容が多いのでコードが長く感じると思います。(私は長く感じました)
ただ丁寧に説明しているので次に読む内容としてはお勧めだと思いますが私はいきなり全部の実装をするのではなく自分の能力的に実装可能な所までをやりました。
記事の内容の質問はお気軽にどうぞと解説の最後に書いてありますが返事がないかもしれないです。
というのは私は以前Twitterでこの人にリプライを出して返事をくれてもよさそうな内容なのにいいねがついただけの塩対応だったからです。
偏見ですが分からないメソッドやオブジェクトがあっても質問はしないつもりで自分で調べた方がいいです。
React入門チュートリアル (5) ToDoアプリを作ってみよう
りあクトは個人的に合わなくて読んでない
ネットで見つけて調べたらめっちゃいいみたいなのを見たので無料版を読んだのですが文章がだーっと並んでいて吐き気がしたのと書いてある内容が難しすぎる印象だったので読むのを止めました。
合う人もいるかもしれないので興味がある人は体験版を読んでみるといいです。
りあクト！ TypeScriptで始めるつらくないReact開発 第3版【Ⅰ. 言語・環境編】
りあクト！ TypeScriptで始めるつらくないReact開発 第3版【Ⅱ. React基礎編】
りあクト！ TypeScriptで始めるつらくないReact開発 第3版【Ⅲ. React応用編】
REDUXを勉強すべきか悩んだ
Reactの学習、今からやるならこうするの人はREDUXを学んでいたのですが調べたらREDUXは大規模開発で小〜中規模開発ではReact Hooksを勉強した方がいいというのを見ました。
YouTubeでも「REDUXはぶっちゃけ大規模開発じゃないといらない、まずReactのコードがちゃんと書けるようになった方がいい」と言う人がいます。
その人はReactとREDUXを一緒に勉強するのは絶対ダメと言ってました。
だからReact hooksについて勉強しようと思いました。
↓の記事がおすすめでuseState、useEffectが基本というのをネットで見たのでそれを見ています。
他にもありますが必要になったら読めばいいと思います。
React hooksを基礎から理解する (useState編)
React hooksを基礎から理解する (useEffect編)
説明の中で「副作用」という言葉が出てきて「何だろう？」と思って探したら記事がありました、↓です。
現在Techpitの記事でひたすら勉強
そしてネットである人のReactの勉強はこうやったみたいな記事を読んでTechpitというサイトを知ってその中の「React × TypeScript でマークダウンエディタを作りながらモダンなフロントエンド開発に入門しよう！」で勉強したというのを見ました。
難易度は初心者用と書いてあったので説明通りにやっていったらまあエラーが多く出たり情報が古いという印象でした。
Gitの操作でエラーが出たときはこの記事を読みました。
npmエラーが出た時はこの記事を読みました。
致命的なエラーはないけど(気が付く)コード間違いもありました。
わからない所があったら質問すれば丁寧に答えてくれるみたいです、質問に答えている感じが丁寧そうでした。
著者がバックエンドのエンジニアで独学で苦労したから「初めて見た人が理解しやすい説明を心がけます」みたいに書いてありました。
でも実務未経験の人には難しいと感じると思います、他の言語を勉強した人にとっては理解しやすいのかもしれません。
私は何度も「え？理解できないけど、、」と思ってネットで調べています。
これで1980円は高いですが他に勉強方法がないからしょうがないです。
ただターミナルとGitを使ったやり方をしたことがないのでそういうのは私にとって貴重でした。
Techpitの注意点
Techpitは記事を買って勉強するのですが「1つ1つの記事の買い切り」か「学び放題コース」があります。
エンジニアが身勝手な人が多いのがよく分かるのですが記事の内容が間違っているのに質問に答えない人がめっちゃ多いです。
私はVue.jsも勉強しているのですがまともな記事は1つだけでした。
多分ですが返金がないので買い切り型だと運営にクレームが多くて学び放題コースができたんだと思います。
Twitterを見ると↓です。
#Techpit のVue.jsの講座でまともかつ当たりが1つしかない、、
どれも評価が低すぎるか評価自体がない、、
一応中身を見たけど説明が悪かったり質問に全く答えない講師しかいなくて教材が成立してない
クレームが多過ぎて買い切り型じゃない学び放題のプランができた気がする、、
— あべいさじ (@jonio1218) November 15, 2020
だからハズレ記事を買って後悔しないためにも「学び放題コース」がいいです。
月額2980円ですがほとんどの講座を勉強できるからコスパがいいです。
Reactの講座で勉強して内容に間違いがないか間違っていても返事が返ってくる講座は↓です。
スネークゲームを作って学ぶ React Hooks API での状態管理
↑に関しての解説の記事を書いてますが本当にオススメです。
React × TypeScript でマークダウンエディタを作りながらモダンなフロントエンド開発に入門しよう！
React学習用に私が書いた記事
かなり前に私が書いたのですがReact.jsの勉強用の記事がありますので記事のリンクを掲載します。
Reactは勉強のやり方に関する情報があまりなくて間違った勉強をすると時間が無駄になるのでこの解説がお役に立てると幸いです。