React初心者の僕が次に学ぶために使用した教材一覧(React v18, CI/CD, Next.jsなど) 

# はじめに
こんにちは、都内でソフトウェアエンジニアをしている[YSasago](https://qiita.com/YSasago)と申します。
Reactを使ったことがなかった僕が、Reactを使ったプロジェクトに入って、１年過ぎたので次にステップアップするために今年(2022年)、学びに使用した教材をまとめたい思います。

去年(2021年)は、Reactを使ったことがなかったので、全くの0からReactを学んだ内容を下記のQiitaに書きました。Reactを触ったことがない方は一度下記の記事を読んでいただけると幸いです。

https://qiita.com/YSasago/items/7133118fa542525670a6


# 対象
* React初心者
* ソフトウェアエンジニア初心者
* CI/CDの構築の初心者

# 学習方法
私は、書籍を使った学習が苦手なので、動画を使って学習をよくします。
今は、[udemy](https://www.udemy.com/ja/)や[YouTube](https://www.youtube.com/)にたくさん学習できる動画があるのでとても便利な時代になったかなと思います。
ちなみに私の学習方法は、下記になります。

1\. 動画を見ながら、実際にコードを書く

2\. 章ごとにQiitaやOneNoteに自分の言葉でまとめる

手元でコードを書くことで動きを確認し、Qiitaで学習したことを自分の言葉でまとめてアウトプットすることで記憶に定着するようになります。個人差はありますが、ぜひ参考にしてみてください。

:::note info
udemyは月に２回ほど、セールしているので可能であればセール中に買うのがおすすめです。
教材を８割引きで買えたりします。セールをしていない期間はYouTubeを使うのも良いかと思います。
:::

# 使用した教材

## React
Reactの学習には、[じゃけぇさん](https://freelance-jak.com/)の教材をよく使ってます。
全くの初心者の時に下記の[書籍](https://www.amazon.co.jp/%E3%83%A2%E3%83%80%E3%83%B3JavaScript%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%8B%E3%82%89%E5%A7%8B%E3%82%81%E3%82%8B-React%E5%AE%9F%E8%B7%B5%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%EF%BC%88%E6%9C%80%E6%96%B0ReactHooks%E5%AF%BE%E5%BF%9C%EF%BC%89-%E3%81%98%E3%82%83%E3%81%91%E3%81%87%EF%BC%88%E5%B2%A1%E7%94%B0-%E6%8B%93%E5%B7%B3%EF%BC%89-ebook/dp/B09BV2HGN3)でReactを学習しました。
Reactがある程度、読めるようになって、次に学習するために使用した教材を今回は紹介します。

https://www.amazon.co.jp/%E3%83%A2%E3%83%80%E3%83%B3JavaScript%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%8B%E3%82%89%E5%A7%8B%E3%82%81%E3%82%8B-React%E5%AE%9F%E8%B7%B5%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%EF%BC%88%E6%9C%80%E6%96%B0ReactHooks%E5%AF%BE%E5%BF%9C%EF%BC%89-%E3%81%98%E3%82%83%E3%81%91%E3%81%87%EF%BC%88%E5%B2%A1%E7%94%B0-%E6%8B%93%E5%B7%B3%EF%BC%89-ebook/dp/B09BV2HGN3

### Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
Atomic Designや、カスタムフックの使い方を学べる教材となってます。
こちらの教材を終えると、Reactをもっと活用して書けるようになるので、Reactを書くことが楽しくなるのでおすすめです！

>「React何となく分かったけど次どうしたら良いか分からない」という人がステップアップするために知っておくべきことを順序立ててハンズオン形式で詰め込みました。本コースを終える頃にはもっとReactのことを好きになっていると思います。

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


## 今後のフロントエンド開発で必須知識となるReact v18の機能を丁寧に理解する
2022年3月に登場したReactバージョン18を学べる教材となってます。
こちらの教材を終えると、React v18.0について書いてある[公式ドキュメント](https://ja.reactjs.org/blog/2022/03/29/react-v18.html)が理解できるようになり、サスペンス機能やトランジション機能といったReactの新機能を理解して使えるようになります！

> 2022年3月に登場したReactバージョン18は今後のフロントエンド開発を大きく変化させる入口です。ここを押さえておくかどうかでこれからのフロントエンド開発についていけるかが左右されるので、機能だけでなく本質についても学んでいきましょう。

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


## モダンJavaScriptの基礎から始める挫折しないためのReact入門
こちらは、Reactをはじめて触る人向けの教材となっております。Reactを使える人でも復習となるので、一度やってみると勉強になります。教材の時間も６時間と短いのでおすすめです。

>Reactの習得に苦戦する理由は「JavaScript」への理解不足です。このコースではスムーズにReact開発のスタート地点に立てるように、モダンJavaScriptの動作の仕組みや概念、機能から解説します。

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

## CI/CD
0からプロジェクトを作成する際に、CI/CD環境を構築する必要がありました。そこで、私がCI/CDを学習するために使用した教材を紹介します。

## AWS と Terraformで実現するInfrastructure as Code
Terraformをはじめて触る人向けの教材となっております。Terraformの使い方から、Terraformを使ってAWSのサービスを作成方法を学ぶ事ができます。
こちらの教材を終えると、Terraformを使って１つのアプリケーションを作成することができるようになります。AWSの基礎も一緒に学ぶことができるのでおすすめです。

 

https://www.udemy.com/course/iac-with-terraform/

## GitHub Actions と AWS で実現する DevOps 実践講座
こちらの教材を終えると、GitHub Actions を使ったCI/CDを構築することができるようになります。GitHub Actionsが初めて人向けの教材となっております。また、GitHub ActionsとTerraformの連携を学ぶことができます。


> GitHubを120%活用して DevOps 環境を構築しよう！

https://www.udemy.com/course/devops-gha-aws-infra/

## Next.js
プロジェクトでNext.jsを使うことになったので、Next.jsを学ぶために使用した教材を紹介します。

### Next.jsの公式チュートリアル
こちらは、 Vercel社が提供している公式チュートリアルです。内容は全部英語で書かれてますすが、コードを書きながら進むことができるので、特に英語ができなくても学習には問題ないと思います。またNext.jsについてとてもわかり易く書いてあるのでおすすめです。

https://nextjs.org/learn/basics/create-nextjs-app

### 【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座
こちらは、公式チュートリアルの内容を、わかりやすい解説で学習できる教材となっております。公式チュートリアルをやったあとに復習として見ると更にNext.jsを理解できるようになると思います。

https://www.udemy.com/course/nextjs-microblog-for-beginner/


### 日本一わかりやすいNext.js入門

こちらは、 [とらゼミさん](https://www.youtube.com/user/1492tiger)が提供している教材です。Next.jsについてとてもわかり易く日本語で解説してくれるので、理解しやすいです。YouTubeで***無料***で学習できるのでとてもおすすめです。


[【とらゼミ】トラハックのエンジニア学習講座](https://www.youtube.com/user/1492tiger)

https://www.youtube.com/watch?v=F77RUjHZEAc&list=PLX8Rsrpnn3IUGEyanrHYGjY1WOzNe7Jd-


# おわりに
いかがでしたでしょうか。React初心者の僕が次に学ぶために使用した教材一覧を紹介しました。
今回紹介した教材を終えて、Reactが読める状態から、楽しく書けるようになったと感じています。今回紹介した教材はすべてインターネットに繋がっていれば学習できる教材となっておりますので、PCやスマホ１つで学習することができます。また、動画がメインなので、本を読むのが苦手な人にもおすすめできる教材です。また来年もUdemyやYouTubeを活用して学習を続けたいと思います。なにかおすすめの教材がありましたら教えていただけると幸いです。
最後まで読んでくださりありがとうございました。