お仕事だったり同期と作ったアドベントカレンダーだったりのおかげで、Angularを触る機会を得た小生でございます。
今までフロントどころか、Webアプリの制作もしたことがなかったので、これをいいことにいろいろと勉強していってる最中です。

Angularを触るにあたって何を知っていたか

HTML
CSS
Javascript
Node.js

HTML、CSSはお猿さんと同じくらいの知識がありました。
JavascriptはほぼNode.js触ってから覚えた感じ。
元々プログラミング経験があったので、ここらへんはなんとか理解しつつ進めております。

Angularを理解するためには

公式：入門チュートリアル(Angular未経験者向け)
公式：基礎チュートリアル(入門チュートリアルをやった人向け)
2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ(公式チュートリアルを終えて基礎がわかった人向け)

特に**2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ**はめちゃくちゃ面白いです。
Angularに限らず、フロントのフレームワークの基礎押さえたなら、それぞれ作っていくべきだと思います。
元記事ではフロントエンドマスターになるために様々なフレームワークを紹介していますが、まずは一本極めていくのが自分のやり方なので、Angularで絞ってやっていきます。

始めたこと：公式チュートリアル制覇

入門チュートリアルでは、Angularがどんな感じで動いているのかを理解できました。
基礎チュートリアルでは、コンポーネント指向に置いて説明がされている印象を受けました。
コピペだけで作れなくはないですが、用語が分からずともしっかり説明を読んで、ちょこちょこコードをいじったりするとより理解が深まります。

始めたこと：Build a movie search app

とっかかりとして、Angularで映画情報を検索するWebアプリを作りました。できたものはこんな感じです。

ガッツリ参考URL載せてるくせに、実は一度も読みに行ってません…
貼られてたスクショを元に、機能を想像しながら、真似た物を作ってみました。

検索フォームにキーワードを入力すると…

関連する映画が表示されます。

ページ移動とかもちゃんと機能します。どれでもいいので映画をクリックすると、

このような形で、映画の詳細情報がでます。

Angularの勉強は楽しいのですが、なにぶんCSSをしっかり書いたことがないもので…
詳細情報ページだけ、間に合わせのtableで凌いでます。
（検索フォームはなぜか真ん中に来ないのでおこです😡）

始めたこと：AngularでWebアプリを設計するには

もうこれはWebデザイン全般に言えることかもしれないんですけど、
設計図を書きましょう もっというと、画面図を書きましょうですね

Angularはコンポーネント指向でアプリを作るので、どのコンポーネントがどの部分に来るか、明確にイメージしていないとすぐこんがらがります（一人で作る場合）
最初に必要なコンポーネントをがーっと作って、その後設計を考えながら組み立てるのも悪くないですが、あとからたくさん修正が必要そうになるので、概要くらいは決めておいた方が良いです。

始めること：アウトプット、アウトプット、アウトプット

やっぱり手を動かさないと始まらない、ということで当面の目標はサンプルアプリを作り続けるです。
嬉しいことにコードを書くスピードが上がっているのを実感できているので、アドベントカレンダー最終日までにあと２つはサンプルを作りたいと思います。
併せて、Bootstrapについても勉強を始めようと思います。
とりあえず次回の記事は、今回紹介したサンプルアプリの詳細と、次に作るアプリの設計について書いていきます。