今日は、六本木ヒルズ森ビル14FのGREEでのAngularJS勉強会でした。
「ng-mtg#3 AngularJS 勉強会」 (2013.7.3)
AngularJS は JavaScriptのMVCフレームワークで、トレンドも急上昇中だとか。
AngularJS for Beginners
Eiji Kitamura @agektmr
Slide: http://slid.es/agektmr/angularjs
- 最初にあまり知識が要らない。
- 特徴は4つ。
- 1. Declarative APIs（宣言的API）
- 反対は、命令的API（プログラムで手続き的に書いていくもの）
- HTMLに宣言的に書く。先頭に と書いて、AngularJSのアプリケーションであることを宣言
- JavaScriptのコードが少なくて済む
- 2. 2 way binding(MDV)
- モデルの変更が双方向に反映される（こういうのはAngularは得意）
- 3. DOM tree alignment
- AngularJSでは、HTMLそのものがView（テンプレート）になる
- $scope, ng-controller, ng-repeatで表記
<section ng-controller="NameCtrl">
<p>Hello {{name}}!</p>
</section>
- 4. Extensibilities
- タグとか属性とかAngularJSの機能を自分自身で拡張可能
- オススメする理由
- 2.0でWebComponentに対応予定。今からやっておけば、WebComponent時代に対応できる
- Bombermine（1000人まで同時に遊べるボンバーマン）がAngularJSで作られているらしい（どこまでAngularかは不明）
- 日本語ドキュメントは、http://angularjs-jp.github.io/docs/ から辿るとよい（直リンクはダメっぽい）
- flexbox-experiment もオススメ
AngularJSとモバイル
金井健一
よく「Angularってモバイルに向かないよね」って言われてるけど本当？？
AngularJS TypeScript
わかめまさひろ @vvakame
Slide: http://www.slideshare.net/vvakame/angularjs-1year
- TypeScriptは神。型もある
- 静的な型変換＋JS変換後の可読性で考えると、TypeScriptが一番
- 比較的きれいなソースコードを吐き出す（Dart, Haxeは人間には読めない。。）
- 変数は、右辺から自動的に型推論
- クラスベースなOOP
- モジュールもある（Javaでいうpackage）
- 0.9からGenericsが実装された
- AngularJSの場合は、angular.d.ts（型付けファイル）を活用するとよい
- 開発環境としては、VisualStudio
- Macなら、WebStorm。TypeScriptの対応（現在0.9）を進めているところ。超オススメ
- サーバから来るJSONも型付けして漏れがなくなる
- Model, Service, Controllerはモジュールに分けた方がよいかも
- デバッグがJavaScirptのときよりも少し手間（.d.tsが貧弱？？）
AngularJS＋TypeScriptで開発して良かったところ
- 設計変更やメソッドの変更に強い
- 複数人開発でも安心。壊れない
- 書き方にレベルの差が出にくい。ロジックの実装に集中できる
悪かったところ
- AngularJSのHTML部分の静的なチェックが出来ない
2,3日後にプロジェクトをGithubで公開するので、#angularjsjp でチェックしてね。
以前のスライドは見つけた。
http://www.buildinsider.net/hub/bioff/o2
ちょっと先のAngularJS
@teyosh
Slide: http://goo.gl/PKvs8
- AngularJSにはstableとunstableがある。今回はunstableの話
- 将来仕様が変わるかもしれないけど
- モバイル用のAPIがあるよ
angular.module("MobileTest", ["ngMobile"])するだけで、あなたのサイトもモバイル対応！
- Directiveにアニメーションを付けることもできる
質問コーナー
Q. テストはどうすればいい？
A. AngularJSに限って言えば「Karma」（カルマ）で事足りそう
- http://qiita.com/shinofara@github/items/b3677ffdfc0c7e45e8d4
- 「Yeoman」（ヨーマン）でテンプレート作成するとかも有効
Q. WebアプリケーションのSEOの対応はどうすれば？
A. 商用サービスならSSL必須だったりするので、要らないのでは？
