React.js

WEB開発未経験のコーダーがやった真似できるReactの勉強方法

WEB開発未経験のコーダーがやった真似できるReactの勉強方法

みなさんこんにちは、からんです。

Reactは情報がどんどん新しくなっていますがネットの情報は古い物も多くあります。

2019年2月にReact Hooksが登場してから関数コンポーネントが主流でクラスコンポーネントがどんどん非推奨みたいな扱いになっていつ正式に非推奨になるか分からないです。

それなのに2020年を過ぎてもネットではクラスコンポーネントで解説している記事を見かけます、超有名なProgateですらクラスコンポーネントです。

こんな状況なのでどういう勉強をすればいいかが分からなかったのですが散々調べてReactを身に付けるまでの勉強方法について解説します。

なお、やってはいけない勉強方法もあるのでそれも解説します。

私の勉強開始時のスキル

2020年9月にReactの勉強を始めた私のスタートのスキルは↓です。

・WordPressでサイトを作るのとフックでサイトのカスタムを始めた段階(PHPはよく分かっていない)

・JavaScriptで簡単な操作はできてドットインストールでミニアプリを作る勉強をしている

・実務でLPのコーディングをひたすらしている

だからプログラミングに関しては実務未経験者とそんなに変わらないと思うので実務をまだしていない人は参考になると思います。

今からプログラミングの勉強を始める人

TwitterなどのSNSを見るといきなりReactの勉強を開始する人を見かけますがJavaScriptを勉強してないと理解するのは無理です。

だからJavaScriptを全く触ったことがないなら Progateなどで勉強してからReactの勉強をしましょう。

ここからProgateのJavaScriptのページに飛べます。

私がプログラミングを始めた時は何も分からずいきなりJavaScriptとReactの勉強を並行してやったのですがReactが全く理解できなくやめました。

特にWEB制作をするなら

ヘッドレスサイトと言ってバックエンドにWordPressを使いフロントエンドにReactやVueを使った作成方法があるのですが難易度が高すぎるのでReactでもJavaScriptでもなくjQueryをやりましょう。

VueかReactか

JavaScriptを触って次はVueかReactをやろうと思っている人は恐らくReactを勉強した方がいいです。

この記事を書いているのは2023年12月ですが私がReactを触り始めたのは2021年でした。

あまりに難しくてVueをやったらやりやすくてVueに重点を置いて勉強しましたがその時のVueのバージョンは2でした。

VueはReactを意識していますがバージョン3になってかなり使いにくくなりました。

フレームワークのNuxt.jsのバージョン3はTypeScriptが標準装備になって「無理でしょ」って感じでした。

ネットを調べるとどうやらvueはアップグレードに失敗したみたいで「ReactみたいになるならもうReactでいいんじゃないの?」ってなっているみたいです。

だから今から勉強するなら私はReactをお勧めします。

バックエンドをまだやってないなら

私が勉強を始めた時にネットで情報を見つけることができなかったのですがバックエンドを既に習得していてフロントエンドにReactを使おうとして勉強するならいいのですがフロントエンドだけを勉強しようとしている状態ならReactではなくバックエンドの勉強を先にした方がいいです。

Reactだけできても仕事がない可能性が高いからです。

信用できなかったら求人で検索すればフロントエンドができるだけではほぼ仕事がないので分かります。

使わない方がいいサイト

私が使って「失敗した〜」と思ったサイトが色々とあるので紹介します。

Progate

Progateはクラスコンポーネントというやり方で作成していく解説をしていますが現在は関数コンポーネントが主流になっています。

関数コンポーネントになると記述の仕方が変わるのでクラスコンポーネントを勉強していると記述が違い訳が分からなくなります。

いまだに関数コンポーネントの解説に変わらないので内容を変える気がないんだと思います。

udemy

評価が高い講座ほど評価が1や2がないか調べた方がいいです。

なかったとしても受講したら説明がよく分からなかった・解説の通りにやっているのになぜかエラーになり原因がバージョンによるものでどうしようもなくなってやめたとなる可能性が高い印象です。

受講をやめたら勉強に費やした時間が無駄になるので私は最終手段と考えて使っています。

りあクト

ネットで見つけて調べたらめっちゃいいみたいなのを見たので無料版を読んだのですが文章がだーっと並んでいて吐き気がしたのと書いてある内容が難しすぎる印象だったので読むのを止めました。

合う人もいるかもしれないので興味がある人は体験版を読んでみるといいです。

りあクト! TypeScriptで始めるつらくないReact開発 第3版【Ⅰ. 言語・環境編】

りあクト! TypeScriptで始めるつらくないReact開発 第3版【Ⅱ. React基礎編】

りあクト! TypeScriptで始めるつらくないReact開発 第3版【Ⅲ. React応用編】

1.最初に勉強するなら多分これ

みんなどう勉強するのか分からないですが今から勉強しても下記のサイトを最初に勉強するのをお勧めします。

React入門チュートリアル (3) 属性と状態

React入門チュートリアル (4) フォームとイベントハンドリング

React入門チュートリアル (4)は練習問題(1)(2)(3)があるのですが(3)は難しいのでひとまず飛ばした方がいいです。

そして下記のサイトは有料ですがお勧めです。

【最新版・hooks対応】 Reactの基礎を学んでTODOアプリを作ろう!

2.次に勉強した情報

下記のサイトを使いました。

React入門チュートリアル (5) ToDoアプリを作ってみよう

ただ内容が最初に勉強した1980円の記事より少し難しいので最初にこれで勉強すると挫折する可能性があります。

同じTODOリストを作るのですが実装内容が多いのでコードが長く感じると思います。(私は長く感じました)

ただ丁寧に説明しているので次に読む内容としてはお勧めだと思いますが私はいきなり全部の実装をするのではなく自分の能力的に実装可能な所までをやりました。

3.そしてhooksを勉強する

ReactにはREDUXというのがありますがこれはReactに慣れるまでは絶対に勉強しない方がいいみたいです。

YouTubeでエンジニアがそれについて解説していました。

だからhooksについて勉強しようと思いました。

下記の記事がおすすめでuseState、useEffectが基本というのをネットで見たのでそれを見ています。

他にもありますが必要になったら読めばいいと思います。

React hooksを基礎から理解する (useState編)

React hooksを基礎から理解する (useEffect編)

説明の中で「副作用」という言葉が出てきて「何だろう?」と思って探したら記事がありました、下記です。

React入門チュートリアル (6) 副作用

4.Techpitを使う

Techpitはエンジニアが書いた記事を購入して勉強して分からない部分があったら記事を書いたエンジニアに質問できるのですが回答がなかったり解説が間違いだらけの記事があってudemyみたいに使いにくいです。

私がこのサイトで勉強してReactでいいなと思ったのは下記の記事です。

スネークゲーム 🐍 を作って学ぶ React Hooks API での状態管理

内容は難しいですが講師に質問して返事がちゃんと返ってくるのと解説に間違いがないので何度も繰り返せばスキルは上がると思います。

ここまで勉強したらあとはネットの情報で何とかなると思います。