【永久保存版】0からReactを勉強するならこのロードマップに従え！

![bandicam 2023-10-04 20-02-32-459.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/120ab8c6-eb3f-f854-1799-3528189e95b9.jpeg)

# 最新版を更新しました

https://qiita.com/Sicut_study/items/7d8c6f309dddda1a3961

# はじめに

<h3>こんにちは！！@Sicut_studyです！</h3>

最近フロントエンドを学ぶ機会が多く、色々試してみて今後 **<font color="red">React</font>** が選ばれる場面が増えるのかなと思いました。

そこで初学者の方が`JavaScript`の次に学ぶ言語の選択肢になりやすいのではないかと考え今回の記事を作成しました。

私自身、**2022年9月**に**独学**で **<font color="red">React</font>** を学び始めました。

最初JavaScriptもままならない状態から始めたのですが、Reactを学ぶことでピースがうまくはまってJavaScriptをより理解できましたし、Reactができるようになることで個人開発で多くのサービスが作れるようになりました。

そんな私が去年の自分にアドバイスするなら、
<font color="red"><h3>0からReactを学ぶならこのロードマップで勉強しろ</h3></font>
と言いいます。
Reactを学ぶことで
<font color="blue"><h6>勉強することが楽しい</h6></font>
↓
<font color="blue"><h6>モノを作ることが楽しい</h6></font>
というマインドに変われたので、ぜひ初学者の方にも同じ体験をしていただきたいです。


「こうすると早く学べたよ」など他にもあるかと思いますのでぜひコメントいただけたら、返信させていただきます！

# この記事の対象者

- Reactに興味があるけど手を出せていない人
- JavaScriptの知見が多少ある方
- 勉強方法がわからない方

# ロードマップ

このロードマップで最後目指すところは、**Reactを利用して個人開発が進められる** 状態です。
そして個人的にとても大事だと思っているのは、

<font color="red"><h6>とにかく実践で学習していくこと</h6></font>

これにつきます。
エンジニアになるときに現場に入って学ぶのが一番成長する理論と同じで、とにかくコンフォートゾーンの外側で学び続けるのが最速で成長するのに不可欠です。

そこを意識してロードマップを紹介します。

<h6>1. Reactの全体をハンズオンで把握する</h6>
<h6>2. Reactで簡単なアプリを作成する</h6>
<h6>3. ReactでTODOアプリを作成する</h6>
<h6>4. Reactで簡単な個人開発を行う</h6>

この4ステップを行うだけで個人的には好きなサービスを作れるだけの基礎力がつくと思っています。
なので、これから学ぼうとしている人はそれぞれのステップは着実にこなして、**4ステップ目** が終わったら、この記事に戻ってきてもらって **結果や感想をコメント** して頂けたらと思います。

## 1. Reactの全体をハンズオンで把握する

新しい言語を学ぶ際には、公式が用意している**チュートリアル**や書籍/udemyなどの**ハンズオン**で学ぶのが早いと思います。

実際に、言語の機能だけ説明されても**どこで使える機能**かがイメージつかないと学びは薄くなります。
ハンズオンでは、高頻度で利用する機能だけが説明されていますし、実際の利用イメージもすぐにつくのでよいです。
で
<font color="red"><h4>ハンズオンを最後まで理解してやりきる</h4></font>

ここを目指して勉強してみてほしいです。
このステップでたくさん教材をやってから2つ目のステップに行こうとする人がいますが(過去の私)、最速を目指すならその考えはやめてください。とにかく実践で学ぶので1,2個のコンテンツをやったら次へ進めます。

このステップでおすすめの教材はこちらです。

https://www.udemy.com/course/modern_javascipt_react_beginner/

https://www.udemy.com/course/react_stepup/

この2つを**合計2日**でやりきるのが良いと思います。

## 2. Reactで簡単なアプリを作成する

1で学んだことを生かして実際にアプリを作成して理解してないところを理解するステップです。
ここでは環境構築から行います。1でやったことを振り返って(動画を見返して)、進めていきます。

ここで作るアプリは以下を作成してください

###### 作成するもの : 画像ランダム表示サイト

[https://source.unsplash.com/random](https://source.unsplash.com/random)

にアクセスするとランダムで`Unsplash`から画像を取得できるので画像を表示する

ここで**ボタン**をクリックすると**画像が切り替わる**

![1696455361489.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/0bf20b13-9982-53ed-af51-b74431db056f.gif)

たったこれだけのアプリを作成します。
最初に大きなアプリケーションを作ろうとすると、知識不足経験不足でつくりきるのは大変なので、アプリ自体の作成難易度を極端に落としたものを作ります。

ちなみにこのお題1つ躓きポイントがあるのでぜひ頑張ってみてください！

ここでのアプリは若干実用性には欠けますが
- ランダムの画像にボケて共有するSNS
- ランダムな画像を毎日プロフィールの写真に設定してくれる

などのすこし面白そうなアプリに学んだことを応用することは可能かと思います。

## 3. ReactでTODOアプリを作成する

ここで私の大好きなTODOアプリの作成を行います。

https://qiita.com/Sicut_study/items/a5ecc4fb656cc1f56bf6

実は、ステップ1ですでにTODOアプリは作成済みなので、それを思い出しながらここでは作っていきます。
なるべく自分で考えてわからないところは動画をみて作成していください。

単にTODOアプリを作るのでは **動画を全部真似ればできてしまう** ので以下の仕様で作成するのをおすすめします。

###### 作成するもの : 勉強記録アプリ

ユーザーは以下の項目をアプリに記録できます。
- 勉強したこと/もの (タイトル)
- 勉強した内容 (詳細)
- 勉強した日付

動画で作成したものにちょっと手を加えるだけですが、手を動かして勉強するならすこし難易度があがりよいかと思います。

![1696455571703.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/e4de27e7-cccb-2e84-bd05-21e6616f687e.gif)

個人的にはここで動画で学んだ、`styled-components`であったり、`ChakuraUI`などを利用して見た目をリッチにすることも学んでいただけたら良いかなと思います。

## 4. Reactで簡単な個人開発を行う

ここまできたらやっと実力試しの簡単な個人開発を1つ行います。
テーマは自由ですが以下のルールを **絶対守ってください**

###### 1. 1週間以内にできる規模のものを作る
###### 2. そのアプリをちょっと実用性のあるものにする (何か課題を解決してくれる)
###### 3. 極力いままで学んだことを生かして作る (新しい技術を使う試みは控える)

1は**作りきる**というのが最速に学ぶ上で大切だと思っているから
2は技術を学ぶ楽しさ→モノをつくる楽しさに移行してほしいから
3は作りきるために新しいことでつまづいてほしくないから

このような理由です。
またこのフェーズになったら実装の壁打ちを **ChatGPT** と行ったり、**Github Copilot**を活用したりしてよいかなと思っています。コードの意味を理解したうえで活用していきましょう

以下は私がステップ4で作成した例になるので、作るものが浮かばない方は同じものを作ってみてください
(一部バックエンドもありますが、そこは静的にデータをReactでもってみてください)

https://qiita.com/Sicut_study/items/babc9c5aa13d983312a8

https://qiita.com/Sicut_study/items/d45f4e1ac0ee79171444

https://qiita.com/Sicut_study/items/3e40bc1d996427ecc421

# 学ぶ時のマインドセット

ここまで4つのステップで最速で学ぶロードマップを説明してきました

#### <font color="red">正直この4つのステップはかなり大変です</font>

これはコンフォートゾーンの外側のギリギリ達成できる目標を常に設定し続けているからです
しかし、本当に**React**を**0から**学びたいのであれば、この辛さを乗り越えて**最速**で使えるようになってほしいと思っております。

Reactが使えるようになると個人開発の幅がかなり広がります。
個人的には作りたいものが**サクッと**作れるようになりますし、アイデアを形にして自分で**ビジネス**を始めることもできるようになります

なんとなくの感覚ですが、**副業**で触っている人も多い気もします。

#### <font color="red">なぜ自分がReactを学んでみたいのか

これをこの4ステップを行う期間では考えながら、勉強することできっと最後までやり抜けるはずです。
また、1ステップごとに達成することができたらきっと**達成感**を感じれると思いますので、ここまで読んだあなたはぜひチャレンジしてみてください。

こちらの記事にコメントしていただいたり、[Twiiter](https://twitter.com/Sicut_study)でリプライいただけたら私もサポートできればと思っていますので、お気軽にご連絡ください！


# おわりに

この記事のテイストで今後多くの人にみてもらえるような記事を作成できればと思っております。
ここまで読んでいただけた方はぜひ**いいね**と**ストック**よろしくお願いします。

また @Sicut_study をフォローいただけるととてもうれしく思います。

<h5>少し宣伝します🔥🔥🔥🔥🔥</h5>

これからエンジニアになろうとしている人を本気でコーチングして3か月の期間で立派なエンジニアにするようなチャレンジをしてみたいなと考えております。

もし、本気でエンジニアを目指してコーチングを受けてみたいという方がいれば、[Twitter](https://twitter.com/Sicut_study)に「プログラミング教えてほしいです」みたいなリプライ送っていただけたらなと思います！！

以上です。
今週もプログラミング頑張りましょう！

![bandicam 2023-10-04 20-58-54-525.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/f41a0065-b23e-1895-da22-66bf0e48c5fb.jpeg)

# おすすめ記事

https://qiita.com/Sicut_study/items/ac2d791b439aa7fcae30

# 参考

https://www.udemy.com/course/modern_javascipt_react_beginner/

https://www.udemy.com/course/react_stepup/

https://source.unsplash.com/random