akiyoko blog

akiyoko の IT技術系ブログです

トップ > JavaScript > 「第２回AngularJS勉強会 #ngCurry」に参加してきました

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

JavaScript AngularJS

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


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

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


タイトル


[再増枠]第２回AngularJS勉強会 #ngCurry - connpass　（2014.11.5）


主催

株式会社LIG

会場

いいオフィス
東京都台東区東上野２−１８−７ 共同ビル 3F

Twitterハッシュタグ

#ngCurry




エンタープライズ分野での実践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リファレンス