AngularJSとAngularの違いを説明できるなら、あなたはかなりのフロントエンド通であるか、既に案件で取り扱ったことがあるかでしょう。

大抵のITエンジニアは両者の違いについて知らないと思います。

案件の紹介や求人サイトでも間違われることがありますが、実際はJavaとJavaScriptくらい違うものかもしれません。

実はAngularJSのロゴの周りにはグレーの枠があり、微妙にAngularと異なるのですがこれも誤った使われ方をされているのが現状です。

本記事ではそんな勘違いされやすい『AngularJS』について解説を行っていきましょう。


AngularJSとは

AngularJSはJavaScriptのフロントエンドフレームワークです。

Googleおよびコミュニティにより開発されているオープンソースのソフトウェアで、MITライセンスにより管理されています。

Wappalyzerで確認したところ、AngularJSを使用しているWebサイトは以下でした。

  • AWSコンソールログイン画面・AWSドキュメント
  • Microsoftアカウント
  • Upwork（フリーランスプラットフォーム）

AWSやMicrosoftのサービスは利用したことがある方も多いのではないでしょうか。AngularJSは身近なWebサービスで採用されています。


AngularJSとAngularの歴史

AngularJSとAngularという2種類のフレームワークの違いを歴史的な経緯から説明しましょう。

AngularJSはGoogleの開発者が社内プロジェクトでWebアプリケーションを簡単に構築できるよう作成したフレームワークです。

最初のAngularJSは2009年に発表され、2012年にバージョン1.0.0がリリースされました。

しかしAngularJSはパフォーマンスやアーキテクチャに問題を抱えており、バージョン2では丸ごと書き直されることになります。

そして2016年、Googleは新たに後継となるAngular2を提供し、このとき名称がAngularJSからAngularに変わりました。

つまりAngularJSはバージョン1、Angularはバージョン2以降を指す名称であり、両者は互換性のない別物ということです。

AngularJSは長年に渡りサポートされてきましたが、2018年7月にバージョン1.7をリリースし、長期サポート期間に突入しました。

2021年6月30日にはサポートが終了する予定です。


AngularJSとAngularの違い

次は技術的な面でAngularJSとAngularがどのように違うのかを見ていきましょう。


JavaScriptとTypeScript

AngularJSはJavaScript、AngularはTypeScriptというプログラミング言語で書かれています。

JavaScriptはオブジェクト指向スクリプト言語で、最近ではES5・ES6などの新しい標準規格が出ているのをご存知でしょうか。

AngularJSは歴史こそ古いですが、もちろんES6を使用して書くこともできます。

TypeScriptはAltJS（代替JavaScript言語）という種類の言語で、JavaScriptにコンパイルしたものをブラウザで読み込むものです。


MVWパターンとコンポーネント指向

AngularJSはMVWパターン、Angularはコンポーネント指向のアーキテクチャを採用しています。

有名なデザインパターンといえばMVCパターンですが、これはModel・View・Controllerの役割に分けてコードを管理する方法です。

MVWパターンはMVCパターンの派生の1つで、Model・View・Whateverから構成されます。

Whateverは「なんでも」という意味でコントローラーや後述のスコープを記述する場所です。

一方Angularはコンポーネント指向で、これは再利用可能な部品を機能単位で切り分ける手法になります。


ディレクティブの違い

AngularJSを構成するのは複数のディレクティブです。

AngularJSやAngularにおけるディレクティブは、テンプレート上のDOM要素に付けるマーカーのようなものを意味します。

ディレクティブに指定されたプロパティや動作は、レンダリング時にDOM要素に反映される仕組みです。

AngularJSではフレームワーク側で用意された多種類の組み込みディレクティブを駆使して実装を進めていきます。

対してAngularのディレクティブはテンプレート付きディレクティブ・構造ディレクティブ・属性ディレクティブの3種類のみです。

一部AngularJSと同じ役割のディレクティブもありますが、多くのディレクティブはバインディング機構やデコレータなどに置き換わります。


AngularJSの使い方

AngularJSの特徴を説明する前にAngularJSを動かす準備をしましょう。


AngularJSのダウンロード

AngularJSは公式サイトの「Download AngularJS」から入手します。CDNやnpmを利用しても構いません。

AngularJS

AngularJS v1.2.xはIE8をサポートする古いバージョンで、現在はセキュリティの修正のみが続けられています。

またbowerやnpmからインストールを行うことも可能です。


サンプルコード

今回は「AngularJS v1.7.9」のMinified版をダウンロードし、index.htmlと同階層にあるjsディレクトリに格納しました。

  1. <!doctype html>
  2. <html ng-app=”app”>
  3. <head>
  4.  <meta charset=”UTF-8″>
  5. <title>AngularJS Example</title>
  6.  <script src=”js/angular.min.js”></script>
  7.  <script>
  8.   const myApp = angular.module(‘app’, []);
  9.   // スクリプトを記述
  10.  </script>
  11. </head>
  12. <body>
  13. <!– HTMLを記述 –>
  14. </body>
  15. </html>

これだけでAngularJSが使えるようになります。Angularに比べれば遥かに簡単な導入手順です。

以降の説明ではコメントが記載されている箇所に、HTMLやスクリプトを記述しながら説明を進めていきます。


AngularJSの特徴

AngularJSの特徴をソースコードで確認しながら見ていきましょう。


HTMLテンプレート

例えばブログ記事の一覧を表示する場合は、一覧に表示するアイテム1つ1つのHTMLをテンプレートとして定義しておきます。

テンプレートは一覧に表示するデータが渡されると、必要回数ループを繰り返して全てのデータを定義に従って表示するでしょう。

  1. myApp.controller(‘PostController’, [‘$scope’, function($scope){
  2. $scope.postList = [
  3.   { title: ‘titleA’, date: ‘2020-05-01’ },
  4. { title: ‘titleB’, date: ‘2020-05-02’ },
  5.  { title: ‘titleC’, date: ‘2020-05-03’ },
  6.   ];
  7. }]);   

「ng-repeat」は配列データを繰り返すfor文のような機能を持っています。

  1. <table ng-controller=”PostController”>
  2. <tr>
  3. <th>Title</th>
  4.  <th>Date</th>
  5.  </tr>
  6.   <tr ng-repeat=”post in postList”>
  7.  <td>{{ post.title }}</td>
  8. <td>{{ post.date }}</td>
  9. </tr>
  10. </table>

 

スコープ

同ソースコードをよく見ると$scopeという記述があるのに気が付いたでしょうか。

$scopeにはpostListのようなデータを渡す機能の他、イベントの監視などを行う役割もあります。

  1. <div ng-controller=”PostController”>
  2. ng-controllerあり：{{ postList }}
  3. </div>
  4. <div>
  5.   ng-controllerなし：{{ postList }}
  6. </div>

$scopeに定義した値はng-controller属性を指定したタグ内のみで参照可能です。ng-controllerなしの方は表示されません。

このような変数の参照可能範囲のことをスコープと呼びます。


双方向データバインディング

AngularJSで双方向データバインディングを実現するにはng-model属性を定義しましょう。

  1. <body>
  2. <form>
  3. <label for=”title”>Title：</label>
  4. <input id=”title” name=”title” type=”text” ng-model=”title”>
  5. </form>
  6. <div>
  7.   {{ title }}
  8. </div>
  9. </body>

テキストボックスの値がtitleという名前の変数として格納されます。上記のように「{{ title }}」で取り出しが可能です。

またテキストボックス内の入力内容を変更すると、

タグ中に表示されるtitleのテキストも変化します。

これはAngularJSが双方向データバインディングの機構によって、値と描画の同期処理を行っているためです。


AngularJSのメリット

AngularJSのメリットを解説しましょう。


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

AngularJS・Angularは共にフルスタックフレームワークです。

あるアプリケーションの開発に必要な全ての機能を搭載していることをフルスタックであると表現します。

例えばシングルページアプリケーション（SPA）の開発にはルーティング・Ajax通信・双方向データバインディングなどの機能が必要です。

これらの基本的な機能は簡単な記述で呼び出せるようになっています。


素早い開発が可能

サンプルコードを見ても分かる通り、AngularJSを動かすまでのステップは然程多くありません。

また必要な機能は用意されており、開発者は決められたディレクティブを決められた記法で指定するだけです。

記述量自体が少ないので時間の節約にもなります。

双方向データバインディングが標準で搭載されている点もありがたいです。


AngularJSのデメリット

AngularJSのデメリットであるパフォーマンスの低さは、GoogleがAngular2を1から書き直した理由でもあります。

ここからはAngularJSのデメリットについて解説しましょう。


記法が複数存在する

AngularJSで同じことを行う方法はいくつかあるため、チーム開発で利用する際はきちんとルールを決めておく必要があります。

特にコントローラー間で値を共有するためのサービスなど、曖昧な部分ではスパゲッティーコードになりやすい傾向が見られるでしょう。

ディレクトリ構成やディレクティブ・コントローラー内の処理の粒度については、事前に認識を合わせておくのが良いと思います。


パフォーマンスが低い

AngularJS v1.7.9本体は172KB、jquery-3.5.1.min.jsが87.3KB、React v0.14.3のreact.min.jsが132KBです。

フルスタックな分、全体のファイル容量は大きくなります。

また監視対象となる要素が増えるほど、UI周りの描画速度が低下してしまう問題が厄介です。


新機能が開発されることはない

AngularJSに対する修正はセキュリティに関する欠陥・ブラウザやjQueryのバージョンアップにより動かなくなる場合に限定されています。

今以上に新しい機能が実装されることはありません。

AngularJSは公式ドキュメントやGitHubで、Angularへの移行を考える時期が来ていると指摘しています。


AngularJSからの移行

AngularJSとAngularの間に互換性はありません。

しかしngUpgradeというライブラリを利用して両方動作するようにし、移行期間を設けることは可能です。

AngularJSからAngularに移行するなら、まずはAngularJSのコードを「AngularJS Style Guide」に即したスタイルに修正する必要があります。

またTypeScriptへの移行・コンポーネントディレクティブへの書き換えなども必要です。

いずれにせよ自動で全て終わるようなツールはないので注意して下さい。


AngularJSの学習方法

AngularJSを学習する際に大事なのは、いかに正確な情報を取得できるかというところです。

検索結果にはAngularJS・Angularが混在している他、タイトルがAngularJSにもかかわらず中身がAngularのものもあります。

確実なのは公式ドキュメントやAngularJS・AngularのGitHub Issueなどです。

また技術書や書籍などはまだ販売されているので、本を1冊購入してしまうのも良いと思います。

また移行目的で学習を始める方は、AngularJSとAngularの知識がごちゃごちゃにならないように注意しながら進めて下さい。


おわりに

AngularJSの現状を調べる限り、先はそう長くないでしょう。

過去にAngularJSを利用して作られていた大手Webサイトも、他のJavaScriptフレームワークやライブラリへの移行が済んでいます。

既にAngularJSを取り扱ったことがある方は、開発経験を活かしてプロジェクトに参加するのも良いでしょう。

もしフロントエンドの技術を新たに習得しようと考えているなら、残念ですがAngularやReactのような流行りのものをおすすめします。

AngularJSに関する知識は本記事程度に留めておけば問題ないです。

フロントエンドフレームワークは流行り廃りが激しく種類も多いので、時間とコストに見合う技術かを判断してから学習を始めましょう。