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

akiyoko blog

akiyoko の IT技術系ブログです

「第2回AngularJS勉強会 #ngCurry」に参加してきました

JavaScript AngularJS

今日は、LIG 主催の AngularJS勉強会に参加してきました。
会場は新しく完成した、3F の「いいオフィス」にて。


LIG の勉強会への参加は二度目ですが、今日もカレーの臭いがムンムンでした(笑)。

カ、カレーのために来たんじゃないからねっ!!


タイトル


[再増枠]第2回AngularJS勉強会 #ngCurry - connpass (2014.11.5)


主催

株式会社LIG

会場

いいオフィス
東京都台東区東上野2−18−7 共同ビル 3F

エンタープライズ分野での実践AngularJS ~フォーム、ディレクティブ、TypeScriptなど~

後藤 歩 氏(株式会社オロ)



  • ZAC Enterprise(管理会計システム)
    • 半年ほどAngularJSを実案件で使用してきたノウハウ
  • AngularJS + TypeScript
  • 導入のきっかけ
    • コード量を減らしたい(data binding)
    • UIを統一したい(directive)
    • クライアント側の開発を多人数開発で効率良く行いたい(フルスタック
  • VisualStudio + TypeScript + AnglarJS で、Windows畑でも導入可能
    • TypeScriptの恩恵も受けられる
  • 1.3からバリデーションが少し変わった
    • $validators
  • レイアウト制御
  • 権限
    • PermissionService を自作
    • has-permission
  • カスタマイズ対応 5つの心得
    • Controller は肥大化させない
    • View側も、ディレクティブ使ってパーツ化する
    • ・・・などなど




 

スキスキIonic

今 雄一 氏(株式会社ピースオブケイク



  • note のクライアント側は AngularJS製
  • Ionic
    • Sass, Cordova, AnglarJS のフレームワーク
    • Cordovaの上に乗っかっている
    • Ionic は UI層(WebView)
    • ハイブリッドアプリも作れるという触れ込み
    • Powered by Angular
    • なんとなく使うなら、深いAngularの知識は不要
    • ui-routerの使い方は知っておく必要あり
  • 欠点
    • パフォーマンス(WebViewの性能に左右される)
    • 細かい制御や実装が実現できない
    • 起動時間が長い
    • 見た目でIonicとバレやすい
  • まだ時期尚早?
    • iOS8 (WKWebView), Android4.4 (Chromium) で少し改善したらしいが
  • 使い方
    • npm install -g cordova, ionic
    • ionic start MyProject
  • Yo を使う手もある
  • Live ReloadもデフォルトでONになっていて、開発も捗る
  • ドキュメントが意外と充実している!
  • 有志のdemoもある
  • ng-cordova
    • Ionic Teamが開発
  • Androidの実機確認方法
  • Kitchen Sinkで確認すれば良い
  • 注意点
    • Cordovaは3.4から Plugin Base の設計
    • 先にプラグインをインストールしておかないとエラーに
  • 使ってみて、Cordovaの地雷感とWebViewの遅さがネック(特に Android
  • どちらかというと、エンプラ向け?
  • Crosswalk で WebViewを差し替えることもできる
    • しかしながら、ファイルサイズがむちゃくちゃ大きくなる。。



(参考)





 

非エンジニアのためのAngularJS

今井 貴之 氏(株式会社Wantedly)
https://www.wantedly.com/users/14000



  • AngularJSにも Moduleいろいろあるよ
  • ng-stype
    • 「式」を渡せる
  • ng-class
  • ng-anime
  • ngInfiniteScroll
  • Wantedlyのサイトでも使ってる
  • 要素の追加削除にanimationが紐づく
  • Ionic も以前やってみたことあり
    • jQuery mobileよりも将来性あり??
    • cordovaでハマった。。
  • 国産なら、OnsenUI
  • Famo.us/Angular
    • 3Dレイアウト
  • Firebaseだと、AngularFire
  • AngularJS(まだ)結構キテる



 

ディレクトリ構成とタスクランナー

菅原のびすけ 氏(株式会社LIG)



  • 動いて感動するけどapp.jsが悲惨なことに。。
    • 日本語の情報が少ない。。
    • ファイルやディレクトリを分割することで、app.jsはスッキリしたが。。
  • Angular-Seed(公式のひな形、最小構成)
    • angular-phonecatのコア部分
  • 検索でヒットした4つのStyle Guide(ただし公式じゃない)
    • mgechev/angularjs-style-guide
    • johnpapa/angularjs-styleguide
    • toddmotto/angularjs-styleguide
    • gocardless/angularjs-style-guide
  • Minko氏のガイドが最も参考になる??
  • A: コンポーネントタイプ分類
  • B: 機能性分類
    • ディレクティブを作成するときは、全てひとつのフォルダ内に入れると便利だよ
  • johnpapa氏
  • C: コンポーネントタイプ分類 + 機能性分類の並列
  • D: コンポーネントタイプ分類からViewsを分離
    • 割とみんな使ってるのでは??
  • toddmotto氏
  • gocardless氏
    • 後だしじゃんけん方式
  • C: コンポーネントタイプ分類 + 機能性分類の並列
    • 今までの例と比べて詳細。初めに設計をしておけば死角は少ないかも。
    • サーバサイドのフレームワーク方式に酷似
  • など、まだまだたくさんある
  • ベストプラクティスはおそらく、Yeoman
  • Experssへの組み込み
  • ディレクトリ構成を考えるポイント
    • サーバー側の言語はJavascript
    • 途中からAngularJSを導入した場合
    • スクランナーを利用するか
  • 最終的には、こうなった

参考

こちらは、1.3 系のリファレンス本。
2系 についての記載も。

AngularJSリファレンス

AngularJSリファレンス