【初心者用】Angularについて
いままでReactのみ調べて開発に使用していたのですが、改めて他のフレームワークについて知りたいと思いまとめたいと思いました。
後ほど改めて確認する際に、初心者でも理解できるようにまとめれるようにします。
1. そもそもAngularって何？
Angularとは、Webアプリケーションのフロントエンドを開発する際に頻繁に用されています。
AngularはReactやVueと同じように、１ページのみでWebサイトの機能が完結しているSPAの開発をするのに最適なフレームワークです。
このフレームワークはGoogleが開発をしており、オープンソースとして公開されているJavaScriptフレームワークです。
Angularは更新を可能な限り簡単にするように設計されており、最小限の労力で最新の開発をすることができます。
ですので、一人での開発や大規模なプロジェクトでも拡張できるプラットフォームを使用できます。
また、Vue.jsと同じで双方向データバインディングの機能を採用されています。
AngularはAngular.jsの後継としてAngularになり、JavaScriptのフレームワークの一つなのですが、JavaScriptから派生したTypeScriptを元に開発されています。
また、AngularはWebアプリケーションなどのフロントエンド開発であればフルスタックでの開発が可能となっています。
2. Angularのメリット
AngularはReactやVueと共にJavaScriptのフレームワークの中でも、特に人気となっているものの一つです。
AngularはReactやVueの様に、どのようなメリットがあって採用されているのか以下にまとめます。
■フルスタックのアプリ開発が可能
AngularはWebアプリケーションの開発に必要なすべての機能があり、フロントエンド部分の開発を単体で可能になっているフルスタックのフレームワークです。
■MVCを採用しているためスムーズにアプリケーション設計ができる
AngularはModel,View,Controllerに分けて考えて開発するMVCという考え方を使用しています。
Angularは分割してそれぞれ独立した形で開発するため、スムーズにアプリケーション設計をすることが可能になります。
■双方向データバインディングを使用し、コードの記述を少なくする
Angularは双方向データバインディングという機能を持っているため、開発に必要なコードの量を減らすことができます。
Web開発では画面操作の内容をデータとして反映させるため、以下の様に動作するプログラムを記述する必要があります。
①画面操作のDOMの内容を取得する
②HTML（DOM）をデータとして処理する
③データを画面に反映させる
双方向データバインディング機能を使用すると、画面操作の内容を自動でデータに反映します。
そのため変更後のデータ内容が画面に反映されるので、更新前と更新後の両方のデータを監視して、必要に応じて更新・同期を行います。
そのおかげで処理が必要な内容が減少するため、記述するソースコードが少なくすることができます。
そのため、開発を高速で効率よく進めることができるようになります。
■多様な動作端末のWebアプリケーション開発が可能
Webアプリケーション開発は、ブラウザを使用できる環境であれば使用できます。
AngularでWebアプリケーション開発を開発すれば、AndroidやIOSなどの動作環境を考えて開発する必要がありません。
■生産性の向上
Angularは既存の設計が組み込まれているので、それに沿って開発をすることにより生産性の向上ができます。
Angularの設計通りに開発さえできれば、他のフレームワークよりも開発スピードが速くなります。
3. Angularのデメリット
Angularにもデメリットというよりも、注意すべき点がありそちらを把握しておくことも必要です。
以下に注意すべき点をまとめます。
■頻繁に更新される
Angularは他フレームワークと比較した際に、バージョンアップの頻度が高いことがあげられます。
ある意味ではユーザーにとってもメリットといえるのですが、しかし、それだけ頻繁に機能変更が行われると仕様に振り回されてしまいます。
例えを言うと、バージョンアップで一部の機能が急に使えなくなるなどが起こる可能性があります。
さらに、バージョンアップ前のもので開発したものをメンテナンスする必要が生じる場合もあります。
このように、頻繁にバージョンを更新してくれることはメリットでもありデメリットでもあります。
■機能が豊富なため、学習コストが高くなる
Angularは他フレームワークよりも機能が豊富なので、大規模なアプリケーション開発も可能となっています。
ですが、機能が豊富ということはその分学習する項目が多く存在しているということでもあります。
Angularは他フレームワークにはない独自の設計や用語などがあり、それも含め学習コストが他よりも高くなる要因となっています。
4. 片方向バインディングと双方向バインディングについて
■片方向バインディング
片方向バインディングでは、イベントはテンプレートかコンポーネントのいずれかからもう片方へと伝達されます。
また、値の変更に関してもいずれか片方へと伝達されます。
■双方向バインディング
双方向バインディングは、値の変更は双方向に伝達されるので、紐づけられた値に関してはシンクロ状態になります。
4-1. Angularのバインディングの種類について
■Interpolation（補間）
バインディングの基本的な構文となっており、HTMLや変数に格納されている値や計算式、関数（メソッド）などを出力する為に使用されます。
■プロパティバインディング
プロパティバインディングでは、HTML要素のプロパティと変数などの値が紐づけられます。
プロパティバインディングは4種類あり以下にまとめます。
4-2. 属性バインディング
属性バインディングでは、DOMが持つ属性をコントロールします。
上記の属性に関しては、from,actionなどのことで、スタイリングに関連するものはスタイルバインディングといいます。
4-3. クラスバインディング
クラスバインディングは要素にセットされているクラスを変更するためのバインディングとなります。
上記のバインディングは便利なので使用頻度も高くなっています。
4-4. スタイルバインディング
スタイルバインディングはCSSのプロパティを一つだけ変更したい場合に使用します。
クラスバインディングはクラスの追加や変更を行いましたが、スタイルバインディングは要素の一つのプロパティと結びつきます。
4-5. イベントバインディング
イベントバインティングは、イベント処理が発火した場合にトリガーとなるバインティングとなります。
こちらはテンプレートからコンポーネントに向けて情報を伝達することができます。
5. まとめ
今回はAngularをまとめてみましたが、バインディングなど他では触ることのない要素を学ぶことができました。
一つのフレームワークやライブラリなどを触るのは良いですが、このように広く学ぶことも大切だなと感じました。