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

1 受託開発でのAngularJS

2 @frontainer Front-end Engineer 2014/4 LIG入社フロントエンドエンジニアプロフィール http://github.com/frontainer http://trifort.jp/library/cavy/ 現在はWebサイトを作ったりテンプレート作ったりいろいろ前職ではゲームのフロントエンド開発や canvasライブラリを作って遊んだりしてました。これまでBackboneで２本、Angularで４本案件実装してきました。 YUICHI HAYASHI 林優一

3 本題に入る前にお知らせです。

4 Powered by CM

10 体験を売りたい人も貴重な体験をしたい人も CM

11 Powered by CM https://trip-u.com/

12 初回の今回は「AngularJSを導入したときのお話」

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

14 AngularJSを使うときに懸念したこと

15 01 IE9以上+モダンブラウザ AngularJSを使うときに懸念したこと対応ブラウザバージョン 1.2.x 1.3.x 2.x.x 対応ブラウザ IE8 IE9 IE11(予定) 備考 IE8以下は一部機能で別途対策が必要 I積極的な機能削除は行わないが E8はテストを行わない開発中推奨

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 AngularJSを使うときに懸念したこと IE対策はしておいた方が良さそうだ

18 ng-app属性をつけている要素に id=“ng-app”をつける <div id=“ng-app” ng-app=“app”>  …  </div> 対策１- ng-app 独自タグは使わず、属性にする Directiveのrestrictは”E”だけでなく”EA”としておくと吉 <ng-view></ng-view>  <ng-include></ng-include> 対策２- 独自タグ <div ng-view></div>  <div ng-include></div> AngularJSを使うときに懸念したこと

19 独自タグを使いたい場合は、 HTMLにプレフィックス指定をして JSでcreateElementする対策３- 独自タグ２ <html xmlns:ng="http://angularjs.org"> <head>  </head> AngularJSを使うときに懸念したこと

20 json2.jsまたはjson3.jsを使う対策４- 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を使うときに懸念したこと

独自タグを使わないようにすれば最小限で済む IE7以下も対応となったらBackboneの方が無難だと思う新しいバージョンのAngularJSを使うときもIEのシェアと相談になりそう 21 AngularJSを使うときに懸念したこと IEへの対応について

22 02 AngularJSを使うときに懸念したこと学習コスト学習コストが高いと・・・ • 挫折しやすい • 開発に時間がかかる • チームメンバーの増減が難しくなるなどなど、問題多数

23 風の AngularJSを使うときに懸念したこと他のフレームワークより学習コストが高いらしい社員C ドキュメントが少なくて調べるの大変そう CTO AngularJSって難しいんでしょ社員B 覚えること多くて面倒くさそう社員A ※ コメントは当人とは一切関係ありません

24 AngularJSを使うときに懸念したこと学習コストを単純比較したらBackboneよりもAngularは高い

25 AngularJSを使うときに懸念したこと学習コストを単純比較したらBackboneよりもAngularは高い機能多機能少

26 AngularJSを使うときに懸念したこと学習コストって事前に調べて勉強実際に業務で頑張る見事納品して報酬獲得学習コストは単体フレームワークではなくプロジェクトの内容をすべて実装するために必要な学習コストで比較しないといけない

27 AngularJSを使うときに懸念したこと学習コストって事前に調べて勉強実際に業務で頑張る見事納品して報酬獲得準備から完成までかかる調べたり実装するコストの総量

28 AngularJSを使うときに懸念したこと諸々を考えると対して変わらない気がする・・・ Backbone.stickit Marionette Chaplin RequireJS Underscore

29 AngularJSを使うときに懸念したことそれならばAngularJSにしてみよう

30 チャットアプリでAngularJS

31 チャットアプリでAngularJS Node.js Socket-Service チャット実装における構成イメージ View Soket.io Controller

32 チャットアプリでAngularJS Socket-Service angular.module("services").factory("SocketService",function($rootScope){ if (typeof io === 'undeﬁned') 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 チャットアプリで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 チャットアプリで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 チャットアプリで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 実演

37 フォームバリデーション HTML Validationに準拠。  それ以外にも条件必須やエラー表示など柔軟に対応できるアニメーション細かなアニメーションをつけることが簡単  機能だけでなく見た目もこだわりたいフィルタリング並べ替え、日付フォーマットなど  かゆいところに手が届く Ajax通信とセキュリティもちろん安全性にも配慮したい。  Ajax通信周りでAngularがやっている  セキュリティ対策チャットアプリでAngularJS 工数を削減してくれた機能たち（一部）

38 フォームバリデーションチャットアプリでAngularJS required属性など非対応ブラウザでも対応してくれる(Polyﬁll) 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 フィルタリングチャットアプリでAngularJS 日付フォーマットやソートなどのフィルタ機能自作フィルタも比較的簡単に実装できるこのフィルタを増やしているだけでもわくわくする angular.module('ﬁlters').ﬁlter('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 アニメーションチャットアプリで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 Ajax通信とセキュリティチャットアプリでAngularJS app.conﬁg(['$httpProvider',function($httpProvider) { $httpProvider.defaults.headers.common = {'X-Requested-With': 'XMLHttpRequest'}; }]); CSRF対策としてヘッダーとCookieでやり取り  → フォームにhiddenなinputを設置しなくてよいデフォルトでX-Requested-With: “XMLHttpRequest”がついていない app初期化時につけておくと良い

42 実演

特にフォーム周りは充実していて、フォームが複雑なページに最適 AngularのHTMLはいつも使っているHTMLではないと割り切る。  ng-clickとかonClick時代に逆戻りじゃん！的な考えは捨てる。  -> そう！だってこれはテンプレートだものデータバインディングは本当に楽。  ビューをほとんど意識しなくて済む。 43 チャットアプリでAngularJS チャットアプリで導入して思ったこと意外と不足していたのが配列やオブジェクトの操作  UnderscoreやLo-dashがあるといいかもしれない思ったよりも工数はかからず。バグが少なかったためむしろ工数は削減できた。  小規模な開発でも十分に使っていけるフレームワークと感じた。

44 AngularJSを使うなら知っておきたいワード

GruntとAngularJSのMinify Karma / Jasmine YeomanとAngular Generator 45 AngularJSを使うなら知っておきたいワード今回はワードの紹介のみですが・・・ AngularJS Batarang (Chrome拡張） Angular Batarang以外は他のフレームワークでも使えるものです。今後、それぞれ勉強会を開催できればと思ってます。

46 AngularJSの進化スピード

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 今回ご紹介した部分まだまだできることが一杯 AngularJSの進化スピード学習コストが高いと言われる所以の１つ

49 AngularJSの進化スピードまだまだ進化していくフレームワークそれはリスクでもあり楽しみでもある

50 まとめ

51 風のまとめ他のフレームワークより学習コストが高いらしい社員C ドキュメントが少なくて調べるの大変そう CTO AngularJSって難しいんでしょ社員B 覚えること多くて面倒くさそう社員A ※ コメントは当人とは一切関係ありません

52 まとめ AngularJSって難しいんでしょ社員A 使うのはかなり簡単 • 使うのは非常に簡単 • ちょっとしたコードですぐにそれっぽいものができる • でもディレクティブ辺りでだいたい１度つまづく • 本当に使いこなそうとすると先は長い社員B 覚えること多くて面倒くさそう覚えることは多い • ng-なんちゃらが多くて覚えるのは大変 • 他のフレームワークやライブラリにあまり似ていないので、  過去の経験は活かしにくい • 公式ドキュメントを見ながらが基本になる

53 まとめ他のフレームワークより学習コストが高いらしい Nobisuke ドキュメントが少なくて調べるの大変そう CTO フルスタックフレームワークだもの • 機能が多い分、学習すべき項目は多い • でもいろんなライブラリを覚える必要が少ない • 一貫したルールで作れるので最終的には管理しやすい日本語ドキュメントは少ない？ • js-studio (http://js.studio-kingdom.com/angularjs) • ドットインストール (http://dotinstall.com/lessons/ basic_angularjs) • AngularJS Ninja (http://angularjsninja.com/) ドキュメントは公式が無難 -> ゆえに英語必須

54 まとめ AngularJSの開発者が設計から実装、テスト、TIPSまでを紹介 AngularJSアプリケーション開発ガイド http://www.oreilly.co.jp/books/9784873116679/ Web開発者にいま最も支持されているJavaScript MVCフレームワーク「AngularJS」の解説書。定型的な単純作業が繰り返されがちなWeb開発をよりシンプルで楽しいものにしようというのがAngularJSの試みです。本書ではまずAngularJSアプリケーションの構成要素を押さえた上で…

小規模案件でも使えるくらい初期開発は簡単特にフォーム周りは充実している。  コンタクトフォームだけの実装でも役に立ちそう進化スピードが速いので対応するのにもスピードが必要長期に渡って運用するものはバージョンアップのコストを考慮しておく一環したルールで構築できるので、１度覚えれば楽で保守がしやすい  （いろんなプラグインのルールを覚える必要が少ない） 55 まとめ受託開発でAngularを使ってみて 30分では語り尽くせませんね・・・

56 まとめ CMのあと次回予告

57 CM 57 LIGでは、一緒に AngularJSをやっていけるフロントエンドエンジニアを募集しています。 LIG

60 この人を見つけて捕まえて  詳細を吐かせてください！ LIGに興味のあるエンジニアの方は CM

61 次  回予告ディレクトリ構成とタスクランナー ※ 内容が変更になる場合がございます。あらかじめご了承ください

62 ご清聴ありがとうございました https://github.com/frontainer/angular-sample 勉強会で使用したサンプルはGithubにて公開しています - PullRequest歓迎 -

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

by Hayashi Yuichi, Front-end Engineer at Lig inc / Ueno, Tokyo

on Jun 03, 2014

Statistics

Views

Actions

1 Embed 0

Accessibility

Categories

Upload Details

Usage Rights

Report content

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