はじめに
自分は2021年に新卒でWeb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。
実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。
今回は、エンジニア1年目の自分に教えたいフロント(React)学習で重宝できる教材と記事を分野別にまとめていきます。
Qiitaではフロント向けのまとめ記事を書いているので合わせて読んでいただけると嬉しいです。
この記事の対象者
- React初心者から中級者
- フロントエンドエンジニアを目指している人
- Reactの学習方法を知りたい人
この記事の目標
- Reactの学習教材や記事を知ることができる
- React周辺に関する知識を学習できる教材や記事を知れる
React全般
トラハック(Youtube)
トラハックさんのYoutubeではReactを基礎から応用まで動画で学ぶことができます。
動画内では図解による説明も多く、解説もかなり丁寧なのでReact未経験の方でも無理なく着いていくことができます。
またECアプリ開発をしながらReactをアウトプットする動画も出ているので実践的な学習をすることができます。
このクオリティーのものが全て「無料」で学習できることに驚きを隠せません。
【2022年最新】React完全入門ガイド(Udemy)
Udemy講師でも有名なCodeMafiaさんが出されている【2022年最新】React完全入門ガイドではReactの本質的から実践的な部分まで幅広くカバーしている講座になっています。
動画内ではReactで使われる機能を「なぜこのような挙動をするのか」といった部分まで掘り下げて解説をしてくれているので、初心者でも深い部分まで理解することができます。
またReact18やNext.jsといった最新のフロント技術もキャッチアップすることができます。
こちらのUdemy講座では下記の内容が具体的には学べます。
- ReactとJavaScriptの文法について
- イベントリスナと状態管理
- 制御構文とフォームの制御
- ReactのStyleについて
- DOM操作
- 関数プログラミングについて
- カスタムフックについて
- パフォーマンスの最適化
- API連携
- Next.js
- テストの書き方
基礎から網羅的にかつ本質的な部分まで学びたい人にはおすすめ講座になっています。
JavaScriptの基礎から始める挫折しないためのReact入門 (Udemy)
こちらの講座はUdemyで最高評価を獲得している講座になっています。
JavaScript本体の基礎解説から始まり、Reactの基礎から応用まで幅広く学べる講座になってます。
解説もかなり掘り下げてくれているので初心者でも疑問を残さずに学習を進めることができます。
JavaScript自体に少し不安がある人や、React学習をこれから始めたい人におすすめの講座です。
TypeScript
サバイバルTypeScript
サバイバルTypeScriptはsuinさんが執筆された、実務で利用するTypeScriptの機能を厳選して解説しているドキュメントになっています。
「ここだけ押さえておけば、実務で死なない)(=サバイバルできる)」をコンセプトに作られています。
各章、TypeScript機能の基礎解説から始まり、具体例の解説と進んでいくため基礎から、「具体的な使い方」を学ぶことができる教材になっています。
TypeScriptをこれから学習する人や実践的な内容を学びたい人にはおすすめの教材です。
プロを目指す人のためのTypeScript入門
プロを目指す人のためのTypeScript(通称ブルーベリー本)はフロント界隈でも有名なuhyoさんが執筆したTypeScriptの入門書籍となっています。
入門といってもかなり本質的な部分まで解説されているので、初心者から上級者までの層に学びがあるような書籍になっています。
本書で学べる内容は、
- 基本的な文法と型
- オブジェクトの基本
- 関数
- クラス
- 高度な型
- モジュールシステム
- 非同期処理
となっており6章で紹介されている「高度な型」では中級者以上の人でもかなり学びのあるような内容かつ、実務でもつかる手法がまとまっています。
TypeScriptを学び始めたい人や、ワンランクステップアップしたいという方におすすめの書籍になっています。
React×TypeScript
ReactとTypeScriptそれぞれの基礎学習が済んだあとは、Reactの実務現場ではほぼ確定で使われる構成「React×TypeScript」の学習教材を紹介していきます。
Reactが楽しくなるステップアップコース完全版
こちらの講座はUdemyで最高評価を獲得している講座になっています。
Reactの基礎文法の解説から始まり、スタイルの当て方やコンポーネント分割といった内容を学んだ上で、実際にアプリ開発を通して学んだ技術をアウトプットすることができる内容になっています。
具体的に学べる内容は下記のようになっています。
- レンダリングの仕組みと最適化
- CSSの当て方
- ルーティングの基本
- コンポーネント分割について
- グローバルstateの管理法
- API連携
- React×TypeScriptの開発
- カスタムフック
React×TypeScripは実務現場でほぼ使われる構成なので、ぜひこちらの講座で学習をしてみてください。
React×Firebase
次に実務現場でもよく使われるReact×Firebase構成の学習教材を紹介していきます。
React+Firebase入門
React+Firebase入門ではReactとFirebaseを基礎から網羅的に学習することができる教材になっています。
具体的には認証機構、ファイルアップロードといったFirebaseの重要機能を具体的に開発を通して学ぶことができる講座になっています
実務現場でReact×Firebaseのを使う人におすすめの入門講座です。
Firebase+React HooksによるWebアプリ開発(Udemy)
こちらのUdemy講座ではReact×Firebaseの構成を実際にTwitterのクローンアプリ開発を通して学習することができます。
アプリ開発を実際に経験できる講座なので、アウトプットを通してより現場で使える技術としてステップアップさせることができます。
Next.js
Next.js公式チュートリアル
Next.jsの学習は公式チュートリアルが個人的に一番わかりやすかったのでおすすめです。
英語に抵抗がある人は、Qiita記事で和訳してくれているものがあるのでそちらを参考に学習を進めてみてください。
公式チュートリアルではNext.jsの基礎を網羅的に学習できるので、これからNext.jsを学習したい人にはおすすめの教材になっています。
【2022年最新】React完全入門ガイド
こちらの教材はReactのおすすめ学習教材の章でも紹介したのですが、Nextを学ぶ上でもおすすめの教材になっています。
Next.js学習の最初の壁である「SSR, SG, ISR」といった内容を図解を用いてわかりやすく解説をしてくれています。
またNext.jsのAPI Routesといった応用的な内容も扱っているので、基礎から応用まで幅広く学習をすることができます。
その他
ここまではReact, TypeScript, Next.jsといった大枠的な内容の学習教材や記事を紹介してきましたが、ここからは少し深い分野の学習教材を紹介していきます。
設計関連
Reactを開発する上で重要な設計を学べる教材や記事を紹介します。
React公式ドキュメント
React公式ドキュメントではReact本体の設計原則について解説されています。
少し内容は難しいので理解するのに時間はかかりますが、Reactを実務現場で使っていく上で知っておくべき考え方がまとまっているのでぜひ参考にしてみてください。
具体的には下記の内容がトピックとして挙げられています。
- コンポジション
- 共通の抽象化
- 避難ハッチ
- 安定性
- 相互運用性
- スケジューリング
- 開発体験
- デバッグ
- 設定
- DOM を超えて
- 実装
- ツールへの最適化
- ドッグフーディング
コンポーネント設計の（個人的）ベストプラクティス
こちらの記事ではコンポーネント設計の考え方や具体的なディレクトリ構成を紹介しています。
各レイヤーにおける、責務も明確に解説してくれているので非常に参考になる記事になっています。
SOLID原則で考えるReact設計
こちらの記事ではSOLID原則である、
- SRP: 単一責任の原則
- OCP: 開放閉鎖の原則
- LSP: リスコフの置換原則
- ISP: インタフェース分離の原則
- DIP: 依存性逆転の原則
をReactに落とし込んで解説をしてくれている記事になっています。
具体的なコードを用いて「悪い例」と「リファクタリング後の例」を提示してくれているので、理解がしやすい内容になっています。
テスト関連
公式ドキュメント
公式ドキュメントではテストの書き方や方針が丁寧に解説されているので、これからReactのテストを学習をしていく人にとって「何をすべきか」といった指針を学ぶことができます。
【入門】フロントエンドのテスト手法まとめ
こちらの記事ではフロントエンド(React)のテスト手法について「なぜテストを書くのか」といった解説から、具体的なコードを用いてテストの書き方を紹介している記事になっています。
テストを書いたことがない人やこれから学習をしていきたい人に参考にして欲しい記事になっています。
パフォーマンス周り
Webフロントエンドパフォーマンスチューニング75選
こちらの記事ではフロントエンドにおけるパフォーマンスチューニングが網羅的に紹介されています(随時更新されている)。
具体的なコード例も記載されているので理解がしやすい記事になっています。
フロントエンド開発をする人全員に一度は読んでいただきたい記事になっています。
Reactパフォーマンス最適化まとめ
こちらの記事ではReactにおけるパフォーマンス最適化が解説されています。
レンダリングの仕組みから始まり、どういった方針でパフォーマンスを最適化していくべきかを順を追って解説しています。
具体的なコードと共に解説をしているので初心者でも理解しやすい内容になっています。
アプリ開発(アウトプット)
最後に
いかがだったでしょうか、今回はエンジニア1年生の自分に教えたいReacrt学習のおすすめ教材を紹介しました。
他にもいろいろな記事を出しているのでぜひ読んでいただけると嬉しいです。