はじめに
前回AngularJSをご紹介しました。
今回はフレームワークの中でもAngularについて紹介したいと思います。
また、前回紹介したAngularJSとの違いについても紹介できればと思います。
Angularとは...
AngularはGoogle社によって開発されているJavaScriptフレームワークです。
非常に人気があり、WEBアプリケーションの開発では、Reactなどと並びよく利用されているJavaScriptフレームワークの一つです。
オープンソースライセンスであるMITに基づいて配布されています
AngularJSとAngularの違い
Angularは開発初期では「AngularJS」というプロダクト名でした。しかし、バージョン2にアップデートされたときに「Angular」に改名しています。
ただ、その中身は大幅に様変わりしています。
AngularJSはJavaScriptをベースとしたフレームワークですが、バージョンアップの際にTypeScriptをベースにしたものに変更されています。そのため、AngularとAngulerJSに互換性はありません。
メリット／デメリット
【メリット】
・フロントエンドの機能開発が可能
AngularはUI構築だけでなく、ルーティングや状態管理などフロントエンド開発に必要な機能が一通り揃っています。
特に新しく何かライブラリ等を追加しなくてもフロントエンド開発を始められる手軽さが強みです。
・あらゆるプラットフォームに対応
通常WEBアプリケーションを開発する際に、PCやスマートフォン、タブレットなど、動作を意識する必要があります。しかし、AngularではWEB、モバイルWEB、ネイティブモバイル、ネイティブデスクトップなどあらゆるターゲット向けのアプリケーション開発で使えます。
【デメリット】
・TypeScriptの学習が必須である
別のフレームワークであるReact、VueJSはTypeScriptを任意で開発に使うことができます。
しかし、Angularはロジックの記述はTypeScriptを使用して記述するので、開発にあたってはTypeScriptの知識が必須となります。
Angularの開発には型付けなどのTypeScriptの仕様を把握しなければならないので、TypeScriptを学習したことのない人には少々ハードルが高いです。
・開発の規模によってはオーバースペックである
Angularはフロントエンド開発に必要な様々な機能が搭載されています。
しかし、開発規模によっては必要のない機能などもあります。
例えば、小規模な個人サイトなどで状態管理の機能はあまり必要のない機能です。このように、開発規模によっては必要のない機能までついてくるので、その点は注意が必要です。
Angularの主な機能
・MVC（MVW）
MVC（MVW）というのはアプリケーションを設計するときの考え方の1つです。
「Model（データ）」、「View（画面）」、「Controller（コントローラー）」の頭文字を取ってMVC、「Controller（コントローラー）」の代わりに「Whatever（何か）」にしたものがMVWです。
組み合わせることで、1つのアプリケーションを動作させる考え方です。実のところ、MVCもMVWも大差はありませんので、あまり気にせずそういう枠組みで考えるんだということで次に進みましょう。
MVC（MVW）では、データを扱う部分（Model）、HTMLやCSSなどの画面を作る部分（View）、他の細かい制御を行う部分（ControllerまたはWhatever）など、役割が違うプログラムを、混在させない（別々のファイルで管理する）ため、アプリケーションの設計がスムーズに行えるのです。
・双方向データバインディング
HTMLを拡張して、より便利な機能を提供しています。
どんなアプリケーションでも、ユーザーが画面（View）で操作した内容をデータ（Model）に反映したり、データ（Model）の内容が変わったときに画面（View）に反映したりする必要があります。
WEBアプリケーションで、画面（View）を操作する場合は、データ（Model）に反映するために、以下のような動作をするようにプログラムを書く必要があります。
しかし、Angularの双方向データバインディングを使うと、以下のように、HTMLの要素が処理を行うプログラムと連動し、自動的に処理されるのです。
ここまでは、画面の要素を操作したらデータに自動的に反映されることを説明しましたが、逆に、データを変更すると自動的に画面に反映されるようにもなります。
本来はプログラムコードを組む必要がある処理をAngularが対応してくれるため、より少ないコードで機能を実装できるようになっています。
・コンポーネントの作成が早い
コンポーネントには2つのメリットがあります。
・同じような要素を多くのページで使い回すことができる
・各ページのHTMLが読み書きしやすくなる
コンポーネント内の要素を変更する場合は、コンポーネントの部分を変更するだけで済み、各ページを修正する必要はありません。
コンポーネントの作成は「angular-cli」というコマンドラインツールでも作成することができます。
このCLIを使用するとコンポーネントの作成が早くできます。
コンポーネントを作成するには下記のコマンドを実行することで、指定したコンポーネント名、場所に.html、.css、.ts、.spec.tsファイルが作成されます。
ng g component (コンポーネント名) (作成する場所)
おわりに
Angularを理解するために基礎知識を簡単に解説いたしました。
Angularを一言で表すと『Google社によって開発されたJavaScript向けオープンソースWebアプリケーションフレームワーク』です。
少しでも役に立てればと思います。
Angulerを使って開発してみましょう。