攻略！AngularJS 1.5 | 第1回 AngularJS 1.5とは

攻略！AngularJS 1.5 第1回 AngularJS 1.5とは

安定したフレームワークで利用されることが多くなってきたAngularJSの、基本から実装方法までを解説します。現在安定的に利用できる、バージョン1.5での解説です。

カテゴリー: JavaScript >; Angular

2016年9月15日発行

著者宇野陽太フロントエンド・エンジニア

攻略！AngularJS 1.5 シリーズの記事一覧

AngularJSのサポートは2022年末で公式に終了しました。

はじめに

本シリーズは、2014年に連載した攻略！AngularJS（執筆当時はバージョン1.2.7）を、本記事執筆時点（2016年9月現在）での最新バージョンである、1.5系に合わせて書き直したものです*。現在の状況に合わせ、加筆・修正しています。

*注：今後のバージョンアップ

近々、バージョン1.6がリリースされるかもしれません。その際は再度動作を検証し、記事も合わせてアップデートする予定です。

バージョン1.2系からバージョン1.5系に至るまでいろいろな機能が追加され、不便だったところが改善されてきました。それによって、アプリケーション自体の設計方法なども、当時と比べると変わってきたように思います。フレームワークとしては安定しており、エンタープライズ業界でも注目されつつあるようです。

ちょうど記事公開の本日、Angular 2がリリースされましたが、安定的に運用できるバージョン1.5系は、現実的にはまだまだ利用する場面も多いかと思います。バージョン1.5系には、Angular 2への移行をしやすくするような要素もありますので、移行を考えている人はチェックしておくといいのではないでしょうか。

初回は、AngularJSを使うとどのようなことができるのか、どのようなフレームワークなのかを簡単に紹介します。

なお、紹介するデモは次のリポジトリからダウンロード、またはクローンできます。併せて参照してください。

攻略！AngularJS 1.5 デモリポジトリ

2016-angularjs

AngularJSとは

AngularJSは、Googleが開発を行っている、いわゆるMV**と呼ばれる種類の、JavaScriptアプリケーションフレームワークです。

注： `MV`フレームワーク

MV*フレームワークというのは、MVC、MVVM、MVPなど、さまざまな設計パターンの総称で、Model、View、他に何かという意味です。AngularJSは自身をMVWのフレームワークと言っており、これはModel-View-Whateverの略語で、MV*とおおよそ同じ意味と捉えてよいでしょう。

執筆時点での最新バージョンは、1.5系ですが、古いブラウザに向けて、1.2系もダウンロードできるようになっています。

AngularJS公式サイト

AngularJSには、主に次のような2つの特徴があります。

HTMLに記述していくテンプレート
双方向データバインディング

そのほかにも細かい特徴はありますが、この記事では後半でこの2つの特徴について解説していきます。

AngularJSが得意なこと・苦手なこと

AngularJSを使うと、設計や実装をある程度強制され、それに従うことで、コード量が削減されたり、実装者による品質の差を小さくするなど、生産性が大きく向上することが期待できます。

一方で、すべてのケースでAngularJSが生産性を向上させるわけではありません。これは私自身がAngularJSを使ってアプリケーションを開発してみた上で感じたことですが、AngularJSは独自の概念や機能が多いので、少し複雑なことをしようとすると、とたんに学習コストが高くなったり、AngularJSのルールから外れたことをしたい場合に柔軟に対応するのが大変です。

たとえば、アニメーションをバリバリに効かせた、インタラクティブなWebアプリケーションなどは、あまりAngularJSは向いていません。そのようなアプリケーションを実装できないというわけではありませんが、実装コストや学習コストに見合うだけの恩恵が受けられる可能性は低いでしょう。

逆に、あまりアニメーションなどの派手な動きを必要としない、たとえば、業務用アプリケーションや、サービスの管理画面など、データの変更やそれにともなうUIの描画処理が頻発するようなアプリケーションには向いています。AngularJSはそういった用途で利用すると、生産性を大きく向上させる可能性のあるフレームワークではないかと思います。

また、詳細についてはこのシリーズの今後の回で述べますが、AngularJSは内部で変数が変更されたかどうかのチェックを行います。基本的には、AngularJS用に定義したすべての変数のチェックを行うため、どうしてもこの処理を行う時間がかかってしまいます。

一般的なアプリケーションであれば、十分な速度で実行されるので、問題となることはまずないと思います。ですが、アプリケーションの規模が大きい場合、この処理にかかる時間を減らすために、作り方を工夫する必要が出てきます。AngularJSに限った話ではありませんが、パフォーマンスを追求するのであれば、別の方法も検討したほうが良いでしょう。

その他のライブラリとの比較

AngularJSは、Backbone.jsやVue.js、Reactなどとよく比較されます。それぞれのフレームワーク、ライブラリとの違いを見てみましょう。

名称	説明
AngularJS	HTMLテンプレートや双方向データバインディングが特徴。フレームワークの方針に合わせて設計・実装を行う
Backbone.js	非常にシンプルで薄いフレームワーク。設計のベースのみ提供し、設計や実装の自由度が高い
React	Virtual DOMを特徴とするViewに特化したライブラリ。View以外の実装や、設計の方針などは提供しない
Vue.js	双方向データバインディングに特化したフレームワーク。AngularJSの影響を受けてはいるが、シンプルで学習コストは低め

このように、それぞれ思想やアーキテクチャは異なり、一長一短です。どのフレームワーク、ライブラリを使うかは、アプリケーションの種類やチームの状況などによっても変わってくるでしょう。

テンプレートとしてのHTML

ここからは、前述したAngularJSの2つの大きな特徴について解説します。まずはAngularJSを使うと、どのようにアプリケーションが書けるようになるかを見てみましょう。次の例を見てください。

この例は検索ボックスにテキストを入力すると、入力に応じてリストの項目がフィルタリングされる、いわゆるインクリメンタル検索の動きになっています。

これをライブラリなどを使わず素のJavaScriptで実装するとしましょう。この場合、検索ボックスにイベントを張って値を取得し、マッチしたテキストを表示、マッチしなかった要素は非表示にするなど、多くの処理を書く必要がありますが、AngularJSでは次のように、とても簡単にこのような機能を実装できます。

<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS incremental search demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body>
<script>
  angular.module('myApp', [])
    .controller('MainCtrl', function($scope) {
      $scope.people = [
        { firstName: 'Kazuhito', lastName: 'Hokamura' },
        { firstName: 'Takeshi',  lastName: 'Takatsudo' },
        { firstName: 'Akihiro',  lastName: 'Oyamada' },
        { firstName: 'Kazunori',  lastName: 'Tokuda' },
        { firstName: 'Yukihisa',  lastName: 'Yamada' },
      ];
    });
</script>
<div ng-controller="MainCtrl">
  <input type="search" placeholder="Search" ng-model="search">
  <ul ng-repeat="person in people | filter:search">
    <li>{{person.firstName}} {{person.lastName}}</li>
  </ul>
</div>
</body>
</html>

詳しい機能の説明や使い方については次回以降で解説しますが、このような処理がほとんどJavaScriptでロジックを書かずに実現できていることがわかります。

また、JavaScriptのコードがほとんどない一方で、HTMLには見慣れない記述がたくさんあります。これはAngularJSの大きな特徴の一つで、HTMLを直接テンプレートとして使い、独自の記法でHTMLにいろいろな処理や変数を埋め込むことでアプリケーションを記述していきます。

このような、HTMLに記述していくテンプレートの機能が、まずAngularJSの大きな特徴と言えます。

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

もう一つのAngularJSの大きな特徴が双方向データバインディングです。AngularJSにおける双方向データバインディングは、データとUIを双方向に結び付け、UIが変更されれば自動的にデータが変更され*、データが変更されると自動的にUIが変更されます。

*注：データの自動変更

「自動的に」というのは裏でAngularJSが処理を行ってくれるため、アプリケーションの実装者がそのような処理を書かなくてもよいという意味です。

先ほどのインクリメンタル検索でも双方向データバインディングは使われていますが、やや複雑なので、もう少し簡単な例を見てみましょう。

テキストボックスに入力した文字がそのまま表示されるという単純なものですが、これはAngularJSだと次のように書くことができます。

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
<meta charset="utf-8">
<title>AngularJS bindinig demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="name">
<div>Hello {{name}}!</div>
</body>
</html>

JavaScriptは一行もなく、HTMLだけです。この例では、AngularJSが自動的にデータとUIの結び付けを行っています。

まずng-model="name"という属性がinput要素に付加されています。これによってこのテキストボックスに入力された文字は、AngularJSのアプリケーションの内部ではnameというデータとして保持され、入力されるたびにnameというデータは更新されます。

次に、nameというデータが更新されると、HTMLに埋め込まれている{{name}}というAngularJSのテンプレートタグの部分も、nameデータと紐付いており、nameデータが変更されると自動的に{{name}}の部分が再描画されます。

このようにnameというデータと、それに紐付けられたUIが双方向に同期するのが双方向データバインディングです。データとUIが自動的に同期される処理を自分で書くのはかなり面倒な処理となりますが、それをすべてAngularJSが自動的にやってくれるので、大幅にコード量が削減されます。

今回紹介した例ではほとんどJavaScriptによるロジックがありませんでしたが、もちろん、もう少し複雑で実用的な処理を書く場合にはJavaScriptの記述も増えていきます。

また、テンプレートと双方向データバインディング以外にもAngularJSはさまざまな機能を備えていますが、これらについては次回以降で解説していきます。

【コラム】双方向バインディングと単方向バインディング

双方向データバインディングが特徴のAngularJSですが、バージョン1.5から、単方向によるデータバインディングを指定する機能も追加されました。この機能は、ディレクティブとコンポーネントでのみ利用可能で、たとえばFluxのように、データの流れを意図的に一方向に限定したい場合に便利です。

また、単方向データバインディングが基本となるAngular 2への移行を、スムーズにする意図もあるのではないかと筆者は思います。この機能については、コンポーネントの回で詳しく解説する予定です。

まとめ

今回はAngularJSはどのようなことができるのか、どのようなケースで力を発揮するのかを簡単に解説しました。AngularJSの特徴であるHTMLに記述していくテンプレートと双方向データバインディングをうまく使えば、実装がぐっと楽になるケースがありそうだということがわかってもらえたかと思います。

次回から具体的なAngularJSの機能や使い方について解説していきます。