記事検索
購読 する ログイン

攻略！AngularJS 1.2 第1回 AngularJSとは

第1回目はAngularJSとはどのようなことができるのか、どのような特徴があるのかを簡単なデモを用いて説明します。これから実装を理解するにあたってのベースとなる概要をおさえましょう。

カテゴリー
JavaScript >
Angular

発行

著者 外村 和仁 フロントエンド・エンジニア
攻略！AngularJS 1.2 シリーズの記事一覧

本シリーズはAngularJS 1.2での解説です。内容をアップデートした新シリーズ「攻略！AngularJS 1.5」があります。

はじめに

本シリーズではJavaScriptのアプリケーションフレームワークであるAngularJSの基本的な機能や使い方について解説します。

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

MVWフレームワーク

AngularJSは、Googleが開発を行っているJavaScriptのアプリケーションフレームワークです。いわゆる*MV**と呼ばれる種類のフレームワークで、Backbone.jsやEmber.js、Knockout.jsなどとよく比較されます。

*MV**フレームワークというのは、MVC、MVVM、MVPなど、さまざまな設計パターンの総称で、Model、View、ほかに何かという意味です。

AngularJSは自身をMVWのフレームワークと言っています。これはModel-View-Whateverの略語で、MVとおおよそ同じ意味と捉えてよいでしょう。

*注：MVWの出典

https://plus.google.com/+AngularJS/posts/aZNVhj355G2において以下のように述べられています。

Having said, I'd rather see developers build kick-ass apps that are well-designed and follow separation of concerns, than see them waste time arguing about MV* nonsense. And for this reason, I hereby declare AngularJS to be MVW framework - Model-View-Whatever. Where Whatever stands for "whatever works for you".

テンプレートとしてのHTML

まずはAngularJSを使うと、どのようにアプリケーションが書けるようになるかを見てみましょう。次の例を見てください。

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

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

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
<meta charset="utf-8">
<title>AngularJS incremental search demo</title>
<script src="../lib/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<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>
 
function MainCtrl($scope) {
  $scope.people = [
    { firstName: 'Kazuhito', lastName: 'Hokamura' },
    { firstName: 'Takeshi',  lastName: 'Takatsudo' },
    { firstName: 'Akihiro',  lastName: 'Oyamada' },
    { firstName: 'Kazuhori',  lastName: 'Tokuda' },
    { firstName: 'Yukihisa',  lastName: 'Yamada' },
  ];
}

詳しい機能の説明や使い方については次回以降で解説しますが、このような処理がほとんど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="../lib/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="name">
<div>Hello {{name}}!</div>
</body>
</html>

JavaScriptは1行もなく、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が得意なこと・苦手なこと

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

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

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

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

コラム：AngularJSとBackbone.js

同じJavaScriptのアプリケーションフレームワークとして有名なものに、Backbone.jsがあります。

Backbone.jsはAngularJSとは対照的に、非常にシンプルで薄いフレームワークで、設計のベースの部分になるところをだけを提供します。その代わり、AngularJSと比べると、学習コストが低く、実装や設計の自由度は高めです。柔軟にどのようなケースにも対応しやすいという利点があるのです。

その反面、シンプルで柔軟であるということは、アプリケーションをすばやく実装できるようなフレームワークではないということです。Backbone.jsを使うことでコード量が激減したり、短期的な生産性を向上させるということはあまり期待できません。

このように、Backbone.jsとAngularJSは思想やアーキテクチャがまったく違うフレームワークです。一長一短なので、どちらを使ったほうがいいかというのは、アプリケーションの種類やチームの状況などにもよって変わってくるでしょう。

まとめ

今回はAngularJSはどのようなことができるのか、どのようなケースで力を発揮するのかというところを簡単に解説しました。

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