AngularJSの勉強会に参加してきました。

JavaScript AngularJS

2013/4/4に行われたng-mtg#2 AngularJS 勉強会に参加してきました。

少し遅れたので最初の方は聞き逃してしまいましたが、私のような初心者向けの内容で、とても楽く勉強になりました。

セッション1

講演者

金井 健一さん

フリーランスでAngularJSコミュ管理人

ドキュメント英語しかなく現在翻訳中なので、仲間を絶賛募集中！

AngularJSについて

最新は1.0.5

コンセプト

その他いくつかありましたが、PC立ち上げたりしててメモ取れませんでしたｗ

得意なこと

  • CRUD系アプリ
  • 管理画面・マイページ
  • 1ページで完結するアプリ

苦手なこと

  • モバイル向け
  • ゲーム等のグラフィック系、エフェクト系
    • BombermineというAngularJSを使って作られたゲームがある
      • 1000人同時対戦のボンバーマン
      • 向いてないって言ってたのに作っちゃった
      • ソース見てみたけど結局あまり使ってない
      • ステータス持ってたりとか、簡単なポップアップで使ってたりとか

コーディング

テキストボックスに入力した値を別エリアに出すとかならJS書かなくてもできる。JQueryではちょっと書く必要ある。

例えば

<div ng-app>
<input type="text" ng-model="name"><br>
値は {{ name }} です。<br>
</div>

とか。
動作確認はこちらで出来ます。

ng-xxxって属性の書き方はHTML5のバリデーションでエラーになる。
でもdata-ng-xxxって書けばOK。
x-ng-xxxとか他にも書き方あるけどなぜxかは不明。

Hello {{ firstName + lastName}}<br>

とかHTMLに計算式もかけちゃう。

フォーマット変換も簡単にできる。
金額とかは

値は {{ val | currency }} です。<br>

って書けば

値は $130.25 です。

みたいな。
デフォルトUSドル表示だけど、円表示にすることも可能。 ただ、円でも.00ついちゃうバグがあって、現在issueとして上がっている。

繰り返しも楽で、ソートなんかもHTMLだけでいろいろチェインできる。

{{ list | orderBY:'name' | limitTo:2 }}

listは配列とかJSONとかのリスト

バリデーションはng-pattern属性つかって、正規表現もOK

ng-pattern="/^ang-/"

とか。正規表現の時は"/"忘れずに！

ディレクティブ
独自でタグや属性やクラスも作れる。
ng-じゃなくてもOK。
コメントもコンポーネント化できる。←未確認
うまくできればコメントだけで作られたサイトも作れる

セッション2 「AngularJSで開発したい」

講演者

吉田 徹生さん

先月までNHNJapanで今月からLINE株式会社
Naverまとめとか

所属

  • AngularJS Japan User Group
  • WEB技術先端味見部

AngularJSについて

最新は1.0.5．
3，4ヶ月に1回くらいバージョン上げてる。

公式ダウンロードからExtraリンク押すと公式モジュールをいろいろダウンロードできる。
ng-cookieとかはこっちに入ってる。

公式サイトのリンクからJSFiddle飛んでもエラーで動かないのとかあるｗ

引数名をStringにしてチェックしてるので違うとエラーになる。順番は関係ない。

開発ツール

AngularJS Batarang (Chrome拡張機能)

スコープ内プロパティ見れる

パフォーマンスが確認できる

依存関係がいグラフで見れる

超使える！っていうか無いと無理。開発速度が全然違う！

Karma(元Testacular)

TestacularからKarmaに名前変更
AngularJS専用から他のJSでも使えるようになったはず。(未確認)

Node.jsを利用

各種ブラウザでテストできる

Jasmine等のテストライブラリーがつかえる

ターミナル・ブラウザ間でリアルタイムでテストできる

ファイル更新で自動テスト

感想

なんといっても、簡単なことであればJavaScript書かずにHTMLだけで済むのがすばらしい！
欠点としてはファイルサイズがちょっと大きいこと。

お客さん向けのプロトタイプならJQueryより全然楽かと。
今まではちょっとした見た目の動きの変更でも裏ではガリガリ書いたりとかあったけど、そういった外見と内部の複雑度合が結構比例するような気がします。

JSFiddleって知ってはいたけど、今回初めてつかってみたら超便利！
聞きながら同時に書いてすぐ動作確認してAngularJSスゲーとか。

ng-appで適用範囲とか限定できるので、うまく作ればHTMLからJavaScriptの対応するコード探したりとかが楽になりそう。

あと、便利なモジュール作って配布したりすれば面白いかなぁと。

次回は6月頃を予定しているそうです。 AngularJSが1.00になってから1周年なので何かしたいなぁとか話してました。