受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG

20,992 views
20,639 views

Published on

LIGで行われたAngularJS勉強会に登壇したときのスライドです。
受託開発でAngularJSを採用したときに懸念したことや導入した結果感じたことなどを発表しました。

■目次
・AngularJSを使うときに懸念したこと
・チャットアプリでAngularJS
・AngularJSを使うなら知っておきたいワード
・AngularJSの進化のスピード

勉強会で使用したサンプルはGithubで公開しています。
https://github.com/frontainer/angular-sample

Published in: Technology
0 Comments
79 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
20,992
On SlideShare
0
From Embeds
0
Number of Embeds
7,978
Actions
Shares
0
Downloads
84
Comments
0
Likes
79
Embeds 0
No embeds

No notes for slide

受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG

  1. 1. 1 受託開発でのAngularJS
  2. 2. 2 @frontainer Front-end Engineer 2014/4 LIG入社 フロントエンドエンジニア プロフィール http://github.com/frontainer http://trifort.jp/library/cavy/ 現在はWebサイトを作ったりテンプレート作ったりいろいろ 前職ではゲームのフロントエンド開発や canvasライブラリを作って遊んだりしてました。 これまでBackboneで2本、Angularで4本案件実装してきました。 YUICHI HAYASHI 林 優一
  3. 3. 3 本題に入る前にお知らせです。
  4. 4. 4 Powered by CM
  5. 5. CM
  6. 6. CM
  7. 7. CM
  8. 8. CM
  9. 9. CM
  10. 10. 10 体験を売りたい人も 貴重な体験をしたい人も CM
  11. 11. 11 Powered by CM https://trip-u.com/
  12. 12. 12 初回の今回は「AngularJSを導入したときのお話」
  13. 13. AngularJSを使うときに懸念したこと チャットアプリでAngularJS AngularJSの進化スピード まとめ 13 AngularJSを使うなら知っておきたいワード
  14. 14. 14 AngularJSを使うときに懸念したこと
  15. 15. 15 01 IE9以上+モダンブラウザ AngularJSを使うときに懸念したこと 対応ブラウザ バージョン 1.2.x 1.3.x 2.x.x 対応ブラウザ IE8 IE9 IE11(予定) 備考 IE8以下は一部機能で別途対策が必要 I積極的な機能削除は行わないが E8はテストを行わない 開発中 推奨
  16. 16. 20.6% 5.4% 6.9% 8.6% 8.9%12.3% 16.6% 20.9% IE8.0 IE11.0 FF28 IE9.0 Chrome34 IE10.0 Chrome33 その他 16http://news.mynavi.jp/news/2014/05/07/066/ 現実 IE8以上+モダンブラウザ
  17. 17. 17 AngularJSを使うときに懸念したこと IE対策はしておいた方が良さそうだ
  18. 18. 18 ng-app属性をつけている要素に id=“ng-app”をつける <div id=“ng-app” ng-app=“app”>
 …
 </div> 対策1- ng-app 独自タグは使わず、属性にする Directiveのrestrictは”E”だけでなく”EA”としておくと吉 <ng-view></ng-view>
 <ng-include></ng-include> 対策2- 独自タグ <div ng-view></div>
 <div ng-include></div> AngularJSを使うときに懸念したこと
  19. 19. 19 独自タグを使いたい場合は、 HTMLにプレフィックス指定をして JSでcreateElementする 対策3- 独自タグ2 <html xmlns:ng="http://angularjs.org"> <head> <!--[if lte IE 8]> <script> document.createElement('ng-include'); document.createElement('ng-view'); ! // Optionally these for CSS document.createElement('ng:include'); document.createElement('ng:view'); </script> <![endif]--> </head> AngularJSを使うときに懸念したこと
  20. 20. 20 json2.jsまたはjson3.jsを使う 対策4- IE7のために <script src=“/path/to/json2.json”></script> json2.js https://github.com/douglascrockford/JSON-js json3.js http://bestiejs.github.io/json3/ でもIE7対応するならばAngularを使わない方が良いと思う -> Backbone • パフォーマンス • バグが見つかったとしても修正される可能性が低い AngularJSを使うときに懸念したこと
  21. 21. 独自タグを使わないようにすれば最小限で済む IE7以下も対応となったらBackboneの方が無難だと思う 新しいバージョンのAngularJSを使うときもIEのシェアと相談になりそう 21 AngularJSを使うときに懸念したこと IEへの対応について
  22. 22. 22 02 AngularJSを使うときに懸念したこと 学習コスト 学習コストが高いと・・・ • 挫折しやすい • 開発に時間がかかる • チームメンバーの増減が難しくなる などなど、問題多数
  23. 23. 23 風の AngularJSを使うときに懸念したこと 他のフレームワークより 学習コストが高いらしい 社員C ドキュメントが少なくて調べるの 大変そう CTO AngularJSって難しいんでしょ 社員B 覚えること多くて面倒くさそう 社員A ※ コメントは当人とは一切関係ありません
  24. 24. 24 AngularJSを使うときに懸念したこと 学習コストを単純比較したらBackboneよりもAngularは高い
  25. 25. 25 AngularJSを使うときに懸念したこと 学習コストを単純比較したらBackboneよりもAngularは高い 機能多 機能少
  26. 26. 26 AngularJSを使うときに懸念したこと 学習コストって 事前に調べて勉強 実際に業務で頑張る 見事納品して報酬獲得 学習コストは単体フレームワークではなく プロジェクトの内容をすべて実装するために必要な学習コストで 比較しないといけない
  27. 27. 27 AngularJSを使うときに懸念したこと 学習コストって 事前に調べて勉強 実際に業務で頑張る 見事納品して報酬獲得 準備から完成までかかる調べたり実装するコストの総量
  28. 28. 28 AngularJSを使うときに懸念したこと 諸々を考えると対して変わらない気がする・・・ Backbone.stickit Marionette Chaplin RequireJS Underscore
  29. 29. 29 AngularJSを使うときに懸念したこと それならばAngularJSにしてみよう
  30. 30. 30 チャットアプリでAngularJS
  31. 31. 31 チャットアプリでAngularJS Node.js Socket-Service チャット実装における構成イメージ View Soket.io Controller
  32. 32. 32 チャットアプリでAngularJS Socket-Service angular.module("services").factory("SocketService",function($rootScope){ if (typeof io === 'undefined') return; var socket = io.connect('http://'+location.host + '/'); return { on: function (type, listener) { socket.on(type, function () { var args = arguments; $rootScope.$apply(function () { listener.apply(socket, args); }); }); }, emit: function (type, data, listener) { socket.emit(type, data, function () { var args = arguments; $rootScope.$apply(function () { if (listener) { listener.apply(socket, args); } }); }); } }; });
  33. 33. 33 チャットアプリでAngularJS Controller angular.module('controllers').controller('RoomCtrl',function($scope,SocketService) { $scope.messages = []; SocketService.on('receive', function(message) { $scope.messages.unshift(message); }); $scope.send = function() { SocketService.emit(‘send’,$scope.form.message); }; }
  34. 34. 34 チャットアプリでAngularJS View <div ng-repeat="message in messages"> {{message}} </div> <form ng-submit="send"> <textarea ng-model=“form.message"></textarea> <input type="submit" value="送信" /> </form>
  35. 35. 35 チャットアプリでAngularJS Node.js var SocketIO = require('socket.io'); ! exports.init = function(server) { var io = SocketIO.listen(server, {log:false}); io.sockets.on('connection', function(socket) { socket.on('send',function(message) { io.sockets.emit('receive',{ message: message, date: new Date() }); }); }); };
  36. 36. 36 実演
  37. 37. 37 フォームバリデーション HTML Validationに準拠。
 それ以外にも条件必須やエラー表示など 柔軟に対応できる アニメーション 細かなアニメーションをつけることが簡単
 機能だけでなく見た目もこだわりたい フィルタリング 並べ替え、日付フォーマットなど
 かゆいところに手が届く Ajax通信とセキュリティ もちろん安全性にも配慮したい。
 Ajax通信周りでAngularがやっている
 セキュリティ対策 チャットアプリでAngularJS 工数を削減してくれた機能たち(一部)
  38. 38. 38 フォームバリデーション チャットアプリでAngularJS required属性など非対応ブラウザでも対応してくれる(Polyfill) ng-required属性を使うと条件付き必須が簡単に実装できる エラー時にスタイルを変えたり、Submitボタンをdisabledしたりもできる <form name="validation_form"> <label> <input type="radio" ng-model="form.exp" name="exp" value="exp1" checked> 条件1 </label> <label> <input type="radio" ng-model="form.exp" name="exp" value="exp2"> 条件2 </label> <div ng-show="form.exp === 'exp1'" class="ng-cloak"> <input type="text" ng-required="form.exp === 'exp1'" ng-model="form.exp1.required" /> </div> <div ng-show="form.exp === 'exp2'" class="ng-cloak"> <input type="text" ng-required="form.exp === 'exp2'" ng-model="form.exp2.required" /> </div> <input type="submit" ng-disabled="validation_form.$invalid"/> </form>
  39. 39. 39 フィルタリング チャットアプリでAngularJS 日付フォーマットやソートなどのフィルタ機能 自作フィルタも比較的簡単に実装できる このフィルタを増やしているだけでもわくわくする angular.module('filters').filter('lineBreak', function() { return function(input,exp) { return input.replace(/n|r/g, "<br>"); } }); ※改行コードをbrにする自作フィルタ <div class="form-group"> <input type="text" class="form-control" ng-model="input_date"/> <p>{{input_date}}</p> <p>{{input_date | date: 'yyyy/MM/dd HH/mm'}}</p> </div>
  40. 40. 40 アニメーション チャットアプリでAngularJS angular-animateモジュールを使うと要素追加や削除時などに 簡単にアニメーションをつけることができる。 ngAnimate.cssを使うとすぐに出来上がる モック作りに最適で、初期の動きのイメージに使用 <div class="list-group"> <div ng-repeat="message in messages" class="slide-left list-group-item"> <div>{{message}}</div> </div> </div> $ bower install ngAnimate https://github.com/Augus/ngAnimate
  41. 41. 41 Ajax通信とセキュリティ チャットアプリでAngularJS app.config(['$httpProvider',function($httpProvider) { $httpProvider.defaults.headers.common = {'X-Requested-With': 'XMLHttpRequest'}; }]); CSRF対策としてヘッダーとCookieでやり取り
 → フォームにhiddenなinputを設置しなくてよい デフォルトでX-Requested-With: “XMLHttpRequest”がついていない app初期化時につけておくと良い
  42. 42. 42 実演
  43. 43. 特にフォーム周りは充実していて、フォームが複雑なページに最適 AngularのHTMLはいつも使っているHTMLではないと割り切る。
 ng-clickとかonClick時代に逆戻りじゃん!的な考えは捨てる。
 -> そう!だってこれはテンプレートだもの データバインディングは本当に楽。
 ビューをほとんど意識しなくて済む。 43 チャットアプリでAngularJS チャットアプリで導入して思ったこと 意外と不足していたのが配列やオブジェクトの操作
 UnderscoreやLo-dashがあるといいかもしれない 思ったよりも工数はかからず。バグが少なかったためむしろ工数は削減できた。
 小規模な開発でも十分に使っていけるフレームワークと感じた。
  44. 44. 44 AngularJSを使うなら知っておきたいワード
  45. 45. GruntとAngularJSのMinify Karma / Jasmine YeomanとAngular Generator 45 AngularJSを使うなら知っておきたいワード 今回はワードの紹介のみですが・・・ AngularJS Batarang (Chrome拡張) Angular Batarang以外は他のフレームワークでも使えるものです。 今後、それぞれ勉強会を開催できればと思ってます。
  46. 46. 46 AngularJSの進化スピード
  47. 47. 40回?! 47 頻繁なバージョンアップと定期的な開発 AngularJSの進化スピード 0.9.0-0.9.8 2010.10 2011 2012 2013 0.9.8-0.10.5 0.10.5 - 1.0.4 1.1.0 - 1.1.1 1.0.4 - 1.0.8 1.1.1 - 1.2.6 2010 2014 1.2.6 - 1.2.16 1.3.0 (β1) - 1.3.0 (β10) 2.0.0 - 8回 17回 19回 19回 20回
  48. 48. 48 今回ご紹介した部分 まだまだできることが一杯 AngularJSの進化スピード 学習コストが高いと言われる所以の1つ
  49. 49. 49 AngularJSの進化スピード まだまだ進化していくフレームワーク それはリスクでもあり楽しみでもある
  50. 50. 50 まとめ
  51. 51. 51 風の まとめ 他のフレームワークより 学習コストが高いらしい 社員C ドキュメントが少なくて調べるの 大変そう CTO AngularJSって難しいんでしょ 社員B 覚えること多くて面倒くさそう 社員A ※ コメントは当人とは一切関係ありません
  52. 52. 52 まとめ AngularJSって難しいんでしょ 社員A 使うのはかなり簡単 • 使うのは非常に簡単 • ちょっとしたコードですぐにそれっぽいものができる • でもディレクティブ辺りでだいたい1度つまづく • 本当に使いこなそうとすると先は長い 社員B 覚えること多くて面倒くさそう 覚えることは多い • ng-なんちゃらが多くて覚えるのは大変 • 他のフレームワークやライブラリにあまり似ていないので、
 過去の経験は活かしにくい • 公式ドキュメントを見ながらが基本になる
  53. 53. 53 まとめ 他のフレームワークより 学習コストが高いらしい Nobisuke ドキュメントが少なくて調べるの 大変そう CTO フルスタックフレームワークだもの • 機能が多い分、学習すべき項目は多い • でもいろんなライブラリを覚える必要が少ない • 一貫したルールで作れるので最終的には管理しやすい 日本語ドキュメントは少ない? • js-studio (http://js.studio-kingdom.com/angularjs) • ドットインストール (http://dotinstall.com/lessons/ basic_angularjs) • AngularJS Ninja (http://angularjsninja.com/) ドキュメントは公式が無難 -> ゆえに英語必須
  54. 54. 54 まとめ AngularJSの開発者が設計から実装、テスト、TIPSまでを紹介 AngularJSアプリケーション開発ガイド http://www.oreilly.co.jp/books/9784873116679/ Web開発者にいま最も支持されているJavaScript MVCフレー ムワーク「AngularJS」の解説書。定型的な単純作業が繰り 返されがちなWeb開発をよりシンプルで楽しいものにしよう というのがAngularJSの試みです。本書ではまずAngularJSア プリケーションの構成要素を押さえた上で…
  55. 55. 小規模案件でも使えるくらい初期開発は簡単 特にフォーム周りは充実している。
 コンタクトフォームだけの実装でも役に立ちそう 進化スピードが速いので対応するのにもスピードが必要 長期に渡って運用するものはバージョンアップのコストを考慮しておく 一環したルールで構築できるので、1度覚えれば楽で保守がしやすい
 (いろんなプラグインのルールを覚える必要が少ない) 55 まとめ 受託開発でAngularを使ってみて 30分では語り尽くせませんね・・・
  56. 56. 56 まとめ CMのあと次回予告
  57. 57. 57 CM 57 LIGでは、一緒に AngularJSをやっていける フロントエンドエンジニア を募集しています。 LIG
  58. 58. 58 CM 58 LIGでは、一緒に AngularJSをやっていける フロントエンドエンジニア を募集しています。 LIG
  59. 59. 59 CM 59 LIGでは、一緒に AngularJSをやっていける フロントエンドエンジニア を募集しています。 LIG
  60. 60. 60 この人を見つけて捕まえて
 詳細を吐かせてください! LIGに興味のあるエンジニアの方は CM
  61. 61. 61 次
 回 予告 ディレクトリ構成とタスクランナー ※ 内容が変更になる場合がございます。あらかじめご了承ください
  62. 62. 62 ご清聴ありがとうございました https://github.com/frontainer/angular-sample 勉強会で使用したサンプルはGithubにて公開しています - PullRequest歓迎 -

×