LoginSignup
14
11

More than 3 years have passed since last update.

TypeScriptとAngular初心者が「ちょっとわかる」ためにお世話になってきたサイトまとめ

Last updated at Posted at 2019-10-13

半年ほど前より、TypeScript/Angularを利用する業務に携わっています。
(メインはフロントエンドですがサーバーサイドやCLIツールの作成等でもTypeScriptを利用しています。)

TypeScriptもAngularも半年前に比べると「ちょっとわかる」くらいにはなってきたかと思いきや、最近は1周回って「全然わからん」期に入ってきました。Angular全然わからん。

しかし、ひとまず「ちょっとわかる」に至るまでの知識を整理するためにも、これまでお世話になってきた(そしてこれからもお世話になるであろう)蔵書、否、蔵サイトをまとめようと思います。
同じく初心者からTypeScriptやAngularを触ることになる人の参考になれば幸いです。

お世話になってきたサイト

Angular.io

Angular.io (日本語版)

Angularの公式サイトです。
Get Startedや各種ガイド、API仕様に至るまで、Angularの情報について網羅されています。
日本語サイトもあって便利。

Angular自体がかなり重厚長大な世界観を有しているため、公式ドキュメントも分厚い参考書のような印象です。
例えば、「テンプレート上でifやforを使うにはどうすればいいのか?」みたいな初心者的で軽い疑問に対して、サイドメニューからすぐに答えに辿り着けない感じと言うんでしょうか。
Vue.jsやReact等の公式ドキュメントと比べるとそのあたりに設計思想の差を感じます。

初めはチュートリアルから始めて、重い話題は疑問に思ったらでいいかも。
(自分もチュートリアル以降はまだ把握できてない)

Angular After Tutorial

Angular After Tutorial

Angular Japan User Groupオーガナイザーの @lacolaco さんによる、チュートリアルを終えた方に向けた設計指針の解説サイトです。
参考書チックな公式ドキュメントより実践的だし、分量も重くないのでとっつきやすいです。

その他、Angularについての質の高い日本語情報としてlacolacoさんのブログ等々もかなりお世話になっております。

Angular Material

Angular Material

マテリアルデザインに沿ったAngularのコンポーネント集です。業務で利用しています。

コンポーネント自体も有用ですが、公式のコンポーネント実装として、ソースコードがかなり参考になります(GitHub)。
ベースとなっているCDK (Component Dev Kit) を利用してコンポーネントを自作することもできます。

Angular Materialの公式サイト自体もAngular製(GitHub)であり、こちらもAngularの利用例としてかなり参考になります。

Angular CLI

Angular CLI

Angularの開発に使われる公式CLIツール。基本的にAngularでの開発にはCLIツールの利用が推奨されているはずなので、よっぽどのことがなければngコマンドを利用しているかと思います。

ngコマンドも有用ですが、TypeScriptによるCLIツールの実装としても参考になります(GitHub)。
例えば、ng generateは外部のSchematicsを利用してコマンドを実行するような実装になっています。

Angular アドベントカレンダー

2018
2017
2016
2015

Angularについてのアドベントカレンダー。一応TypeScript版のAngularだけでなく旧AngularJSやDart版であるAngularDartも含んでいるようですが、TypeScript版の内容がほとんどかと。
AngularやRxJSのバージョンによって書き方が微妙に変わっているかもしれないので古い情報が今もどこまで通用するかは不明ですが、記事が書かれた年代がわかりやすい分気をつけやすいですね。

Learn RxJS

Learn RxJS

Angularのコアとして用いられているRxJSについての解説サイト。
RxJSの公式ドキュメントに載っている矢印の図がいまいちピンとこない身としては、サンプルソースを元に各種パイプについて解説されているのでわかりやすい。
日本語化はされていないようですが、サンプルソースはシンプルなので問題ないかと。

TypeScript Deep Dive

TypeScript Deep Dive (日本語版)

TypeScriptの各種仕様についての解説サイトです。
特にTypeScriptの型周りの仕様についてわかりやすく解説されています。
TypeScriptの型システムは柔軟ゆえに複雑なこともできてしまうので、仕様は知りつつもなるべくシンプルに使いこなした方がいい気がしますね。

最後に

ここまで記事をまとめている中で、サイトによってはまだ全然読めてない部分があるということを再確認しました。
特にAngularの公式ドキュメントはまだまだ読み応えがありそうです。

ここで紹介したサイト以外にも、TypeScriptやAngularを完全に理解するためにオススメのサイトがあればぜひコメントお願いします!

14
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
11