Angularについて

2020年2月9日

Angularについて、最近勉強しているので備忘録の意味も込めて内容をまとめてみたいと思います。

主にAngularの特徴と、それを支えるTypeScriptについてまとめていきます。

1.はじめに
2.Angularとは
3.Angularの特徴
3.Angularを使って今後やりたいこと

はじめに


なぜ今回Angularに興味を持ったのかというと、現在の会社のシステムに限界を感じたからです。

ASP.Net のWebFormを使っているシステムなのですが、正直フロントエンドとバックエンドがひも付きすぎていてい、ものすごい複雑。。。

デザインをちょっといじりたい場合でも、単純にデザインをいじるだけで終わらないことが多く、ソースも一緒に修正が必要になったりしました。

デザインだけだったらhtmlちょろっと修正して反映できるんですが、ソースも修正するからプログラムの反映も必要になってとても面倒でした。

それを改善する必要があるなと思い、どうすればいいのか考えてみました。

まずフロントとサーバをしっかり切り分けるにはどうやらWebAPIを活用すればいいらしいぞ、というところから始まり、

フロントには最近のJavascript系のFWが開発盛んだから楽しそう!と思い、

AngularってやつがGoogleがメインになって開発しているらしく、なんかよさそう!みたいな結構雑な考えでAngular使ってみました。笑

Angularとは


JavaScriptのフレームワークになります。
JavaScriptのフレームワークで有名なのは以下の三つがあります。
1. Angular :Googleを中心に開発されているフルスタックのフレームワーク
2. React :FaceBook製で、MVCのView相当の機能を提供
3. Vue.js :ビューに特化したシンプルかつ高速なフレームワーク

AngularかReactか、どのフレームワークを利用すべきか?といった話がたまに上がるかと思いますが、以下の記事を参考にしてみるとよいかと思います。

とにかく公式サイトが使いやすいです。

個人的にですが、Angularを触ってみたところ、公式サイトのチュートリアルがすごいです。
とりあえずチュートリアルを行っておけば、現場で開発する際の最低限度の理解は得られるかと思います。
あとドキュメントもしっかりしてますよね。
まだ翻訳していないところもあるのですが、大部分翻訳されており、公式サイトが非常に使いやすいです。

Angularの特徴


フルスタックのフレームワーク

フルスタックのフレームワークとなっておりフロントエンドに必要となる要素が一通り用意されているらしいです。

というよりは、Angularのフレームワークの中でうまく作りましょうねっていうイメージが強いです。

ほかのJQueryとかも使おうと思えば使えるのですが、相性がとても悪い。

JQueryでDOM直接操作して値書き換えを行っても、Angular側のモデルには反映されずに不具合につながったり(直面して結構悩んだ)します。

JQueryに限らず、直接DOM操作しないようにAngularって作られているみたいで、それを理解しておかないと作るのに苦労しそうです。

コンポーネント指向

コンポーネントとは、ページを構成するUI部品のことで、それを組み合わせてページを作成していく考え方のことです。

コンポーネントは一つのページに複数配置すること、階層構造にすることなどできます。

ボタン一つとかをコンポーネントとして組み立てていくらしいのですが、そんなことやってられない(開発スピードめっちゃ下がりそう)ので、基本的には画面一つをコンポーネントとしてまず組み立ててみて、その中で共通利用しそうなものはコンポーネントとして部品化してみる、といった開発がよさそうです。

TypeScript

AngularはJavaScriptのフレームワークなので、当然のことながらJavaScriptで開発することができます。

しかし公式ドキュメントも含めほとんどのドキュメントもTypeScriptを使用することを前提にしています。

Googleも社内の標準言語としてTypeScriptを取り入れたというニュースもあったことだし、今後はTypeScriptが主流になる可能性が大きいので、学んでおいて損はないはず!

またTypeScriptの特徴として、C#などの言語と書き方が似ているという特徴があります。

仕事ではメインの言語としてC#を利用している私としてはとてもありがたい!

まだちょろっとしか触っていないのと、正直JSを真面目に勉強したり利用したことがないので比較できませんが、そこまで苦労せずにかけそうな印象でした。