Angularについて
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の特徴
フルスタックのフレームワーク
フルスタックのフレームワークとなっておりフロントエンドに必要となる要素が一通り用意されているらしいです。
というよりは、Angularのフレームワークの中でうまく作りましょうねっていうイメージが強いです。
ほかのJQueryとかも使おうと思えば使えるのですが、相性がとても悪い。
JQueryでDOM直接操作して値書き換えを行っても、Angular側のモデルには反映されずに不具合につながったり(直面して結構悩んだ)します。
JQueryに限らず、直接DOM操作しないようにAngularって作られているみたいで、それを理解しておかないと作るのに苦労しそうです。
コンポーネント指向
コンポーネントとは、ページを構成するUI部品のことで、それを組み合わせてページを作成していく考え方のことです。
コンポーネントは一つのページに複数配置すること、階層構造にすることなどできます。
ボタン一つとかをコンポーネントとして組み立てていくらしいのですが、そんなことやってられない(開発スピードめっちゃ下がりそう)ので、基本的には画面一つをコンポーネントとしてまず組み立ててみて、その中で共通利用しそうなものはコンポーネントとして部品化してみる、といった開発がよさそうです。
TypeScript
AngularはJavaScriptのフレームワークなので、当然のことながらJavaScriptで開発することができます。
しかし公式ドキュメントも含めほとんどのドキュメントもTypeScriptを使用することを前提にしています。
Googleも社内の標準言語としてTypeScriptを取り入れたというニュースもあったことだし、今後はTypeScriptが主流になる可能性が大きいので、学んでおいて損はないはず!
またTypeScriptの特徴として、C#などの言語と書き方が似ているという特徴があります。
仕事ではメインの言語としてC#を利用している私としてはとてもありがたい!
まだちょろっとしか触っていないのと、正直JSを真面目に勉強したり利用したことがないので比較できませんが、そこまで苦労せずにかけそうな印象でした。