0からReactとTypeScriptを学ぶために使用した教材。ついでにJestとGraphQLも

# 0からReactとTypeScriptを学ぶために使用した教材。ついでにJestとGraphQLも
こんにちは。この記事は、IT資格取得をテーマに学びをシェアしよう！[KDDI Engineer&Designer Advent Calendar 2021](https://qiita.com/advent-calendar/2021/engineer-designer)の18日目の記事となります。

今年チームの移動を行い、ReactとTypeScriptのプロジェクトに参加しました。
そこで、私がReactとTypeScriptを0から学ぶために使用した教材を紹介したいと思います。
これからReactとTypeScriptを学ぶ人に参考にして頂けたら嬉しいです。

https://qiita.com/advent-calendar/2021/engineer-designer

## 教材
私がReactとTypeScriptを学ぶために使用した教材です。


### [モダンJavaScriptの基本から始める React実践の教科書 (最新ReactHooks対応)](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-%E6%9C%80%E6%96%B0ReactHooks%E5%AF%BE%E5%BF%9C-Informatics-IDEA/dp/481561072X/ref=sr_1_5?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=react&qid=1638606100&sr=8-5)

これまで私は、Reactを書いたことがなかったため、Reactを学ぶため[モダンJavaScriptの基本から始める React実践の教科書 (最新ReactHooks対応)](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-%E6%9C%80%E6%96%B0ReactHooks%E5%AF%BE%E5%BF%9C-Informatics-IDEA/dp/481561072X/ref=sr_1_5?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=react&qid=1638606100&sr=8-5)を購入しました。
こちらの書籍のおかげで、モダンJavaScriptの基礎からTypeScriptの実践的な内容までわかりやすく学べました。
１週間程度で読むことがでます。文量が多いと途中で読むのをやめてしまうので私にとってとても良かったです。（笑）
この一冊だけで、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-%E6%9C%80%E6%96%B0ReactHooks%E5%AF%BE%E5%BF%9C-Informatics-IDEA/dp/481561072X/ref=sr_1_5?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=react&qid=1638606100&sr=8-5


### [チュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)

[モダンJavaScriptの基本から始める React実践の教科書 (最新ReactHooks対応)](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-%E6%9C%80%E6%96%B0ReactHooks%E5%AF%BE%E5%BF%9C-Informatics-IDEA/dp/481561072X/ref=sr_1_5?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=react&qid=1638606100&sr=8-5)を読んだことでReactの概念がわかってきたので次に、Reactの公式が出している[チュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)を行いました。
こちらのチュートリアルはハンズオン形式で三目並べゲームを作成します。手を動かしながら学ぶことができます。３日間程度で最後まで終えることができました。


https://ja.reactjs.org/tutorial/tutorial.html


### [りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】](https://booth.pm/ja/items/2368045)

Reactがわかるようになったら、TypeScriptを学ぶために[りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】](https://booth.pm/ja/items/2368045)を購入しました。こちらは３冊あり、全て購入しました。PDFで読むことができるため、休みの日にスマホで読んだりしてました。JavaScriptの歴史から学ぶことができ、今までモヤモヤしていたものがこちらの書籍のおかげでスッキリすることができました。とても詳しく書かれていますが、会話形式で書かれているのであっという間に読むことができます。

https://booth.pm/ja/items/2368045


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

YoutubeでTypeScriptを学ぶことができる[【とらゼミ】トラハックのエンジニア学習講座](https://www.youtube.com/user/1492tiger)も試聴しました。無料なのに、とてもわかりやすく説明してくれます。Reactの動画もあるのでこちらも試聴しました！

https://www.youtube.com/user/1492tiger


### [はじめてのJEST入門](https://techbookfest.org/product/6646880551305216?productVariantID=6674484020903936)
私が参加したプロジェクトはJestでテストコードが書かれていて、Jestを勉強したことがないなーと思ったので[はじめてのJEST入門](https://techbookfest.org/product/6646880551305216?productVariantID=6674484020903936)を購入しました。
Jestの入門書となっており、この一冊でjestを一通り学ぶことができたので、とても良かったです。


https://techbookfest.org/product/6646880551305216?productVariantID=6674484020903936

### [フロントエンドエンジニアのためのGraphQL with React 入門](https://www.udemy.com/course/graphql-with-react/)
GraphQLをプロジェクトで使用していたため、[フロントエンドエンジニアのためのGraphQL with React 入門](https://www.udemy.com/course/graphql-with-react/)を購入し学びました。GraphQLも全くの初心者であったため、フロントエンドエンジニアのためのGraphQL with React 入門を一通り行いました。わかりやすくGraphQLを学ぶことができました。GitHubのGraphQL APIと連携するReactアプリケーションをハンズオンで実装しました。Reactも一緒に使うことができるのでとても良かったです。

https://www.udemy.com/course/graphql-with-react/

# 終わりに
新しく技術を学ぶことってとてもワクワクして楽しいですね。
以前は重い書籍を購入したりしていましたが、今はPDFで書籍を購入できるのでとても便利だなと思いました。
これから技術を学ぶ人に、[技術書典](https://techbookfest.org/)は技術書がたくさんあるのでとてもおすすめです。amazonにはない本がたくさんあったりするので、私は月に１冊程度購入しちゃいます。

来年もたくさん技術を学んで成長していけたらなーと思います。それでは！

https://techbookfest.org/