お仕事だったり同期と作ったアドベントカレンダーだったりのおかげで、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についても勉強を始めようと思います。
とりあえず次回の記事は、今回紹介したサンプルアプリの詳細と、次に作るアプリの設計について書いていきます。