【2024年最新】モダンフロント学習教材まとめ

## はじめに

今回はフロントエンド(主にReact, Next, TypeScript)でおすすめの学習教材をまとめました。

## 対象者

- エンジニア初心者
- モダンフロント技術を学びたい人

## ロードマップ

### [Developer Roadmaps](https://roadmap.sh/)

エンジニア向けの学習ロードマップが整理されています。

現在の自分の立ち位置を把握し、次にやるべきことの方向性を知ることができます。

エンジニアが使うであろう、ほぼ全技術が網羅的にまとめられているので、まずはこのロードマップを使って現在の立ち位置を掴んでみてください。

https://roadmap.sh/frontend

![スクリーンショット 2023-12-03 9.52.02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/22f24692-be2c-1798-35e3-5fab0ce4df2b.jpeg)

https://roadmap.sh/react

![スクリーンショット 2023-12-03 9.52.30.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/d1deb54b-775a-35dc-6a73-95f1475fa102.jpeg)

https://roadmap.sh/typescript

![スクリーンショット 2023-12-03 9.52.50.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/6cb75079-99c2-a67f-37ee-04cb697c089a.jpeg)

## TypeScript

### [typescriptlang](https://www.typescriptlang.org/)

公式が提供している学習サービス。

![スクリーンショット 2023-12-03 9.57.47.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/2f115462-a9b7-d9b0-5d84-c528d7e358ff.jpeg)

基本文法から実践的な内容まで学ぶことができる。英語が苦手でなければここで一通り学ぶべき。

https://www.typescriptlang.org/

### [サバイバルTypeScript](https://typescriptbook.jp/)

実務で使えるTypeScriptの実装方法を学ぶことができる。応用的な内容も多いが、解説が丁寧かつ具体的なコード例も豊富なのでかなり勉強になる。

https://typescriptbook.jp/

![スクリーンショット 2023-12-03 9.59.04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/44d81677-e271-00e8-2c75-c763735e6a16.jpeg)

### [Type Challenges](https://mosya.dev/type-challenges) (中級者以上)

問題を解きながらTypeScriptの型について学べる。

初級、中級、上級と分かれているが、初級の後半くらいからかなり難しい。

TypeScriptマスターになりたい人は一度挑戦してみてほしい教材。

https://mosya.dev/type-challenges

![スクリーンショット 2023-12-03 10.03.00.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/552d26e6-65cb-c726-8be4-bf49bb88d3b6.jpeg)

### [プロを目指す人のためのTypeScript入門](https://www.amazon.co.jp/dp/4297127474/ref=as_sl_pc_as_ss_li_til?tag=sutabaopen-22&linkCode=w00&linkId=18fa2222cc21f2e30dd0721fdbe3f673&creativeASIN=4297127474)

フロント界隈でも有名な[うひょさん](https://twitter.com/uhyo_)の書いた書籍。

入門と書いているが、後半では実務でも使えるTypeScriptの活用術が書かれているのでかなり勉強になる。

加えて、本質的な部分から解説しているので、初心者から上級者まで学びがある一冊。

https://www.amazon.co.jp/dp/4297127474/ref=as_sl_pc_as_ss_li_til?tag=sutabaopen-22&linkCode=w00&linkId=9ceb2d3f758c9ff54bfb3a3ffda68d41&creativeASIN=4297127474

## React

### [公式ドキュメント](https://react.dev/learn)

公式が提供しているLearn React

https://react.dev/learn

UIの説明、状態管理、Ref、ライフサイクル、カスタムフック、レンダリング等、Reactで使われる技術を網羅的に学習できる。

公式が提供しているだけあってかなり分かりやすい教材。

![スクリーンショット 2023-12-03 10.10.06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/85baaa63-4300-37a3-48b5-b3d63c9019ed.jpeg)

### [React(v18)完全入門ガイド](https://www.udemy.com/course/react-complete-guide/?LSNPUBID=d6wS94Fam*0&ranMID=47984&ranSiteID=d6wS94Fam.0-VQF4uQ1FchPcaMsJLvryEA&utm_medium=udemyads&utm_source=aff-campaign)

Reactを使うためのJavaScriptの学習から始まり、本質的な内容、TypeScriptと合わせた使い方、Next.js、と基礎から応用までをこれ1つで完結している。

解説も「なぜ」を追求しているので疑問なく進めることができる。

https://www.udemy.com/course/react-complete-guide/?LSNPUBID=d6wS94Fam*0&ranMID=47984&ranSiteID=d6wS94Fam.0-VQF4uQ1FchPcaMsJLvryEA&utm_medium=udemyads&utm_source=aff-campaign

### [【React+TypeScript】Netflixのクローンを作るチュートリアル](https://zenn.dev/gunners6518/books/4c4672f32dd100)

Netflixのクローンアプリを開発しながらReactとTypeScriptの実践的な使い方を学ぶことができる。

今まで身につけた知識を「実務で活かす」ために必要な技術に昇華させることができる。

https://zenn.dev/gunners6518/books/4c4672f32dd100

## Next.js

### [Learn Next.js](https://nextjs.org/learn)

![スクリーンショット 2023-12-03 10.15.10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/01bd1040-418d-d2bd-0108-35c97ce87f9f.jpeg)

Netx.jsの公式が提供している学習教材。

ステップバイステップで学ぶべきコンテンツが整理されているので、初心者でも学習しやすい構成になっている。

![スクリーンショット 2023-12-03 10.16.11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/b1b0af81-e858-1338-7b49-b3856fa1b731.jpeg)

https://nextjs.org/learn

### [リクルート Next.js研修2023](https://speakerdeck.com/recruitengineers/nextjs-2023)

フロントエンド開発とSPAフレームワークの説明から入り、パフォーマンスやライブラリ、アプリ開発のハンズオンオンと網羅的にNext.jsを学ぶことができる。

https://speakerdeck.com/recruitengineers/nextjs-2023

### [Takepepeさんのスライド](https://speakerdeck.com/takefumiyoshii)

フロントエンド界隈でも有名な[Takepepeさん](https://twitter.com/takepepe?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor)のスライド。

基本的な内容からテストやパフォーマンスチューニングといった内容まで学ぶことができる。

![スクリーンショット 2023-12-03 10.19.13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/5ca39f78-2a17-dcbd-1df7-dfb99a44185e.jpeg)

https://speakerdeck.com/takefumiyoshii

## 最後に

いかがだったでしょうか。

他にも色々な記事を書いているのでぜひ読んでみてください。

https://qiita.com/KNR109/items/e13a5c5b8b461e846902

https://qiita.com/KNR109/items/d127687d54a12e992143

https://qiita.com/KNR109/items/9f7ec8dd03d0bea8dc35