【2021年】フロントエンドの学習に使用した教材一覧（React, TypeScript, NEXT.js, Firebase）

今回は、僕がフロントエンドを独学する際に使用した教材を紹介していきたいと思います。

最近のフロントエンドは技術の移り変わりが激しくて大変ですよね。
特に初学者の方はどの教材を選べばいいか分からないですよね。
（僕は分かりませんでした😇）
少しでも参考になれば幸いです。

前半に「使用した教材一覧」
後半に「おすすめの教材」を紹介します。

HTML,CSSの基礎知識はありました。

使用した教材一覧

本

• りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】
• りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ.React基礎編】
• りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅲ.React応用編】
• りあクト！ Firebaseで始めるサーバーレスReact開発

YouTube動画

• しまぶーさんの動画（JavaScript入門、モダンJavaScript、TailwindCSS、というかほぼ全部）
• トラハックさんの動画（webAPIシリーズ以外ほぼ見た）
• よしぴーさんのTypeScript講座

Udemy

• ハンズオンで学ぶTypeScript - JavaScript エンジニアのためのTypeScript徹底入門
• [テスト編] Nextjs + React-testing-libraryでモダンReactソフトウェアテスト
• Nextjs + Tailwind CSS + Django REST Framework で学ぶモダンReact開発
• 最短・最速で学ぶTypeScript 実践入門 - 最新モダン開発には欠かせないTypeScript をマスターしよう！
• Firebase未経験者のためのReactで作るチャットアプリ開発入門！最速最短でゴール到達！
• 最速で学ぶFirebase + React Hooks (TypeScript)
• Firebase + React Hooks(TypeScript)によるWebアプリ開発
• モダンJavaScriptの基礎から始める挫折しないためのReact入門
• Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
• React Hooks 入門 - HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得
• 最速で学ぶTypeScript

Zennの本

• Firebase Cloud Firestore Security Rules Essentials

おすすめの教材

YouTube動画

全体をふんわり知るために使いました。
Udemyの講座をやる前にYouTubeの動画を見て全体を掴んでおくのがおすすめ。

ex. しまぶーさんのJavaScript講座 → モダンJavaScriptの基礎から始める挫折しないためのReact入門

じゃけぇさんのUdemyの動画

じゃけぇさんの教材はとにかく分かりやすいです。
Reactを勉強する人はマストバイだと思います。
この教材をベースに、足りないところを別の教材やネットの記事で補填していくのが吉。

• モダンJavaScriptの基礎から始める挫折しないためのReact入門
• Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版

Twitterのアカウントにクーポンのリンクが貼ってあった気がするので、
Udemyがセールじゃない時はそこから買うといいと思います。

またRaiseTechというプログラミングスクールで
フロントエンドコースを40万円くらいで販売されているので
ジェフベソスな人は検討されてみてもいいかもしれませんね。
僕はその日暮らしのムショクッティなので買えません。

Kazu.TさんのUdemyの動画

NEXT.js, Firebaseを学習するならKazu.Tさんの教材はおすすめです。
特に3つ目のNEXT.jsの教材は、NEXTのことについて一通り知れるし、
Tailwindがどんなものかも分かるのでかなりいいですね。
僕はこの教材をきっかけにTailwindを使い始めました。

Djangoはよく分からなかったですね、
まあデータを入れたり出したりできるやつですよね、多分。

1つ目と5つ目の教材は無料で、
最後のチャプターにクーポンがあった気がします。

• 最速で学ぶFirebase + React Hooks (TypeScript)
• Firebase + React Hooks(TypeScript)によるWebアプリ開発
• Nextjs + Tailwind CSS + Django REST Framework で学ぶモダンReact開発
• [テスト編] Nextjs + React-testing-libraryでモダンReactソフトウェアテスト
• 最速で学ぶTypeScript

Firebase Cloud Firestore Security Rules Essentials

Firestoreのセキュリティールールを書くならマストバイですね。
分かりやすいしクオリティ高いのになんと900円。

作者の岸本さんの技術ブログもかなり参考になります。
Firestoreのいいね機能の記事にはかなり助けられました。。

• Firebase Cloud Firestore Security Rules Essentials

気をつけたこと

「練習」 と 「本番」 のバランスを気をつけました。
プログラミングの学習で言うと
練習が「動画・書籍などで学習 / 教材通りに何か作る」
本番が「ユーザーに使われるプロダクトの開発」
だと思います。

ここで大切なことは、
練習をなるべく早く終わらせて本番に入る
ことだと考えます。
なので自分は、教材で学習する時は
理解度は50%でいいからとにかく早く終わらせようと思い
動画は２倍速で見て本は飛ばし読みをして、見るだけでほとんど手を動かしませんでした。
その結果、Udemyの講座は1つ1日以内には終えられましたし、
りあクトは1日で4冊読みました。

また、どれだけ頑張って作ったプロダクトでもユーザーに使われなければ
それは練習の域を出ないと思うので、
実用的でユーザーファーストなプロダクトを目指して
いろいろ頑張っていきたいと思います。