目次
AngularJSを知った経緯
先日、Developers Summit 2015に参加したところ、「AngularJSの今とこれから – フロントエンドエンジニア座談会(仮) 」というJavaScriptフレームワークについての講演がありました。
「AngularJS」の得意・苦手とする分野など、様々な特色を知ることができ非常に参考になりました。
その時の講演を思い出しつつ、実際に「AngularJS」を触ってみました。
詳しい講演の内容は下記サイトにまとめられています。
AngularJSの今とこれから – フロントエンドエンジニア座談会 #devsumiD 参加メモ
Googleトレンドで他のJavaScriptフレームワークと比較してみると一目瞭然。
人気の高さが伺えます。
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ツールができました。
少しソースを覗いてみます。
ng-app
Angularを使うときに必要なもの。
使いたいブロックbodyやhtmlなどに記述する。
ng-controller=”TodoCtrl”
Angularのコントローラー(C)にあたる部分。
todo.jsのfunction TodoCtrl($scope)を呼び出しています。
{{remaining()}}
テンプレート構文
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の学習コストが高い。
(聞いたことがない単語が次々でてきます。) - 導入する場合は人員の確保が課題になってくる。
今後
今回「AngularJS」について、調べてみましたが、「AngularJS」はすぐれたフレームワークではあるが、万能ではないということがわかりました。
現状JavaScriptは用途によって、フレームワークを使うのか、jQueryなのか、フルスクラッチなのか、選択肢を切り替えていく必要があるようです。
しかし、1つのオプションとして「AngularJS」は非常に有効だと思います。