2015.05.25
WEB

JavaScriptフレームワーク AngularJSに触れてみました

1 AngularJSを知った経緯
2 AngularJS日本語リファレンスを見てTodoツールを作る
3 まとめ
- 3.1 メリット
- 3.2 デメリット
4 今後

AngularJSを知った経緯

先日、Developers Summit 2015に参加したところ、「AngularJSの今とこれから – フロントエンドエンジニア座談会（仮）」というJavaScriptフレームワークについての講演がありました。

「AngularJS」の得意・苦手とする分野など、様々な特色を知ることができ非常に参考になりました。

その時の講演を思い出しつつ、実際に「AngularJS」を触ってみました。

詳しい講演の内容は下記サイトにまとめられています。
AngularJSの今とこれから – フロントエンドエンジニア座談会 #devsumiD 参加メモ

Googleトレンドで他のJavaScriptフレームワークと比較してみると一目瞭然。
人気の高さが伺えます。

Googleトレンドの人気推移

AngularJS日本語リファレンスを見てTodoツールを作る

下記のAngularJS 日本語リファレンスのサンプルを見ながらTodoツールを作ってみました。
AngularJS日本語リファレンス


<!-- index.html -->
<html ng-app>
<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
  <script src="todo.js"></script>
  <link rel="stylesheet" href="todo.css">
</head>
<body>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
    <span>残り:{{remaining()}}/{{todos.length}}</span>
    [ <a href="" ng-click="archive()">完了</a> ]
    <ul class="unstyled">
      <li ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.done">
        <span class="done-{{todo.done}}">{{todo.text}}</span>
      </li>
    </ul>
    <form ng-submit="addTodo()">
      <input type="text" ng-model="todoText" size="30"
              placeholder="新しいTODOを追加">
      <input type="submit" class="btn-primary" value="追加">
    </form>
  </div>
</body>
</html>


// todo.js
function TodoCtrl($scope) {
  $scope.todos = [
    {text:'ブログを書く', done:true},
    {text:'AngularJSを勉強する', done:false}]

  $scope.addTodo = function() {
    $scope.todos.push({text:$scope.todoText, done:false});
    $scope.todoText = '';
  };

  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  $scope.archive = function() {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };
}


/*todo.css*/
.done-true {
  text-decoration: line-through;
  color: grey;
}

TODOツールができました。

完成したToDoツール

少しソースを覗いてみます。

ng-app

Angularを使うときに必要なもの。
使いたいブロックbodyやhtmlなどに記述する。

ng-controller=”TodoCtrl”

Angularのコントローラー(C)にあたる部分。
todo.jsのfunction TodoCtrl($scope)を呼び出しています。

テンプレート構文
todo.jsの$scope.remainingが表示されます。
$scopeのメンバ変数やメソッドの返り値などを呼び出せる？

ng-repeat=”todo in todos”

todo.jsの$scope.todosの内容がループして表示されます。

ng-model=”todoText”

Angularのモデル(M)にあたる部分
todo.jsの$scope.todoTextの値が入ります。
Angularに相互のデータバインディングが可能になる。

$scope

scopeはAngularJSでビュー側に値を渡すときに利用するサービス。
scopeを使ってビューとコントローラーがデータをやりとりする。

まとめ

メリット

チュートリアルや情報が豊富
管理画面やユーザーのマイページなどでは、高い効果を発揮出来ると思います。
コード量が減る。
ソースの書き方も統一されて、可読性が上がる。

デメリット

「AngularJSは魔法だ」という話もあり、「AngularJS」が対応できる範囲を超えた場合は苦労しそう。
(その場合は別の選択肢に切り替える必要があるかも。)
jQueryと併用するときも、ハマるポイントがあるとのこと。
(AngularJSをわかっていないと難しいかも)
AngularJSの学習コストが高い。
(聞いたことがない単語が次々でてきます。)
導入する場合は人員の確保が課題になってくる。