TypeScriptを3ヶ月勉強してみて、最も参考になった情報源5選


こんにちは、ここ最近はアドカレの記事を読んで良記事にひたすらLGTMをつけている[mu-suke](https://twitter.com/chelsea08ym)です。

この記事は[タイムリープTypeScript 〜TypeScript始めたてのあの頃に知っておきたかったこと〜 Advent Calendar 2021](https://qiita.com/advent-calendar/2021/timeleap-typescript) 、20日目の記事です。


## これはなに？
TypeScriptをに入門して3ヶ月ほど経ったのでその間に参考になった書籍やサイトを紹介します。

これが今後TypeScriptに入門する人の助けになれば幸いです。

## 筆者のスキル
参考までにTypeScriptに入門前の筆者のスキルを記載します。

`C/C++` 1年
`HTML/CSS` 2年
`JavaScript` 2年
`Flutter` 半年

## 入門した経緯

**〜9月末頃〜**

筆者「TypeScirptはなんとなく安全だって言われてるけど今まで書いてきたJavaScriptでも問題なく動いてるから新しくやることもないかー」

会社「これから社内の標準言語をDartと**TypeScript**にするよー」

筆者「なに、急いで入門せねば！」

**〜回想終わり〜**

なので入門するまでは型ってなに？なんで安全なの？なにが良いの？
というところから筆者はスタートしました。


## [1. プログラミングTypeScript](https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0TypeScript-%E2%80%95%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8BJavaScript%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA-Boris-Cherny/dp/4873119049/ref=sr_1_3?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=typescript&qid=1639722978&sr=8-3)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316760/51539fe1-f379-a4ad-a7e0-e17452a08262.jpeg" width=200 />

まず手始めにこの書籍を購入して読み始めました。
3,780円と少し高いですが、基本的な型や、関数の書き方を丁寧に書かれていて価格に見合った価値があると思います。

これまでオライリー本に対して堅そうなイメージがあって読んでこなかったのですが、ちゃんと読んでみると丁寧でわかり易かったです。

ただ「どういう場面で使うんだ？」というものも多かったので、気になるところを自分でピックアップして読むと良いかもしれないです。


## [2. サバイバルTypeScript](https://typescriptbook.jp/) ★オススメ
サバイバルTypeScriptはTypeScriptの特徴や歴史、業務で使えるTipsを実務で死なない(=サバイバルできる)と言うテーマで書かれています。

筆者は上のオライリー本をカバーするために読んでいましたが、このサイト1つだけでも十分すぎるボリュームです。

実務で使えることを謳っていることもあり、こういう風に書けるよっていうのをたくさん書いてあってとてもタメになりました。

**「実務でTypeScriptを使うから勉強したい!」って方にはまずこのサイトを読んでみることをおすすめします.**



## [3. TypeScript Deep Dive 日本語版](https://typescript-jp.gitbook.io/deep-dive/)

1でも2でもあまり理解できなかった時に閲覧していました。
使用頻度は少なかったのですが2と同じくらい説明が丁寧な印象でした。

## [4. TS Playground](https://www.typescriptlang.org/play)

記事ではありませんが、web上でコードが書ける&実行できるので使用していました。
環境構築すれば良いじゃんって話ですが、設定なしでいきなり使えるのでこちらで主にコードを書いていました。

Exampleもあって動かしながら学べるというのもおすすめするポイントです。
![スクリーンショット 2021-12-18 14.29.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316760/1dc86cdc-ae9c-6d13-94da-6858a028f461.png)


## [5. Qiita](https://qiita.com/)
これは説明不要ですが参考にできる記事が多かったので追加しました。

TypeScriptは世界的にも国内的にも導入しているところが多いので、「ooがわからない！」となっても、基本的に誰かが記事を書いてくれてたりします。

むしろ書いていなかったらLGTMをたくさんもらえるチャンスだと思った方が良いかもしれません。

1-3までわからないことがあったらここを覗くというのが最強かなと思います。

今回はそんなQiitaの記事の中でも筆者が特に参考になった記事を3つ紹介します。

### ①TypeScriptの型入門

https://qiita.com/uhyo/items/e2fdef2d3236b9bfe74a

TypeScriptで扱える型についてまとめられている記事です。
この記事だけでほぼほぼ型のことを網羅できるレベルなので、
「とりあえず、TypeScriptの型と使い方について知りたい」って型にはおすすめです。


### ②TypeScriptのInterfaceとTypeの比較

https://qiita.com/tkrkt/items/d01b96363e58a7df830e

筆者が1の書籍を読んでいて最初にぶつかった疑問がこれです。
このInterfaceとTypeの違いについては他にもたくさんの記事で触れられていますが、個人的にこの記事は表としてまとめっていたので読み返す時もスッと頭に入ってくるのでおすすめです。


### ③【TypeScript】Utility Typesをまとめて理解する

https://qiita.com/k-penguin-sato/items/e2791d7a57e96f6144e5

ユーティリティ型というのは、すでにあるTypeを別のTypeにする際に使えるTipsみたいなもので
業務でも活躍する頻度が高いのでピックアップしました。


同じテーマでこちらも分かり易かったので貼っておきます。↓

https://typescriptbook.jp/reference/type-reuse/utility-types


## 3ヶ月やってみて
入門してきちんと勉強してみましたが、やはり実際にコードを書きながらじゃないと身につかないというのは強く感じました。

これは[サバイバルTypeScriptの構成](https://typescriptbook.jp/#%E6%9C%AC%E6%9B%B8%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9)にも書いてありました。

読んで学ぶよりも作って学んだ方が速いのです。
なのでひたすら手を動かすことをおすすめします


### Qiitaに記事を書くこともおすすめ
その延長線で、理解したことをQiitaの記事でまとめてみるのもおすすめです。
自分用のメモになったり、次に入門する人の助けになったりします。


勉強中に自分が書いた記事はこちら↓

https://qiita.com/mu-suke08/items/9243c9ba6f11a61744a9



## 最後に
色々と偉そうなことを書きましたが、筆者もまだ入門したての身です。
引き続き業務でもコードを書きながらできることを増やしていきたいと思います。

ではまた！

## 参考記事

https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0TypeScript-%E2%80%95%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8BJavaScript%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA-Boris-Cherny/dp/4873119049/ref=sr_1_3?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=typescript&qid=1639722978&sr=8-3

https://typescriptbook.jp/

https://typescript-jp.gitbook.io/deep-dive/

https://www.typescriptlang.org/play