読者です 読者をやめる 読者になる 読者になる

akiyoko blog

akiyoko の IT技術系ブログです

「ng-mtg#3 AngularJS 勉強会」に参加してきました

勉強会 JavaScript

今日は、六本木ヒルズ森ビル14FのGREEでのAngularJS勉強会でした。

「ng-mtg#3 AngularJS 勉強会」 (2013.7.3)

AngularJS は JavaScriptMVCフレームワークで、トレンドも急上昇中だとか。

#angularjsjp

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ってモバイルに向かないよね」って言われてるけど本当??

  • よく聞く声
  • ファイルサイズが大きい(minified+gzipで約30KB)
    • backboneは約7〜8KB
  • Webアプリなら、minified+gzipで決まり(CDNも)
  • モバイルアプリなら、インストール型アプリに同梱しちゃう(Webアプリと同じで済むならそっちでももちろんOK)
  • 気にするのは、ダウンロードが発生する一発目だけ
    • 双方向バインディングとか処理が重いのでは?
    • モデル100個とか定義しなければ大丈夫!
    • 50個で試してみたけど、全然平気(iPhoneで)。意外とイケちゃうのでは??

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」(カルマ)で事足りそう


Q. WebアプリケーションのSEOの対応はどうすれば?
A. 商用サービスならSSL必須だったりするので、要らないのでは?

  • 「#」で対応するとよいかも
  • AnguarJSのAPIのサイト?とかはPhantomJSで全部静的なファイルを吐き出しているらしい(それだとSEO的にセーフなはず)


Yeomanと言えば、こういうスライドも見つけました。
こういうページも。