AngularJSの勉強会報告

田中宏幸

2013/3/6/03:01

Develop

2013年3月2日にAngularJSのハッカソンを行ないました。

ハッカソンは和気あいあいと喋りながら、AngularJSを勉強しました。いわゆる「ハッカソン」のような集中開発ではないゆるい雰囲気で進行するイベントです。

882020_470481203007766_1980299239_o

ハッカソン実施前に僕が持っていたAngularJSの情報はこんな感じ↓です。

クライアントサイドMVCである。
クライアントサイドMVCは、サーバーサイドMVCと開発環境を切り離す。
サーバーサイドの役割をAPI提供に絞り、クライアントサイドはそのAPIを叩くだけ。
サーバーサイドの言語に左右されないでクライアントサイドの開発ができる。
Backbone.jsなどの他のクライアントサイドMVCフレームワークよりも重い代わりに開発者が楽。
UIデータバインディングという特徴があって、アプリケーションのロジックがUIの挙動と連動することが多い場合に便利。

とくに最後の部分が、よく分からないけど期待度の高い部分でもありました。つまりUIの作りこみをするときに効率よく開発できるんじゃないか？と思ってました。

勉強会で分かったこと

で、実際に勉強会をして分かったことですが結論から申しますと…

フレームワークの規約が多くて習得が大変！
そもそもUIの作りこみをするためのフレームワークではない。

…ということでした。

フレームワークの思想としては、「サーバーサイドとクライアントサイドの開発を完全に切り離すべき」みたいなところだと思います。決して「いいUIのためのフレームワーク」ではありません。UI開発だけだったらjQueryのほうが絶対に使いやすいと感じました。そのほうがプラグインも多いですしね。

AngularJSを使う場合、クライアントサイドのロジック部分（つまりコントローラー/モデル）を開発する新たなエンジニアが求められてくると思います。人員がリッチな大規模開発では効果的かもしれないです。

AngularJSの使い方

せっかくの勉強会でしたので、AngularJSの使い方をご説明します。

基本的には公式サイトのサンプルが分かりやすいのですが、トップページの上から3番目の「Wire up a Backend」というサンプルを見ながら説明しますね。

index.html

index.htmlは一般的なサーバーサイドMVCのビューでいうところの layout.* に該当します。ここでAngularJS、コントローラー、モデルを定義した各ファイルを読み込みます。ng-viewの中に各ビューが挿入されます。

<!doctype html>
<html ng-app="project">
<!-- ng-app=でアプリケーション名を決める -->
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
		<!-- AngularJSの本体を読み込みます -->
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular-resource.min.js">
		<!-- このサンプルでは何かプラグインを読み込んでます -->
		</script>
		<script src="project.js"></script>
		<!-- コントローラーが含まれるjsを読み込みます -->
		<script src="mongolab.js"></script>
		<!-- モデルが含まれるjsを読み込みます -->
	</head>
	<body>
		<h2>JavaScript Projects</h2>
		<div ng-view></div>
		<!-- ng-viewを持つ要素の中に各ビューがインクルードされる -->
	</body>
</html>

project.js

project.jsはルーティングとコントローラーを担います。

angular.module('project', ['mongolab'])
	config(function($routeProvider) {
		$routeProvider
			when('/', {controller:ListCtrl, templateUrl:'list.html'})
			when('/edit/:projectId', {controller:EditCtrl, templateUrl:'detail.html'})
			when('/new', {controller:CreateCtrl, templateUrl:'detail.html'})
			//when()でルーティングを決める
			otherwise({redirectTo:'/'});
	});

function ListCtrl($scope, Project) {
	//*Ctrlが各コントローラーになる
	$scope.projects = Project.query();
}
...

list.html

list.htmlはビューのひとつです。index.htmlのng-viewを持つ要素の中に入れたい要素だけを書きます。

<input type="text" ng-model="search" class="search-query" placeholder="Search">
<!-- ng-model="search"は下にあるfilterを動かすために必要　-->
<table>
	<thead>...</thead>
	<tbody>
	<tr ng-repeat="project in projects | filter:search | orderBy:'name'">
	<!-- ng-repeat=で指定したモデルが持っているデータのぶん要素を生成する -->
	<!-- filter:で指定したモデルが持つ文字を含むデータだけに絞り込む -->
		<td><a href="{{project.site}}" target="_blank">{{project.name}}</a></td>
		<!-- {{}}で囲んだ部分にng-modelの同じ名前のデータが挿入される -->
...

detail.html

detail.htmlもビューのひとつです。

<form name="myForm">
	<div class="control-group" ng-class="{error: myForm.name.$invalid}">
	<!-- ng-class="{error: myForm.xxx.$invalid}"でバリデーションエラー時のclassがつく -->
		<label>Name</label>
		<input type="text" name="name" ng-model="project.name" required>
		<!-- ng-modelでこのフィールドで作成されるデータを決める -->
		<!-- requiredを入れると必須項目になる -->
		<span ng-show="myForm.name.$error.required" class="help-inline">
				Required</span>
		<!-- ng-show="myForm.xxx.$error.required"で必須項目が未入力のときだけ表示される要素になる -->
	</div>
...

…モデルにあたる mongolab.js は理解しきれなかったので解説はやめておきます。

思想としては美しいのですが、クライアントサイドのエンジニアがコントローラーに気を使わないといけないので、やっぱり敷居が高い気がします。

AngularJSは流行るか？

これ、実務だと結構重要ですよね。

AngularJSが流行るのかどうか。流行らないで沈んでいってしまうのか、流行り出してみんなコレ使うようになってメンテナンス性のために利用を強要されたりするのか。重要です。僕は普段、クライアントサイドのHTML/CSS/JavaScriptの開発をすることが多いのですが、正直、流行る気はしませんでした…。普段クライアントサイドの開発をしているようなエンジニアには、とっつきにくいです。どちらかと言えばサーバーサイドっぽいロジックがあって、しかも新しい規約を覚えないといけない。ロジックの心配をしないでjQueryでちゃちゃっと作りたい！と歯ぎしりする場面が多かったです。そもそもUIのためのフレームワークではないので、クライアントサイドのエンジニアがここに時間を費やすべきか？という問題もあります。とはいえ、サーバーサイドのエンジニアがバリバリやるようなものでもない気がします。HTMLも考えながらコーディングしなきゃいけないので。だからやっぱり、新しい分野のエンジニアの誕生となるか、大規模開発で（決して得意なわけではない）誰かがやるんじゃないか…という気がします。

「クライアントサイドMVC」と呼ばれるのに中身はちょっとギャップがありますね。典型的なクライアントサイド・エンジニアが少し勉強しただけで使いこなせるようなフレームワークが出れば、状況が変わるのではないかと思います。APIを叩くだけならもっとシンプルに…jQueryプラグインにしてもいい気がしました。

勉強会ハッカソンは今後も企画していきますのでよろしくお願いします！

One thought on “AngularJSの勉強会報告”

tiffany and co japan より:

2013年7月21日 2:22 PM

AngularJSの勉強会報告 : Sensebahn

返信