はじめに

この記事はポートフォリオなどに向けて、ReactやTypeScriptを学習したいと考えている初学者の皆さんに向けたものです。

ReactとTypeScriptって難しそうというイメージを持っている方もいるのではないでしょうか？

私も転職活動時、ReactとTypeScriptを使ったポートフォリオを作成しました。そんな私の経験からお話しすると適切に勉強すればポートフォリオを作成できるレベルに到達するのは難しくないと考えています。なぜなら、優れた学習教材がたくさんあるからです。

以下では私がどのようにReactとTypeScriptを勉強したかと、おすすめの学習手順などをシェアしていきたいなと思っています。ReactやTypeScriptを勉強してみたいなと考えているが、二の足を踏んでいる方や勉強に困っている方の助けになれば幸いです。

Reactをどう学んだか

学習の軌跡

0. React公式

公式サイトは学習全体を通して読んできたので、学習の前提となる資料ということでナンバー0を与えました。日本語で読みやすいところもあるのですが、一部わかりづらい訳になっているところもあります。そういったところは英語で読むことをお勧めします。

最初は「MAIN CONCEPTS」というところを読み進めていき、基本的な用語や概念を掴んでおくのが大事です。「ADVANCED GUIDES」あたりは最初の頃、なかなか頭に入ってこないと思うでキツければ読まなくていいと思います。いずれ学習を進めていくうちに、読む必要性が出てきて戻ってくることになると思うので、、

ちなみにですが、propsとstateがごっちゃになってよくわからなくなったときに、公式の以下の部分を読んですごい参考になりました。

1. Udemy「モダンJavaScriptの基礎から始める挫折しないためのReact入門」

React学習の難易度を劇的に下げてくれているのがじゃけぇさんのUdemyであることに間違いありません。

JavaScriptの基礎から教えてくれるので、constとかvarがそもそもわからない人だったり、Reactでも使いまくるmapとか三項演算子、分割代入などが曖昧な人でもこの教材からスタートしてみてもいいかもしれません。

JavaScriptの基礎は非常に大事ですが、addEventListener()など、Reactでは使わない知識もあると思います。

じゃけぇさんのUdemyで触れられているJavaScriptの基礎は、「Reactの習得」という目標に向けて、知っていないと困る内容に絞られているので、全く無駄がありません。本当に緻密に教材の構成が練られていると思います。

2. Progate

みんな大好きProgateにもReactがあり、私もやってみました。所感としては、わかりやすいのですが、クラスコンポーネントで教えられているところが惜しいなと思いました。
現在は関数コンポーネントの時代なので、正直クラスコンポーネントは学ばなくてもいいかなと思うところもあります。しかし、実際の現場ではクラスコンポーネントを使っているところもあるはずですので全くの無駄ではありません。
時間のある人はやってみてもいいかもしれません。

3. Reactチュートリアル

チュートリアルのくせに、学習したての時にやると若干難しいと思います。
解説があっさりしているので、最初は「？？」となるシーンが何回かあった気がします。しかもクラスコンポーネントで書かれていますので、一度関数コンポーネントでポートフォリオを作った後に学習してもいいかなと思います。

4. 「りあクト！」シリーズ

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

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

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

この教材は評判が良かったのと、TypeScriptが同時に学べるということで三部作全て買いました。一部のレビューでは初学者には難しいと言われていたりします。
私としては、この教材は確かに若干難しいですが、「そこ知りたかった」みたいな知識をたくさん習得できるので素晴らしい教材だと思います。
しかし、本当にReactを学びたての人はまだ手をつけなくていいかなと考えます。

といますのも、この教材はハンズオン（「手を使って」）でReactを勉強するという感じではないく、Reactが使われるようになった歴史や、Reactの思想、基礎概念などを「読んで」学習していくスタイルのため、頭では理解しているものの、実際にReactのコードを書こうとしても難しいという状態に陥ってしまうからです（私はそうなりました、、）。

繰り返しますが、この教材は良書です。しかし、ある程度ハンズオンでReactを学んだ後に読んだ方が、頭にすんなり入ってくると思います。

5. TechPit「RailsとReactでUberEats風SPAアプリケーションをつくってみよう！」

この教材もかなり有名ですね。APIモードのRailsとReactを組み合わせてアプリを作るなら必ずやっておいた方がいいと思います。

ただし、コードが若干難解なので全てを理解しようとするとかなり時間がかかってしまうかもしれません。大切なのは、どのようにRailsとReactを連携させるかを学ぶことですので、そこさえ掴めれば、細かいところを理解できなくても先にどんどん進んじゃいましょう。

6. Udemy「Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版」

これこそが、個人的にはReact教材の頂点です。わかりやすい上に網羅性も非常に高く、日本におけるReact学習の敷居を下げた神教材だと思います。
特にTypeScriptを使ったReactの書き方は本当に参考になりました。

7. TechPit「React × TypeScript でマークダウンエディタを作りながらモダンなフロントエンド開発に入門しよう！」

この教材はReactとTypeScriptを組み合わせた書き方を学ぶために使用しました。
この教材の作成物であるマークダウンエディタの仕様がとてもシンプルでとっつきやすく、かつ説明もわかりやすいです。

6で紹介した教材だけでなく、もっとTypeScriptでReactを書く練習をしたい方におすすめです。

8. Storybook公式チュートリアル

Storybookも勉強しました。Storybookは公式が本当にわかりやすいです。これを熟読するだけでもある程度書けるようになります。
ただ、そのほかに日本語のハンズオン教材があまりありません。ですので、公式である程度学習したら、自分で実際に書いていき、疑問点があれば英語ググるということをやっていました。そうすると結構答えが見つかります。

もう一度最初から勉強するならどう勉強するか

以下の手順で学習していくのがいいかと思います。とにかく最初はハンズオン教材を使って勉強しましょう。

　Udemy「モダンJavaScriptの基礎から始める挫折しないためのReact入門」
　Udemy「Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版」
　TechPit「React × TypeScript でマークダウンエディタを作りながらモダンなフロントエンド開発に入門しよう！」
　りあクト！シリーズ
　Storybookチュートリアル

TypeScriptをどう学んだか

TypeScriptは奥が深いので全てを完璧に勉強しようとするのはオーバーワークになると思います。ですので学習初期段階では__型の種類と概要を掴むこと__に専念してください。
Reactはハンズオンでどんどん手を動かすべきだと思いますがTypeScriptにおいてはインプットを長めにとってもいいかなと思います。

学習の軌跡

1　オライリー「プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発」

本で勉強する習慣があったので、TypeScriptを勉強するとなったときに初めて手に取った教材がこれでした。
結果としては難しすぎて詰みました、、

具体的に言うと、例として使われているコードが初学者の私には非常に難解でした、、
ただ、評判もよく、日本語訳もしっかりしているのでいずれ読み直すと思います。少なくとも最初に読むべきものではありませんでした。

2　りあクト！シリーズ

Reactの学習法紹介でも出てきましたこのシリーズ。型の説明がわかりやすかったのでとても良かったです。ただ、Reactの復習、基礎固め的な位置付けの教材なので、TypeScriptだけを学ぶためだけに、学習初期に購入する必要はないかなと思います。
ある程度基礎を磨いたら、Reactの復習をかねてTypeScriptもこの教材で勉強すると基礎固めになるはずです。

3　Udemy「超TypeScript入門完全パック(2021)」

完全パックと書いてある通り非常に内容が濃いです。全体的に分かりやすくておすすめですが、ボリューミーすぎてポートフォリオの中では使わなった知識もたくさんあります。そのため型の説明のところを重点的に聞き、そのほかでよくわからないところは一旦飛ばしてしまってもいいかなと思います。その時は何がよくわかっていないかをしっかりとメモしておきましょう。

4　Qiitaの良記事

この記事は何回も参照させてもらいました。冒頭でも話した通り、最初はとにかく型の種類と概要を掴むことが大事ですが、この記事ではまさに型の基礎を学ぶのにぴったりです。

5　Udemy「Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版」

型をある程度勉強したら、次はこの教材でTypeScriptをどのようにReactの中で使っていくかを勉強しましょう。
ReactにおけるTypeScriptの実践的な使い方が非常にコンパクトにまとめられていてわかりやすいです。

6　サバイバルTypeScript

これは学習後期に発見した教材ですが、説明が丁寧で重要な箇所がシンプルにまとめらているので、一番最初に読むべきだったなあと後悔しています。

もう一度最初から勉強するならどう勉強するか

サバイバルTypeScript
Qiitaの良記事
Udemy「超TypeScript入門完全パック(2021)」
Udemy「Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版」
りあクト！シリーズ

の順に勉強していくかなと思います。深く勉強しすぎると沼にハマる危険性があるので要注意です。

その他大事だと思うこと

その1 〜英文の記事を頼る〜

ReactはRuby on Railsと違って参考になる日本語の資料が圧倒的に少ないです。困ったとき本当にお世話になったのが

Githubのissue
stackoverflow(英語)

の2つです。
stackoverflowは自分で質問するのではなく、過去の投稿で同じ悩みを解決できてる記事を探します。わからないことを検索にかけたら、検索結果の中にこの2つのサイトがあるか探してみるといいと思います。

その2 〜Udemyで勉強するコツ〜

Udemyを使って勉強する上で、実践していたコツみたいなのがあるのでシェアします。

基本的に再生速度は1.5倍速にしてインプット
- 大体の講師の方は話すスピードを落としてくれています。インプットを早く終わらせるためにも視聴速度を早めましょう
動画を見た後、一度動画を止める。そして内容を思い出しながら、動画と同じように自分でコードを書いてみる
- これがとても大事です。動画を見ているときは手を動かさず、ひたすら内容を理解していきます。1セクション終了した時点で一度動画を止め、自分でそのセクションで解説されたコードを書いてみてください。こうすることで、自分が何を理解できていないのかがわかると同時に、記憶をアウトプットすることで記憶の定着に繋がります。

その3 〜助けを求められるメンターさんを見つける〜

素晴らしい教材がたくさんあっても、実際のポートフォリオづくりではよくわからないことが頻発し心が折れそうになることもあるかもしれません。基本的には自走をしていき、どうしてもわからないことがあったら相談できるメンターさんを探しましょう。
私は偶然にも神メンターさんとMENTAで知り合うことができ、非常にお世話になりました。

（おそらく）毎週月曜日に新着のメンターさんを紹介してくれるメールがMENTAから届くのですが、その中に素晴らしいメンターさんがいるかもしれないのでチェックしてみることをおすすめします！

最後に

最初は難しく感じるでしょうが、慣れてくるとReactを書くのは本当に楽しいです。私もまだまだ未熟者ですので、日々精進していきます。

はじめに

Reactをどう学んだか

学習の軌跡

0. React公式

1. Udemy「モダンJavaScriptの基礎から始める挫折しないためのReact入門」

2. Progate

3. Reactチュートリアル

4. 「りあクト！」シリーズ

5. TechPit「RailsとReactでUberEats風SPAアプリケーションをつくってみよう！」

6. Udemy「Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版」

7. TechPit「React × TypeScript でマークダウンエディタを作りながらモダンなフロントエンド開発に入門しよう！」

8. Storybook公式チュートリアル

もう一度最初から勉強するならどう勉強するか

TypeScriptをどう学んだか

学習の軌跡

1 オライリー「プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発 」

2 りあクト！シリーズ

3 Udemy「超TypeScript入門 完全パック(2021)」

4 Qiitaの良記事

5 Udemy「Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版」

6 サバイバルTypeScript

もう一度最初から勉強するならどう勉強するか

その他大事だと思うこと

その1 〜英文の記事を頼る〜

その2 〜Udemyで勉強するコツ〜

その3 〜助けを求められるメンターさんを見つける〜

最後に

1　オライリー「プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発」

2　りあクト！シリーズ

3　Udemy「超TypeScript入門完全パック(2021)」

4　Qiitaの良記事

5　Udemy「Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版」

6　サバイバルTypeScript