支援対象地域:札幌、仙台、関東、愛知、関西、広島、福岡


「AngularJS」とは

AngularJSとは、Google社とコミュニティによって開発されたオープンソースのフロントエンド側のWebアプリケーションのフレームワークです。初版は、2009年に発表されており、JavaScriptで書かれています。 クライアントサイド側のMVCアーキテクチャと、一般的にインターネットアプリケーションで用いられるコンポーネント群をともに提供することができ、アプリの開発とテストをより効率的にすることが目的とされています。 また、シングルページアプリケーションの開発が可能であるフレームワークのため、1つのフレームワーク内で全ての機能が完結するフルスタックフレームワークです。

AngularJSの特徴

JavaScriptのフレームワークとして知られるAngularJSですが、AngularJSの特徴としては以下のようなものがあります。

①HTMLテンプレート

AngularJSでは、HTMLがテンプレート言語として使用しています。制御構造やUIコンポーネントは、カスタム属性として使用されます。また、「エクスプレッション構文」と呼ばれる「{{}}」で対象となる部分を囲むような式を使用して、ロジックを記述することも可能となっています。

②双方向バインディング

AngularJSを代表する機能のひとつで、モデルとinputフィールドをバインドすることによって、JavaScriptによるモデルの変更とユーザーの入力によるフィールドの変更が双方向になるというメリットがあります。

③Ajax通信

JavaScriptで行うサーバーとの通信というと、XMLHttpRequestを使った非同期処理が挙げられます。AngularJSは、サーバーとのデータ送受信に使用するためのモジュールを持っており、「$http」のモジュールを使用して通信を行うことが可能です。

④ルーティング

AngularJS は以前、「ngRoute」というモジュールを使用してルーティングの設定を行うことが主流だったのですが、最新版では「ngNewRouter」というモジュールのリリースがされ、このモジュールを使用することによりルーティングを行うことができます。

AngularJSとAngularとの違い

AngularJSと比較されるものの一つに、AngularJSののちに作成された「Angular」と呼ばれるものがあります。 AngularJSと比較したAngularの特徴を以下にまとめました。

①AngularにはScopeやコントローラーという概念が無い代わりに、コンポーネントベースのアーキテクチャを使用する。 ②推奨される開発言語がJavaScriptからTypeScriptに変更された。 ③データバインド等の文法の変更が可能。 ④フィルターからパイプに変更された。

AngularJSのメリット

ここからはAngularJSを使用するメリットについてお話します。

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

冒頭でもお話ししましたが、AngularJSはフルスタックフレームワークです。「フルスタック」の使用される場合としては、Webアプリケーションの開発などに必要な全ての機能を搭載している場合に表現されます。 例えばシングルページアプリケーションの開発にはルーティングやAjax通信・双方向データバインディングなどの機能が必要になりますが、フルスタックフレームワークであるAngularJSはそれらの機能を搭載しており、これらの基本的な機能は簡単な記述で呼び出せるようになっています。

②記述量が少なく効率的な開発を実現できる

AngularJSは、動かすまでのステップはそれほど多くありません。また、必要な機能は用意されており、開発者は決められたディレクティブを記法に則って指定するだけです。また、記述量自体が比較的少ないので効率的な作成に繋がる場合もあります。

AngularJSのデメリット

ここまでメリットをお話ししてきましたが、ここからはAngularJSのデメリットについてお話しします。

①パフォーマンスの低さ

AngularJSはフルスタックなフレームワークな分、全体のファイル容量は大きくなります。また、監視対象となるものが増えれば増えるほど、UI周りの描画速度が下がってしまうことが弊害となっています。のちにAngular2が作成されていますが1から書き直されたており、このパフォーマンスの低さが理由でもあります。

②同じような結果を反映できる記法が複数存在する

AngularJSで同じことを行う方法はいくつかパターンがあるため、チームで開発を行う際利用する場合は注意が必要です。 その後の開発を進めていくためにも、事前に詳細の認識をすり合わせておくのが得策だと言えます。

③新しい機能が開発されない

AngularJSの修正は、セキュリティに関する欠陥やブラウザなどがバージョンアップした際に動かなくなってしまう場合となっています。今後新しい機能が実装されることはないと言えるでしょう。AngularJSも公式のドキュメントなどで、Angularへの移行を考える時期が来ているとしています。

まとめ

いかがでしたでしょうか? AngularJSは2009年ごろから古くからあるフレームワークです。 メリットももちろんありますがデメリットもあるので、AngularJSを使用する際はデメリットを加味して作成するようにしましょう。 使用する機会があれば参考にしてみてください!