AngularJSを使ってみた

クライアントサイドのJavaScriptフレームワークとしては、個人的にExtJS4を採用してた。
大げさ過ぎる感はあるのだけど、その設計のストイックな感じや、複雑さに触れることに「快感」をおぼえたりなんかしてた。

しかし、ちょっと前にsencha社のオープンソース(GPLv3)としての扱いがイマイチになったりしたもんで、「もうそろそろExtJSから離れるか」となってた。

その後、クライアントサイドで大掛かりなアプリ設計をする機会がなく、jQueryでお茶を濁してたりしてたのだけど、そろそろExtJS4の「自分なりの後釜」を決めて使えるようにしとかなきゃってことで、AngularJSに手を出してみたので、使った感じをまとめておく。

MVW(Model-View-Whatever)パターン

Model-View-*なパターンはいろいろあって、ご多分にもれず「どれがいい?どれが悪い?」みたいな不毛で無駄な話をよく聞くけど、AngularJSは「MV*?、*はなんでもいいじゃん」パターンで、そういう無駄な論議をしないところが、なかなかイカしてる(ExtJSはMVCだし、MVVMだ)。

とはいえ、基本的に「Whatever=Controller」だ。

ViewはもちろんHTMLで記述されるDOMのセットだし、そこにはAngularJS独自にPresentation LogicとしてFilterやDirectiveがある。

Modelは、$scopeで参照されるすべての「データ」だし、Business Logicを含むServiceが定義されてる。

で、もちろんControllerはViewとModelを繋ぐもの。

$watch()、、、強力だ

「データバインディング」や「DI(依存性注入)」がAngularJSを語る上で重要ポイントだけど、それを差し置いて$watch()が気に入った。

$watch()はデータバインディングを支える仕組みで、オブジェクトやプロパティの変化を文字通りwatchできる。

「要素Aにバインドされている値が変化したので、要素Bを非表示から表示状態にするぜ」

なんてことが簡単にできる、イベントリスナーってわけだ。

Serviceでビジネスロジック

どんなフレームワークでもModelの概念の中にビジネスロジックを含めたい。

AngularJSでは、それはService定義という形で実装できる。

これをちゃんと使わないと、アホほどControllerが太っていくし、Unitテストもできないし、AngularJSを使う意味がなくなる。

i18n/l10nの仕組みはナカッタ

どうも理解困難だったのはこのポイント。

Developer Guide – i18n and l10n」を読んでみると、わりと手数を要求してくる。

つまりは、そういう仕組みは「自分でやる」のが前提みたい(?いや、多分、AngularJSプロジェクトがまだこの部分が洗練されるような状況になっていないような気がする)。

というわけで、将来どうなるかが分からないし、変なpluginを使ってそのルールにしばられたくないので、自分で実装した。l10n部分だけだけど。。。w

  • どうせサーバーサイドでもl10nするので、そこでクライアントサイド用のリソースデータを作る
  • 作ったリソースデータは、ページロード時にng-appなモジュールに「value」として渡す(もちJSON形式)
  • 以下の様なServiceを作る
  • 各ControllerでこのServiceの依存性注入して、_()メソッドでリソースをロードさせViewに渡すなどする
webapp.factory("translate", function(l10n) {
    return {
        _: function(key) {
            return eval("l10n['"+key+"']");
        }   
    };  
});

“l10n”は、サーバーサイドで作られたリソースデータでvalueとしてng-appに渡されたもの。
Controllerでは、

webapp.controller('SomethingCtrl', ['$scope','translate', function($scope,Upload,appconfig,$timeout,translate) {
    $scope.hoge = translate._('gegege');
}]);

ってな具合に使う。
i18nでlocaleについてもインプリメントしようと思ってるが、現時点では未着手。

ファイルアップロード

どうもAngularJSのダメなところがこういうところに現れている気がする。
まだ進化中なんだな。。と思うことで許せる範疇ではあるけどw

フォームを作って、その入力データをサーバーにPOST送信する時に、$httpという標準に用意されているAjax非同期通信するためのServiceを使ってもtype=”file”なinputで指定されたファイルが送信されない。。。

なんだか酷いな~。。。と思いつつ、$httpがデフォルトでつけるContent-Typeヘッダが問題だとわかった。

いろいろ見てたら「ng-file-uploadってpluginがいいぞ」ってことなんで、これを使ってファイルアップロードを実装した。

というわけで。。。

一通りAngularJSを使ってみたわけだが、ExtJSなんかに比べてシンプルでなかなかよかった。
「なんだよー」ってなる部分もあるわけだけど、まあ、そのうちなんとかなるんじゃないかと思う(AngularJS2も進んでるみたいだし!)

今後は、AngularJSとjQueryの両刀使いでやっていこうと思う。
それぞれの特徴を活かせるように、適材適所で。

あと、調査してて感じたこと。
AngularJSについてだけじゃないけど、、、ネット上で情報を探すときはクソな「ノウハウのみ(しかもバッドノウハウだったりするし!)」な記事に惑わされないようにすることをオススメしとく。
AngularJSみたいに過渡期なソフトウェアについては特にいえることかと。
基本的にはオフィシャルサイトや、信頼できる書籍なんかで「考え方」を掴むのが最初でノウハウはその後でっていうスタンスを崩しちゃいけない。。。って、再確認した。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です