Angular_基本的な概念 #260日目
「Angular (アンギュラー)」とは、Googleによって開発されているJavaScriptのフレームワークです。非常に人気があってReactなどと並んで最もよく使われています。正確には、JavaScriptのスーパーセットであるTypeScriptをベースにファイルが構成されます。
サーバーと連携する機能もあるため、WEBアプリ開発では何でもできるといってよい代物です。
MVC (Model / View / Controller)
Angularの設計思想はMVCモデルです。「Model」はデータを扱う部分を、「View」は画面(HTMLやCSS)を、「Controller」はその他の細かい制御を行う部分をそれぞれ表しており、これら役割の違うプログラムを混在させないことでスマートな設計になるようになっています。
双方向データバインディング
通常、画面(view)からの入力をモデルに反映したり、モデルの内容が変わった時に画面(view)に反映するには、データを処理するためのプログラムを記述する必要があります。
Angularの双方向データバインディングではここを自動化してくれており、自分で記述する必要がないため、より少ないコードで機能を実装できるようになります。
コンポーネント
HTMLを部品化して再利用できる機能です。機能ごとにHTMLを作っておき、それを一つの単位として扱えるので、簡単に再利用ができます。同じコードがまとまるので、各ページのHTMLがシンプルになって読み書きしやすくなるという利点もあります。
コンポーネントには以下が含まれます。
・@Component()デコレーターを付けたTypeScriptクラス
・HTMLテンプレート
・CSSスタイル
@Component()デコレーターは以下のように記述します。
@Component({
selector: 'app-heroes', /*親テンプレートでこのコンポーネントを表すワード*/
templateUrl: './heroes.component.html', /*このコンポーネントに紐づくHTML*/
styleUrls: ['./heroes.component.css'] /*このコンポーネントに紐づくCSS*/
})Reactとの違いは？
ReactはFacebookが開発しているフレームワークで、Angularと人気を二分するものです。違いを一言でまとめると、Angularは最初から多くの機能が標準装備されている反面、不要な機能を排除できない等のデメリットがあります。Reactは必要なライブラリを選んで追加できる反面、自分で選ばなければならないことがデメリットにもなります。
Angularは融通が効かないこともあるみたいですが、Angularの思想に沿って開発する場合において、極めて高い生産性を実現できるという良さがあります。
ここまでお読みいただきありがとうございました！！